Using Development and Production Variables for React apps with process.env.NODE_ENV

How to set up your app so the environment variables get defined automatically.

Check my latest post!

The Honest Guide for Coding Bootcamps

If you are new to web development, you might have found yourself commenting and uncommenting variables declaring routes and/or API URLs based on the environment they had to be used: development or in production. For example, in development, you are fetching from your localhost http://localhost:3000 in development and from Heroku in production http://myapp.herokuapp.com.

If you want to deploy your React app to Heroku, you can read my post Deploying a React JS/Rails App Using Heroku and GitHub Pages.

In a manual scenario, you might have a constants.js file exporting constants and your components importing them. By un/commenting each line, you are setting up the variables required on each environment.

// Constants.js
export const API_URL: 'https://myapp.herokuapp.com' // Production
export const API_URL: 'http://localhost:3000' // Development
// Component.js
import {API_URL} from './Contants'

But this is not a good solution. Instead, you can automate the definition of the variables for each environment. In order to implement it, you have to modify Constants.js by adding the following :

// Constants.js
const prod = {
 url: {
  API_URL: ‘https://myapp.herokuapp.com',
  API_URL_USERS: ‘https://myapp.herokuapp.com/users'}
};
const dev = {
 url: {
  API_URL: ‘http://localhost:3000'
 }
};
export const config = process.env.NODE_ENV === ‘development’ ? dev : prod;

The variables are stored as key:values; you could add other URLs within the same key. We are also exporting a config constant which contains a conditional (ternary) operator which will return the development or production variable based on the value of the process.env.NODE_ENV global variable (more info about process.env on this post) which is defined when we run our app in development npm start or in production when deployed running npm run deploy.

More about process.env.NODE_ENV in the -Create-react-app documentation (thanks Chris Moran for the note).

Now, the React components can import the variables:

// Component.js
import { config } from './Constants'
var url = config.url.API_URL
var url_users = config.url.API_URL_USERS

You can explore other ways of exporting following JS documentation.

process.env.NODE_ENV can also be used in other sections of your application such as the store. For instance, your store can use Redux DevTools extension and Redux-Logger in development.

import reducer from './Reducers/rootReducer';
import {applyMiddleware, compose, createStore } from 'redux';
import thunk from 'redux-thunk';
import logger from 'redux-logger';

let middleware = [thunk]
let enhancers = [ applyMiddleware(...middleware) ]

if ( process.env.NODE_ENV === 'development') {
    middleware.push(logger);
    enhancers.push(window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__());
}

const store = createStore( reducer, compose(...enhancers) )
export default store;