Question

我正在努力找出为我的React App配置Firebase出了什么问题。我至少遵循了10个不同的教程，并且无法获取配置变量以进行识别。

我正在使用Web Pack，所以我的webpack.config.json具有如下插件：

plugins: [
      CSSExtract,
      new webpack.DefinePlugin({
        'process.env.FIREBASE_API_KEY': JSON.stringify(process.env.FIREBASE_API_KEY),
        'process.env.FIREBASE_AUTH_DOMAIN': JSON.stringify(process.env.FIREBASE_AUTH_DOMAIN),
        'process.env.FIREBASE_DATABASE_URL': JSON.stringify(process.env.FIREBASE_DATABASE_URL),
        'process.env.FIREBASE_PROJECT_ID': JSON.stringify(process.env.FIREBASE_PROJECT_ID),
        'process.env.FIREBASE_STORAGE_BUCKET': JSON.stringify(process.env.FIREBASE_STORAGE_BUCKET),
        'process.env.FIREBASE_MESSAGING_SENDER_ID': JSON.stringify(process.env.FIREBASE_MESSAGING_SENDER_ID)
      })
    ],

然后，我有一个.env.development文件，如下所示：

FIREBASE_API_KEY="1"
FIREBASE_AUTH_DOMAIN="2.firebaseapp.com"
FIREBASE_DATABASE_URL="https://3.firebaseio.com"
FIREBASE_PROJECT_ID="4"
FIREBASE_STORAGE_BUCKET="5.appspot.com"
FIREBASE_MESSAGING_SENDER_ID="6"

然后，我有一个firebase / firebase.js文件，如下所示：

import * as firebase from 'firebase';
// import firebase from 'firebase/app';
// import 'firebase/auth';
// import database from 'firebase/database';
// import { firebase } from '@firebase/app';
// import '@firebase/auth';
// import * as firebaseui from 'firebaseui';
// import { settings } from './config';

// Initalize and export Firebase.
const prodConfig = {
  apiKey: process.env.FIREBASE_API_KEY,
  authDomain: process.env.FIREBASE_AUTH_DOMAIN,
  databaseURL:process.env.FIREBASE_DATABASE_URL,
  projectId: process.env.FIREBASE_PROJECT_ID,
  storageBucket: process.env.FIREBASE_STORAGE_BUCKET,
  messagingSenderId: process.env.FIREBASE_MESSAGING_SENDER_ID
};

const devConfig = {
  apiKey: process.env.FIREBASE_API_KEY,
  authDomain: process.env.FIREBASE_AUTH_DOMAIN,
  databaseURL:process.env.FIREBASE_DATABASE_URL,
  projectId: process.env.FIREBASE_PROJECT_ID,
  storageBucket: process.env.FIREBASE_STORAGE_BUCKET,
  messagingSenderId: process.env.FIREBASE_MESSAGING_SENDER_ID
};

const config = process.env.NODE_ENV === 'production'
  ? prodConfig
  : devConfig
  console.log(config);




if (!firebase.apps.length) {
  firebase.initializeApp(config);
  console.log(config);
};

const database = firebase.database();

const auth = firebase.auth();

export {firebase, auth, database  };

我一直试图弄清为什么配置变量记录为未定义。

有人知道如何成功配置Firebase应用程序。我关于这个主题的上一个问题建议删除：和env.development文件中的值之间的空格-但这对这个问题没有任何影响。没有任何变量按照控制台日志中的定义注册。

当我尝试在开发中开始时，出现错误消息：

Error: FIREBASE FATAL ERROR: Can't determine Firebase Database URL.  Be sure to include databaseURL option when calling firebase.initializeApp().

我所有的变量都记录为未定义：

{apiKey：未定义，authDomain：未定义，databaseURL：未定义，projectId：未定义，storageBucket：未定义，...}

Answer 1

您可以将Firebase配置存储在类似于以下内容的单独的js文件中：

var config = {
  apiKey: "APIKEY",
  authDomain: "AUTHDOMAIN",
  databaseURL: "URL"
  projectId: "ID"
  storageBucket: "BUCKET",
  messagingSenderId: "SENDER"
};

var app = Firebase.initializeApp(config);
export const db = app.database();

如果您担心公开自己的Firebase配置，请阅读：Is it safe to expose Firebase apiKey to the public?

为React App配置Firebase-未定义的配置

1 个答案: