How to detect production or development build at runtime in React

This is a short tutorial about how to check whether to react application is a production build or development code at runtime.

Sometimes, We want to check whether to react code is in production mode or not

In React, We have two modes of builds

• production is a minified version of javascript and HTML code and rendered on browser client machine and performance is good
• development - javascript and HTML code is not minified and loads immediately.

Both these builds have different environment variables to hold related to build code.

#How to check production or development mode with create-react-app

create-react-app is a react cli tool to generate an application from scratch with a folder structure. It also includes dependencies and builds pipelines configured with a webpack of development and production build.

We have node environment variables process.env.NODE_ENV defined with an application created with the create-react-app tool. It checks the environment of your application running and returns development of code running development mode.

• process.env.NODE_ENV = development is for development build
• process.env.NODE_ENV != development is for production build

In code, we can check at run time using

if (!process.env.NODE_ENV || process.env.NODE_ENV === "development") {
  // development build code
} else {
  // production build code
}

#Check your react native is production or development build

In React Native, the global environment variable DEV is available to use.

It is a javascript environment variable that we can use to set to true for development and false for production.

if (__DEV__) {
  console.log("Development code build");
} else {
  console.log("Production code build");
}

This is why we can check to react native is using development or production build.