reactjs – 在Firebase托管中使用Firebase和React
我正在开发一个使用“create react app”(
https://github.com/facebookincubator/create-react-app)创建的React应用程序.
它将托管在Firebase Hosting中,我想使用文档( https://firebase.google.com/docs/web/setup#sdk_imports_and_implicit_initialization)中描述的隐式初始化来部署到多个项目(我有一个开发项目和几个生产项目) <script src="/__/firebase/init.js"></script> 我需要在我的React组件中的上面脚本中初始化“firebase”对象.我应该如何在多个React组件文件中导入它? <script src="https://www.gstatic.com/firebasejs/4.1.1/firebase.js"></script> <script> // Initialize Firebase // TODO: Replace with your project's customized code snippet var config = { apiKey: "<API_KEY>",authDomain: "<PROJECT_ID>.firebaseapp.com",databaseURL: "https://<DATABASE_NAME>.firebaseio.com",storageBucket: "<BUCKET>.appspot.com",messagingSenderId: "<SENDER_ID>",}; firebase.initializeApp(config); </script> 代码到我的index.html文件,如Firebase文档中所述.但是,当我尝试在ReactComponent中导入Firebase时,它找不到它或抱怨没有初始化项目(我在html标签中做了什么) 如何从我的html脚本标记导入Firebase初始化的App和Firebase库? 解决方法
当您使用create-react应用程序并因此使用webpack时,您应该已经在使用nodejs firebase:
npm install --save firebase 要在部署时动态获取配置,您必须访问此URL: /__/firebase/init.json 因此,在尝试初始化firebase之前,需要进行异步调用以将json对象存储在此位置.所以这里有一些示例代码(使用axios for async call)包含在index.js中: import React from "react"; import ReactDOM from "react-dom"; import * as firebase from "firebase/app"; import axios from "axios"; const getFirebaseConfig = new Promise((resolve,reject) => { axios .get(`/__/firebase/init.json`) .then(res => { resolve(res.data); }) .catch(err => reject(err)); }); getFirebaseConfig .then(result => { firebase.initializeApp(result); ReactDOM.render( <div>XXXXX</div>,document.getElementById("root") ); }) .catch(err => console.log(err)); 另外为了使这更加简化(使用dev firebase配置,使用npm start,并在部署时动态获取prod firebase配置),您可以执行以下操作: fbconfig.js: if (process.env.NODE_ENV === "production") { module.exports = require("./prod"); } else { module.exports = require("./dev"); } dev.js: const firebaseConfig = { // your dev firebase configuration apiKey: "xxxxx",authDomain: "xxxxx",databaseURL: "xxxxxx",projectId: "xxxxxx",storageBucket: "xxxxx",messagingSenderId: "xxxxx" }; const getFirebaseConfig = new Promise((resolve,reject) => { resolve(firebaseConfig); }); export default getFirebaseConfig; prod.js: import axios from "axios"; const getFirebaseConfig = new Promise((resolve,reject) => { axios .get(`/__/firebase/init.json`) .then(res => { resolve(res.data); }) .catch(err => reject(err)); }); export default getFirebaseConfig; 最后在index.js中: import getFirebaseConfig from "./fbconfig"; getFirebaseConfig.then(result => { firebase.initializeApp(result); ...etc )} .catch(err => console.log(err)); (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |