How to deploy React App? 5 ways to deploy react application online

Hello, fellow coders in this following blog. I’ll talk about five ways how to deploy react app online. In the following list, the first three are free hosting services, and the latter two services are paid.

Heroku

You should have these things installed in your system to deploy react app

• Node.js and npm
• Git :install Git
• Heroku CLI : install Heroku CLI

STEP 1:

Register on the Heroku website

STEP 2:

Go to your React App folder and open a new terminal

STEP 3:

Login to Heroku by writing

heroku loginCode language: Tcl (tcl)

on the terminal.

STEP 4:

Initialize git repository by command

git init Code language: Tcl (tcl)

STEP 5:

Set a git remote by Heroku

git:remote -a reactappnamCode language: Tcl (tcl)

STEP 5:

Commit the code and deploy it to Heroku using git by following commands:

git add .Code language: Tcl (tcl)

git commit -am "your message"Code language: Tcl (tcl)

git push heroku masterCode language: Tcl (tcl)

GitHub

You should have these things installed in your system to deploy react app

• Node.js and npm: install node.js
• Git :install Git
• GitHub: install GitHub

STEP 1:

Create a new repository on GitHub.

STEP 2:

Open the terminal in Vs Code and write

npm install gh-pages --save-devCode language: Tcl (tcl)

STEP 3:

Open the folder in which your react app is built and make some additions to the package.json file.

1. Insert the homepage option as shown in the image below.

2. Add 2 lines under scripts in the same file

STEP 4:

Open the folder in which your react app is present and initialize git by command

git initCode language: Tcl (tcl)

STEP 5:

Give the path of your repository by

git remote add origin repository pathCode language: Tcl (tcl)

STEP 6:

Now perform the Git steps to push the React App.

git add .Code language: Tcl (tcl)

git commit -m "message"Code language: Tcl (tcl)

git push -u origin masterCode language: Tcl (tcl)

CPanel

STEP 1:

Go to the package.json file of your react app and add the homepage option to it.

STEP 2:

Go to the terminal and run

npm run build Code language: Tcl (tcl)

to create a build folder.

STEP 3:

Convert the build folder to build.zip and upload it to the CPanel.

Extract the folder after uploading it to CPanel.

Open the extracted file and move all the files to public_html.

STEP 4:

Go to the address you provided in the package.json file in the homepage section, you can see the website deployed there.

Google Cloud Platform

This is the paid web hosting service by google.

We can deploy our React App by using the Google Cloud Platform.

This platform provides us :

• Google’s infrastructure
• Machine learning
• Data analytics by google
• Google’s top-level security to your website.

Plans & Pricing

The best thing about this platform is that “YOU ONLY PAY FOR WHAT YOU USE “

You get a $300 credit to get your tools on this platform.

You also get a pricing calculator in which you can calculate your expense.

Easy to use

Google provides documentation which is a user’s manual that makes this platform easy to use.

The documentation consists of

• Beginner’s guide
• Code samples
• Release notes which tell about the changes made in google cloud products.
• Best practices and tutorial makes this platform much more efficient.

Hostinger

Hostinger is also a paid web service platform with some amazing features like:

• Security
• Free Bonuses
• WordPress Options
• 30 Days Money Back Guarantee
• 24/7/365 Support
• 99,90% Uptime Guarantee

React App can be deployed by following the steps.

STEP 1:

Open your hostinger account and scroll down to the Files menu.

STEP 2:

Open the File manager options and go to the public_html folder.
Upload the folder in which your React App is present.
It may take a few minutes to fetch data from the uploaded folder.
Now, you can open the domain link in any browser and see your live website.

PLANS & PRICING

Hostinger provides cheap hosting plans with many features.
You can check their web hosting plans from the below link

View plans and pricing.

Conclusion

These were the five methods by which we can deploy a React App. It includes both free and paid services any of the above options are fine choices for deploying your React App. I hope this will help you in boosting your journey as a web developer.

———“Thank you and Happy hosting“