If your React project uses Create React App (CRA) which is installed as the react-scripts npm package, you need to create a production build before deploying it to production.
To build a Create React App project for production, you need to run the
npm run build command in the root folder of the project and the production build will be generated and placed in the
Read on to learn more about production builds and some of their caveats.
- Why do we need production builds?
- How to create a production build in a Create React App project
- How Create React App generates production builds
Why do we need production builds?
When CRA is used in development with the
npm run start command, it uses webpack to continuously convert JSX to JS that is then placed into development builds that are served on localhost by webpack-dev-server. These development builds have several extra features like hot module replacement, debug messages and more that make it easier to develop and debug the code.
While you could use the same command to serve a Create React app project in production, it is not recommended since webpack-dev-server is not designed to serve many users and the development features that are enabled on development builds cause the app to load and run slower.
So the recommended approach is to use a production build which
- has the development features turned off
- can be served from a web server or a static hosting provider that can handle more traffic.
How to create a production build in a Create React App project
To create a production build in a Create React App project, we need to run
npm run build in the root folder of the project. This will instruct the CRA npm package,
react-scripts to create a production build.
$ npm run build
> email@example.com build
> react-scripts build
Creating an optimized production build...
File sizes after gzip:
46.6 kB build/static/js/main.0eb7a0f0.js
1.78 kB build/static/js/787.87760723.chunk.js
541 B build/static/css/main.073c9b0a.css
The project was built assuming it is hosted at /.
You can control this with the homepage field in your package.json.
The build folder is ready to be deployed.
You may serve it with a static server:
serve -s build
Find out more about deployment here:
The generated production build is placed in a folder called
index.html file which is the web page that must be served from a web server to run the React app.
To deploy this production build to production, you need to copy all of the files and folders inside the build folder to a web server or a static website host like Github pages or Netlify. These files and folders must be copied to the root or topmost folder that is being served by the web server so that
index.html is served at the root URL (
/) of your domain. (e.g. www.frontendundefined.com/ which can be abbreviated to www.frontendundefined.com).
If you are using React router or any other form of client-side routing, you might also need to set up your web server or static site host to properly handle the client-side routes. Some static hosts set this up automatically for you.
How Create React App generates production builds