”;
Let us learn how to do production build and deployment of React application in this chapter.
Building
Once a React application development is done, application needs to be bundled and deployed to a production server. Let us learn the command available to build and deploy the application in this chapter.
A single command is enough to create a production build of the application.
npm run build > [email protected] build pathtoexpense-manager > react-scripts build Creating an optimized production build... Compiled with warnings. File sizes after gzip: 41.69 KB buildstaticjs2.a164da11.chunk.js 2.24 KB buildstaticjsmain.de70a883.chunk.js 1.4 KB buildstaticjs3.d8a9fc85.chunk.js 1.17 KB buildstaticjsruntime-main.560bee6e.js 493 B buildstaticcssmain.e75e7bbe.chunk.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: npm install -g serve serve -s build Find out more about deployment here: https://cra.link/deployment
Once the application is build, the application is available under build/static folder.
By default, profiling option is disable and can be enabled through -profile command line option. -profile will include profiling information in the code. The profiling information can be used along with React DevTools to analyse the application.
npm run build -- --profile
Deployment
Once the application is build, it can be deployed to any web server. Let us learn how to deploy a React application in this chapter.
Local deployment
Local deployment can be done using serve package. Let us first install serve package using below command −
npm install -g server
To start the application using serve, use the below command −
cd /go/to/app/root/folder serve -s build
By default, serve serve the application using port 5000. The application can be viewed @ http://localhost:5000.
Production deployment
Production deployment can be easily done by copying the files under build/static folder to the production application”s root directory. It will work in all web server including Apache, IIS, Nginx, etc.
Relative path
By default, the production build is created assuming that the application will be hosted in the root folder of a web application. If the application needs to be hosted in a subfolder, then use below configuration in the package.json and then build the application.
{ ... "homepage": "http://domainname.com/path/to/subfolder", ... }
”;