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.
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.
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.
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.
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.