ReactJS - Building & Deployment

Let us learn how to do production build and deployment of React apppcation in this chapter.

Building

Once a React apppcation development is done, apppcation needs to be bundled and deployed to a production server. Let us learn the command available to build and deploy the apppcation in this chapter.

A single command is enough to create a production build of the apppcation.

npm run build
> expense-manager@0.1.0 build path	oexpense-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   buildstaticjs
untime-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.pnk/deployment

Once the apppcation is build, the apppcation is available under build/static folder.

By default, profipng option is disable and can be enabled through –profile command pne option. –profile will include profipng information in the code. The profipng information can be used along with React DevTools to analyse the apppcation.

npm run build -- --profile

Deployment

Once the apppcation is build, it can be deployed to any web server. Let us learn how to deploy a React apppcation 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 apppcation using serve, use the below command −

cd /go/to/app/root/folder 
serve -s build

By default, serve serve the apppcation using port 5000. The apppcation 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 apppcation’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 apppcation will be hosted in the root folder of a web apppcation. If the apppcation needs to be hosted in a subfolder, then use below configuration in the package.json and then build the apppcation.

{ ... "homepage": "http://domainname.com/path/to/subfolder", ... }