{

How to detect production or development build at runtime in React


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

Sometimes, We want to check 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 folder structure. It also includes dependencies and builds pipeline configured with 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, global environment variable DEV is available to use.

It is a 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 why we can check to react native is using development or production build.

THE BEST NEWSLETTER ANYWHERE
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
Subscribe
You'll get a notification every time a post gets published here.





Related posts

ReactJS Append variables with strings, jsx state and prop concatenate html

How to display the content of a JSON file in React with example

Reactjs Fix Must call a super constructor in derived class before accessing this

How to change default port in React with create-react-app command?

How to create an react typescript application | Create-react-app typescript application

How to handle broken images in React | fallback for broken images

Fixing an error You are running create-react-app 4.0.3, which is behind the latest release (5.0.0) in React