ReactJS | Building and Deployment

Hello folks! welcome back to a new section of our tutorial on ReactJS. In this section of our tutorial on ReactJS, we will be studying about ReactJS Building and Deployment.

Let's learn about how to perform production build and deployment of a React application in this tutorial.

Building

Soon as a React application development is done, application needs to be bundled and deployed to a production server. Let's learn the command available to build and deploy the application in this tutorial.

A single command is adequate to create a production build of the application.

npm run build
> expense-manager@0.1.0 build path\to\expense-manager
> react-scripts build

Creating an optimized production build...
Compiled with warnings.

File sizes after gzip:

   41.69 KB   build\static\js\2.a164da11.chunk.js
    2.24 KB   build\static\js\main.de70a883.chunk.js
    1.4  KB   build\static\js\3.d8a9fc85.chunk.js
    1.17 KB   build\static\js\runtime-main.560bee6e.js
  493     B   build\static\css\main.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 built, the application becomes available under build/static folder.

By default, profiling option is disabled & can be enabled via -profile command line option. -profile will include the profiling information in the code. The profiling information can be used along with React DevTools to analyse the application.

npm run build -- --profile

READ: ReactJS | CLI Commands

Deployment

As soon as the application is built, it can be deployed to any web server. Let's learn how to deploy a React application in this section of our tutorial.

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 @ https://localhost:5000.

Production Deployment

Production deployment can be executed by copying the files under build/static folder to the production's application root directory. It will work in all web server including Apache, IIS, Nginx, etc.

Relative Path

By default, the production build is created assuming the application will be hosted in the root folder of a web application. If the application is to be hosted in a subfolder, use below configuration in package.json and then build the application.

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

READ: ReactJS | Redux

Alright guys! This is where we are going to be rounding up for this tutorial. In our next tutorial, we will be looking at some ReactJS Examples.

Feel free to ask your questions where necessary and we will attend to them as soon as possible. If this tutorial was helpful to you, you can use the share button to share this tutorial.

Follow us on our various social media platforms to stay updated with our latest tutorials. You can also subscribe to our newsletter in order to get our tutorials delivered directly to your emails.

Thanks for reading and bye for now.