How to read environment variables in react app passed through docker-compose.yaml file during run time?

2.1k views Asked by At

I am unable to read environment variables declared in docker-compose.yml in my react app. The app is created using create-react-app

# docker-compose.yml

 ```
 image: sample-app
 container_name: sample-app
 restart: always
 ports:
   - "80:80"
 environment:
   REACT_APP_FIREBASE_API_KEY: "dsdsdsdsdHUXfYg5_QpQ"
   REACT_APP_FIREBASE_PROJECT_ID: "simple_project"
   REACT_APP_FIREBASE_MESSAGING_SENDER_ID: "22762762"
   REACT_APP_PRISMA_EXPRESS_URL: "http://trial.com:4000"
   REACT_APP_PYTHON_DEVELOPMENT_URL: "http://trial:4200"

 ```

The below is the config.js file in my react app. Here I try to read the environment variable which are passed through docker-compose.yml. The actual values passed through docker-compose are not read in config.js

 # config.js

 ```
   export const stored_values={
    //firebase configuration
    apiKey: process.env.REACT_APP_FIREBASE_API_KEY,
    projectId: process.env.REACT_APP_FIREBASE_PROJECT_ID,
    messagingSenderId: process.env.REACT_APP_FIREBASE_MESSAGING_SENDER_ID,
    backendURL: process.env.REACT_APP_PRISMA_EXPRESS_URL
   }

 ```

What am I doing wrong here ?

0

There are 0 answers