loading...

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

rishikeshvedpathak profile image Rishikesh Vedpathak Originally published at Medium on ・3 min read

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

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.

Posted on by:

rishikeshvedpathak profile

Rishikesh Vedpathak

@rishikeshvedpathak

Frontend developer | ReactJS | React Native | Angular | GatsbyJS

Discussion

pic
Editor guide
 

How do we access environment variables in application. I know we can access using process.env.ENV_VAR_NAME
bit in your case you have given variables names using slash so when putting
process.env.REACT_APP_TITLE does not work