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 build folder.
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?
React is written using JSX which web browsers cannot understand. So JSX needs to be converted into plain Javascript before it can be run in browsers.
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
> cra-app@0.1.0 build
> react-scripts build
Creating an optimized production build...
Compiled successfully.
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:
https://cra.link/deployment
The generated production build is placed in a folder called build. It usually contains several folders of Javascript, CSS and image files and an 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, 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
Under the hood, Create React App uses webpack to generate the production builds. webpack is a module bundler that can process Javascript files and understand the modules that are imported within them to bundle them together in a single output file. To transform the JSX files used by React into plain Javascript, CRA configures webpack to use babel which has a preset for converting the JSX code into Javascript. You can find more details about how this process works in this post.
