How to detect production or development build at runtime in React

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

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

In React , We have two modes of builds

  • production is an minified version of javascript and html code and render on browser client machine and performance is good
  • development - Javascript and html code is not minified and loads immediately

Both this builds has different environment varialbes to hold related to build code.

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

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

We have node environment variables process.env.NODE_ENV defined with application created with create-react-app tool. It check environment of you 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, global environment variable DEV is available to use.

This is an javascript environment variable which 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 way we can check react native is using development or production build.

Join 6,000 subscribers and get a daily digest of full stack tutorials delivered to your inbox directly.No spam ever. Unsubscribe any time.

Similar Posts
You'll get a notification every time a post gets published here.