How to Deploy React App

In this article, We will learn to deploy React app for free using Github pages and Vercel. These are very good place to deploy our web project quickly.

Goal: My main goal to provide you crisp content so that you donot need to waste your lot of time in reading many articles.

Prerequisites -

1. A Github Account
2. Node.js and npm install
3. Basic Knowledge of React and Git

Compulsory Step :- Push your code to your github Repository

• Create a Github Repository

• Run these Commands on your vs-code terminal under your react-app folder

git init
git add .
git commit -m "first commit"
git branch -M main        

Explanation-

1. git init - This line will initialize your git repository
2. git add . - This line will add all your changed files to staging area , you can look the changed files using git status command
3. git commit -m "any message" - This line will commit the changes
4. git branch -M main - This command will change your branch name from "master" to "main". This is not compuslary but standarization(i.e. recommended)

git remote add origin https://github.com/<username>/<rep Name>.git

Eg. git remote add origin https://github.com/sajal243/weather-app.git         

This command add a remote which will be used to push code to github

git push -u origin main        

This line will push your code to github. You can check it by refreshing your github repository page.

Upto here, you have learnt to push react code to github.

Eg.

Step : Deploy your github Repo using github pages

npm install gh-pages --save-dev        

Install github pages, run this command under your app folder.

"homepage": "https://<Username>.github.io/<Repository-name>"
Eg. - "homepage": "https://sajal243.github.io/my-todo-app"

"scripts":{
    "predeploy": "npm run build",
    "deploy": "gh-pages -d build" 
}          

Add these lines to package.json.

Note: Add homepage line to the start of package.json and predeploy and deploy under scripts.

git add .
git commit -m "commit"
git push
npm run deploy        

Run these line to update the changes and to deploy.

Last Step - Go to the pages under settings of your app repository

Step : Deploy your React App on vercel

Note: Make sure there is no line like that present in your package.json. This can be added if you deploy your project over github pages earlier --

"homepage": "https://<Username>.github.io/<Repository-name> "

npm install -g vercel
npm run build
vercel login
vercel --prod        

Run these lines under your react app folder in your vs-code terminal. Follow the process and select the options (Yes/No) as per your need as shown during while running these lines.

Explanation--

npm install -g vercel - This line will install vercel in your app.

npm run build - This line will create the production build for deployment of your react app

vercel login - This line will connect your vercel account with CLI. Login using your github account ( i.e. Recommended by me )

vercel --prod - This line will deploy your app to vercel using their pre-setup pipeline.

Hurray! You have learnt two methods of deployment for your React app.

STAY TUNED, FOR UPCOMING ARTICLES

HAPPY CODING!

HAPPY DEVELOPEMENT!

#FOLLOW ME FOR SUCH AMAZING CRISP CONTENT