Creating a Production Build
Relevant source files
The following files were used as context for generating this wiki page:
This project, bootstrapped with Create React App, provides a streamlined process for creating an optimized production build. The build process bundles all necessary assets, minifies the code, and prepares the application for deployment. The primary tool used for this is react-scripts, which is invoked via an npm script.
The result of the production build is a build directory containing static files. These files are optimized for performance, with minified code and filenames that include hashes for efficient browser caching. This makes the application ready for deployment on any static file hosting service.
Sources: README.md:1-3, 21-27, package.json:11
Build Command
The production build is initiated by running a single command in the project's root directory.
Sources: README.md:21
npm run build
This command executes the build script defined in package.json. It leverages react-scripts to handle the entire build process, including transpiling, bundling, and optimization.
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
}
Sources: package.json:15-20
The script correctly bundles React in production mode, which results in significant performance improvements over the development mode. The output is a build folder containing the final, deployable application assets.
Sources: README.md:22-27
Build Process Flow
The build process transforms the source code from the src and public directories into a set of static files optimized for production.
This diagram illustrates the high-level flow of the npm run build command.
Sources: README.md:21-27, package.json:17
Build Artifacts
Upon successful execution of the build command, a build directory is created. This directory contains all the files necessary to deploy the web application.
index.html
The main HTML file that serves as the entry point for the application. It is generated from the template located at public/index.html. During the build, placeholders like %PUBLIC_URL% are replaced with the correct paths, and the bundled JavaScript and CSS files are automatically injected into the body.
The application's React components are mounted onto the div element with the id="root".
<div id="root"></div>
Sources: public/index.html:30, src/index.js:7
Static Assets
The build process generates optimized JavaScript and CSS files. These files have unique hashes in their filenames, which helps with long-term caching. When the application code changes, new files with new hashes are generated, forcing browsers to download the updated versions.
Sources: README.md:26
manifest.json
This file provides metadata for the web application, enabling Progressive Web App (PWA) features. It allows the app to be "installed" on a user's mobile device or desktop. The source for this file is public/manifest.json.
Sources: public/index.html:12-14, public/manifest.json
The manifest includes details such as the app's name, icons, start URL, and theme colors.
{
"short_name": "React App",
"name": "Create React App Sample",
"icons": [
{
"src": "favicon.ico",
"sizes": "64x64 32x32 24x24 16x16",
"type": "image/x-icon"
}
],
"start_url": ".",
"display": "standalone",
"theme_color": "#000000",
"background_color": "#ffffff"
}
Sources: public/manifest.json:2-18
Build Configuration
The build process is influenced by configurations within package.json.
Browser Support (browserslist)
The browserslist configuration in package.json determines the target browsers for the compiled JavaScript and CSS. This ensures that the output is compatible with the specified browser versions while minimizing unnecessary polyfills. The production list is used for npm run build.
| Environment | Configuration | Description |
|---|---|---|
production | >0.2% | Supports browsers with > 0.2% market share. |
production | not dead | Excludes browsers officially no longer supported. |
production | not op_mini all | Excludes the Opera Mini browser. |
development | last 1 chrome version | Supports the latest version of Chrome. |
development | last 1 firefox version | Supports the latest version of Firefox. |
development | last 1 safari version | Supports the latest version of Safari. |
Sources: package.json:28-37
Conclusion
Creating a production build for this application is a standardized process managed by Create React App's react-scripts. The npm run build command is the single entry point to generate a fully optimized, minified, and deployment-ready set of static assets in the build folder. The resulting build is configured for performance and browser compatibility, ready to be hosted on any static web server.
Sources: README.md:21-27, package.json:17