DEV Community

Rishikesh Vedpathak
Rishikesh Vedpathak

Posted on • Originally published at Medium on

14 3

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

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/"
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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"
}
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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.

And more...

  • Check Hybrowlabs for React app development services.

Image of AssemblyAI tool

Challenge Submission: SpeechCraft - AI-Powered Speech Analysis for Better Communication

SpeechCraft is an advanced real-time speech analytics platform that transforms spoken words into actionable insights. Using cutting-edge AI technology from AssemblyAI, it provides instant transcription while analyzing multiple dimensions of speech performance.

Read full post

Top comments (2)

Collapse
 
ping2anilsharma profile image
Anil Sharma

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

Collapse
 
rishikeshvedpathak profile image
Rishikesh Vedpathak

Corrected.
It was a markdown typo mistake. Thanks for pointing it out.

nextjs tutorial video

Youtube Tutorial Series 📺

So you built a Next.js app, but you need a clear view of the entire operation flow to be able to identify performance bottlenecks before you launch. But how do you get started? Get the essentials on tracing for Next.js from @nikolovlazar in this video series 👀

Watch the Youtube series

👋 Kindness is contagious

Dive into an ocean of knowledge with this thought-provoking post, revered deeply within the supportive DEV Community. Developers of all levels are welcome to join and enhance our collective intelligence.

Saying a simple "thank you" can brighten someone's day. Share your gratitude in the comments below!

On DEV, sharing ideas eases our path and fortifies our community connections. Found this helpful? Sending a quick thanks to the author can be profoundly valued.

Okay