How to tell ReactJS to build project in Production mode ? - GeeksforGeeks

30 Aug, 2021
In development mode, React includes many warnings to help in finding problems before they lead to bugs. Doing so, it increases the bundle size and makes the app run slower. The slowdown may be accepted while working on the app locally but we cannot afford this in deployment.
In development mode React, internally, uses several clever techniques to minimize the number of costly DOM operations required to update UI. Nevertheless, there are several ways we can speed up our React application – production builds being one of them. 
What will production build do?
The 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. 
 
Let’s see now how to create react app in production mode.
Creating React Application using Create React App:
Step 1: Open terminal and run the following command to create project folder of the react application:npx create-react-app myapp
Step 1: Open terminal and run the following command to create project folder of the react application:
npx create-react-app myapp
Step 2: Move into the project folder:cd 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.
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;
 
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
Picked
React-Questions
ReactJS
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to set background images in ReactJS ?
ReactJS useNavigate() Hook
How to create a table in ReactJS ?
How to navigate on path by button click in react router ?
React-Router Hooks
Roadmap to Become a Web Developer in 2022
Installation of Node.js on Linux
Top 10 Projects For Beginners To Practice HTML and CSS Skills
Convert a string to an integer in JavaScript
How to insert spaces/tabs in text using HTML/CSS?