0

I am making a react app with firebase and I want to use environment variables for the firebase config. this is the firebase config in my react apps src folder

import firebase from "firebase"
import "firebase/auth"

console.log(process.env)

const config = {
    //private stuff
};
// Initialize Firebase
firebase.initializeApp(config);
firebase.analytics();

export default firebase

the issue is with that console log, I am using that for debugging, it is logging

NODE_ENV: "production"
PUBLIC_URL: ""
WDS_SOCKET_HOST: undefined
WDS_SOCKET_PATH: undefined
WDS_SOCKET_PORT: undefined

when it should be logging

NODE_ENV: "production"
PUBLIC_URL: ""
WDS_SOCKET_HOST: undefined
WDS_SOCKET_PATH: undefined
WDS_SOCKET_PORT: undefined
GOOGLE_API_KEY: "key"

why aren't my custom environment variables showing up? I am using AWS amplify for deployment so that is what would be providing the environment variables.

david snyder
  • 337
  • 3
  • 16

3 Answers3

5

https://create-react-app.dev/docs/adding-custom-environment-variables/

Your project can consume variables declared in your environment as if they were declared locally in your JS files. By default you will have NODE_ENV defined for you, and any other environment variables starting with REACT_APP_.

Note: You must create custom environment variables beginning with REACT_APP_. Any other variables except NODE_ENV will be ignored to avoid accidentally exposing a private key on the machine that could have the same name. Changing any environment variables will require you to restart the development server if it is running.

Drew Reese
  • 165,259
  • 14
  • 153
  • 181
2
  1. create .env file in your root where package.json located.
  2. make variable name with REACT_APP_customName/cofigString
  3. replace the values with the variable (2)
  4. save both files
  5. check the project
fiverrtahmid
  • 21
  • 1
0

** Make sure your .env file is in the root directory, not inside src folder.

omeatai
  • 1,013
  • 8
  • 8