How to tell ReactJS to build project in Production mode ?

React production build creates minified bundles, lighter-weight source maps, and optimized assets. This improves the load time. React recommends using production mode while deploying the React app. We now know that production build helps in optimizing performance. 

React.js provides a powerful and efficient build process that optimizes your application for production deployment. By default, React.js builds your project in development mode, which includes features like detailed error messages and debugging tools. However, when you’re ready to deploy your application, it’s important to build it in production mode to benefit from optimized performance and reduced bundle size.

 Let’s see now a step-by-step guide to create a react app in production mode.

Steps to Create React Application

Step 1: Open the terminal and run the following command to create a project folder

npx create-react-app myapp

Step 2: Move into the project folder:

cd myapp

Project Structure

The initial project structure will look like the following.

project structure

Step 3: Now edit the App.js file in the project and replace pre-existing code with the following code.

Javascript

// Filename -App.js

import logo from "./logo.svg";
import "./App.css";

function App() {
    return (
        <div className="App">
            <header className="App-header">
                <img
                    src={logo}
                    className="App-logo"
                    alt="logo"
                />
                <p>This is my React App.</p>
            </header>
        </div>
    );
}

export default App;

CSS

/* Filename - App.js */

.App {
  text-align: center;
}

.App-logo {
  height: 40vmin;
  pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
  .App-logo {
    animation: App-logo-spin infinite 20s linear;
  }
}

.App-header {
  background-color: #282c34;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: calc(10px + 2vmin);
  color: white;
}


@keyframes App-logo-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

Step to run the application: Go to the root of the project folder and run one of the following commands:

npm start

Output: The app will run on port 3000 and the output screen will look like this:

Output Screen

Step 4: Now create the production build of the app. React App makes it quite simple to build in production. If your project is build with create-react-app, go to the root directory of the project and run:

npm run build

creating production build

This will create a build directory with production build of the app. Your JavaScript and CSS files will be inside the build/static directory. A number of .js files are generated and placed inside the build/static/js directory. These are called chunks.

JS chunks created after production build

Step 5: Running the app in production mode. We will serve the build version with a static server: In production mode the react app will run on port 5000.

serve -s build

App running in production mode

Now let’ see how to know whether the build process was setup correctly

1. We will be using React Developer Tools for Chrome . When this extension is installed and running and we visit a site with react in production mode, the react icon will have dark background. 

Production mode

2. If you visit a site with React in development mode, the icon will have a red background:

development mode