environment variable not working in react firebase config file

Question

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.

Answer 1

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.

Answer 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

Answer 3

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