0

I want to develop Staging, Development and Production environment for my react project. My idea is to set REACT_APP_ENVIRONMENT variable (i tried the same process with NODE_ENV also, same result not working) as staging, development and production based on the github repository its currently in.

Problem is while launching using npm start, my env variables show me "development" even though my current branch is "staging".

In package.json, I added the following script:

  "scripts": {
    "start": "build.sh && react-scripts start",
    "build": "build.sh && react-scripts build",
    "test": "build.sh && react-scripts test",
    "eject": "build.sh && react-scripts eject"
  },

my build.sh is as follows:

BRANCH_NAME=$(git rev-parse --abbrev-ref HEAD)

if [ "$BRANCH_NAME" == "production" ]
then
  export REACT_APP_ENV=production
elif [ "$BRANCH_NAME" == "staging" ]
then
  export REACT_APP_ENV=staging
else
  export REACT_APP_ENV=development
fi

echo "REACT_APP_ENV=$REACT_APP_ENV"

I use process.env to console log, unfortunately, it does not give REACT_APP_ENV as REACT_APP_ENV : "development"

I already set .env variable REACT_APP_ENV as development though, if i dont set anything there, it will just be undefined.

My env variables:

REACT_APP_ENV=development
REACT_APP_DEVELOPMENT_FIREBASE_API_KEY=your_development_firebase_api_key
REACT_APP_DEVELOPMENT_FIREBASE_AUTH_DOMAIN=your_development_firebase_auth_domain
REACT_APP_DEVELOPMENT_FIREBASE_DATABASE_URL=your_development_firebase_database_url
REACT_APP_DEVELOPMENT_FIREBASE_PROJECT_ID=your_development_firebase_project_id
REACT_APP_DEVELOPMENT_FIREBASE_STORAGE_BUCKET=your_development_firebase_storage_bucket
REACT_APP_DEVELOPMENT_FIREBASE_MESSAGING_SENDER_ID=your_development_firebase_messaging_sender_id
REACT_APP_DEVELOPMENT_FIREBASE_APP_ID=your_development_firebase_app_id
REACT_APP_PRODUCTION_FIREBASE_API_KEY=your_production_firebase_api_key
REACT_APP_PRODUCTION_FIREBASE_AUTH_DOMAIN=your_production_firebase_auth_domain
REACT_APP_PRODUCTION_FIREBASE_DATABASE_URL=your_production_firebase_database_url
REACT_APP_PRODUCTION_FIREBASE_PROJECT_ID=your_production_firebase_project_id
REACT_APP_PRODUCTION_FIREBASE_STORAGE_BUCKET=your_production_firebase_storage_bucket
REACT_APP_PRODUCTION_FIREBASE_MESSAGING_SENDER_ID=your_production_firebase_messaging_sender_id
REACT_APP_PRODUCTION_FIREBASE_APP_ID=your_production_firebase_app_id
REACT_APP_STAGING_FIREBASE_API_KEY=your_staging_firebase_api_key
REACT_APP_STAGING_FIREBASE_AUTH_DOMAIN=your_staging_firebase_auth_domain
REACT_APP_STAGING_FIREBASE_DATABASE_URL=your_staging_firebase_database_url
REACT_APP_STAGING_FIREBASE_PROJECT_ID=your_staging_firebase_project_id
REACT_APP_STAGING_FIREBASE_STORAGE_BUCKET=your_staging_firebase_storage_bucket
REACT_APP_STAGING_FIREBASE_MESSAGING_SENDER_ID=your_staging_firebase_messaging_sender_id
REACT_APP_STAGING_FIREBASE_APP_ID=your_staging_firebase_app_id

Also, all other variables are loading, its just, export command isnt working somehow

Asad Zubair Bhatti
  • 71
  • 4
  • 1
    `export` isn't _supposed_ to change the content of any files, `.env` included. It only changes the environment of the current shell ("the current shell" in the case of the script meaning the shell that's _running the script_, **not** the shell that started the script), and anything that's started by that shell and inherits its environment. – Charles Duffy Apr 25 '23 at 19:42
  • So my idea is i want to set environment name so that i can use that to get environment variables, how do i do that? – Asad Zubair Bhatti Apr 25 '23 at 19:44
  • 1
    Source the script instead of running it as a subprocess. `. build.sh && react-scripts start` -- note that `.` at the front; that's the dot command, which bash also calls "source". – Charles Duffy Apr 25 '23 at 19:45
  • 1
    The reason I'm instructing you to use the old/POSIX name `.` is that bash isn't actually used for running trivial noninteractive scripts like the ones in your package.json; instead, `sh` is used for that (so this question shouldn't be tagged bash at all). – Charles Duffy Apr 25 '23 at 19:46
  • 1
    (BTW, that also means that bash-only features like `[ "$BRANCH_NAME" == "production" ]` might not work -- use `[ "$BRANCH_NAME" = "production" ]` instead; the standardized string comparison operator is just one `=`; or even better, use a `case` statement: `case $BRANCH_NAME in production|staging) export REACT_APP_ENV=$BRANCH_NAME;; *) export REACT_APP_ENV=development;; esac`) – Charles Duffy Apr 25 '23 at 20:57

0 Answers0