React — Environment specific builds using .env with CRA and env-cmd

Many times we(the developers) struggles with making environment specific builds. The process might require changing variables like API_BASE_URL, APP_TITLE etc. This is a manual task and needs to be done carefully, you don’t want to miss any field here to change.

But why to waste our development time in making these manual changes, in stead we can make a good use of .env file.

1. Environment variables in Create React App

We can add environment specific variables to our project by declaring them in a local JS file. By default we have NODE_ENV defined for us by CRA, and we can add any other environment variables starting with REACT_APP_.

WARNING: Do not store any secrets (such as private API keys) in your React app! Environment variables are embedded into the build, meaning anyone can view them by inspecting your app’s files.

The environment variables are embedded during the build time. Since Create React App produces a static HTML/CSS/JS bundle, it can’t possibly read them at runtime.

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.

2. Managing environment variables in .env files

We can create a file named .env in which we can store our environment variables. This .env file will be treated as a default file to define permanent environment variables.

Now we need to create other .env files to support staging and production environments. So lets create .env.staging and .env.production files.

So the files would look like,

// .env
REACT_APP_TITLE = "My Awesome App"
REACT_APP_SESSION_TIME = "60"
// .env.staging
REACT_APP_API_BASE_URL = "https://app.staging.com/api/"
// .env.production
REACT_APP_API_BASE_URL = "https://app.prod.com/api/"

3. Install env-cmd package

Now that we have our separate env files ready we can use them make environment specific builds. For than we will use an npm package env-cmd .

env-cmd

This is a simple node program for executing commands using an environment from an env file. Install this package with below command,

npm install env-cmd

4. Create commands to create environment specific builds

Now open your package.json file and add below scripts,

"scripts": {
    "start": "react-scripts start",
    "start:staging": "env-cmd -f .env.staging react-scripts start",
    "start:prod": "env-cmd -f .env.production react-scripts start",
    "build": "react-scripts build",
    "build:staging": "env-cmd -f .env.staging react-scripts build",
    "build:prod": "env-cmd -f .env.production react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
}

With this, we can use below commands for creating environment specific builds.

// command to start local sever with .env file. This is used while actual development
npm start
// command to start local sever with .env.staging file
npm run start:staging
// command to start local sever with .env.production file
npm run start:prod
// command to build app with .env.staging file
npm run build:staging
// command to build app with .env.production file
npm run build:prod

Conclusion

We have understood why it is useful to have scripts for making environment specific builds. Doing so, we can save our time with automated process and manage environment variables easily.