ReactJS: How to create build commands for different environments

Use Case

"As a developer, I want to create multiple build commands in my ReactJS app (made with CRA CLI) so that the deployment team can generate separate build bundles to deploy in separate servers without changing anything in the code."

The Problem

Consider the scenario where you have a staging server and a production server to deploy your ReactJS app. And a separate deployment team deploys the app from your company's repository. To make things worse, the two servers have different routes where the app is deployed (one is directly in the server's domain/subdomain root and the other is inside a subfolder under the same or another domain/subdomain). And as the developer, you have to provide separate build commands that the deployment team can use. This is what we'll solve today.

The Solution

For ease of understanding, let's assume the following:

• Our production server address is https://productionapp.domain
• Our staging server address is https://stagingapp.domain and our staging deployment will be inside a subfolder named subfolder, which makes the staging homepage to be https://stagingapp.domain/subfolder
• Our API URLs are https://development.domain/api for development, https://staging.domain/api for staging, and https://production.domain/api for production.
• We'll create multiple build commands such as build:staging and build:production
• Also keep in mind that, we'll have to make sure React Router is properly configured so that the subfolder in the route doesn't cause issues
• Since we're using React Router, we cannot have a single domain as the homepage value in package.json file for different builds, which makes the current (as of July 2021) ReactJS deployment documentation not much help

Now, let's create the necessary files and adjust our code.

Step 1: Installing dependencies

Firstly, we'll install the node package env-cmd in our project that we can use to create separate run or build commands for different environments based on values set in different .env files.

Step 2: Setting environment specific values

Secondly, we'll create a set of .env files in the project root that will contain a set of values for different environments. Bases on our assumptions mentioned earlier, let's create a .env file to contain common values, .env.development file to contain development specific values, .env.staging file to contain staging specific values, .env.production file to contain production specific values.

The .env file will look like the following where $npm_package_version will take the version value from our package.json file.

The .env.development file will look like the following:

The .env.staging file will look like the following:

The .env.production file will look like the following:

Step 3: Using environment specific values

We can now use these values in our React components with NodeJS process.env global variable. For example, we can display app version for our app's About page, FAQ, footer, Login page etc. inside React component's JSX using something like the following:

Since these values are globally available in NodeJS runtime, we can use these inside our JavaScript using process.env.REACT_APP_API_BASE_URL, process.env.REACT_APP_PUBLIC_URL, and process.env.REACT_APP_ROUTER_BASENAME. For example, if you have a JS file where you're listing your API URLs to be exported for fetch or axios requests, you can do that like the following:

Step 4: Setting React app's "homepage" value

Now we'll add or update the homepage value as the last item in our React app's package.json file as the following.

Step 5: Configuring React Router

We'll update our Router component's basename property in JSX like the following:

Step 6: Creating environment specific run or build commands

Finally, we can create the environment specific run or build commands now. We'll create build:staging and build:production commands that will create builds for staging and production servers and start:dev command to run the app locally in development mode. You can create more commands like these using similar logic to meet your specific requirements. Add the following inside the scripts value of package.json file.

The scripts value in our package.json will now look something like the following.

We can use the following command to start the development server now.

Also, we can now create staging or production server specific builds without changing anything manually in the code.

I hope you find this helpful.