[FIXED] How to access Google Cloud Run Environment Variables from React App

Issue

I have Cloud Run environment variables as defined for my Google Cloud Run React App deployment.

However when I try to access them inside the react app as below, it gets "undefined" values.

export const BASE_FRONTEND_URL = process.env.REACT_APP_BASE_FRONTEND_URL
export const BASE_BACKEND_URL = process.env.REACT_APP_BASE_BACKEND_URL

I understand that the values above are in client browser, and there are no variables exist at that moment.

But how should I get the environment variables from Google Cloud Run dashboard and propagate to the client without relying on ".env" files.

Solution

If you want to use those variables (process.env.REACT_APP_BASE_FRONTEND_URL, process.env.REACT_APP_BASE_BACKEND_URL) into your react app then you have to create a .env file, which will contain all environment variables for your react app because the library which provide this named dotenv have default configuration to get all those environment variables from .env file.

So you have to get those env variables from Google cloud and paste them into .env file, then the issue should be solved.

Answered By - satydotjs

Answer Checked By - Candace Johnson (PHPFixing Volunteer)