How to deploy react app on github

In this tutorial, we'll introduce you to how you can deploy a react app on Github.

Check Git Status

The step below is important! If you skip it, your app will not deploy correctly. Open your git bash cmd and apply this cmd:

git status

Initialize git

git init

add all files

git add .

Commit your files

git commit -m 'any word'

create a new repository in github without readme and other files only repository name

put this cmd on your git bash cmd

git remote add origin https://github.com/deepbag/your-repository-name.git

push your react app on github

push -u origin main

Add homepage on your package.json in the to

The step below is important! If you skip it, your app will not deploy correctly. or for a GitHub user page:

"homepage": "https://gitusername.github.io/your-repository-name", 

example: https://deepbag.github.io/your-repository-name
Create React App uses the homepage field to determine the root URL in the built HTML file.

Install gh-pages and add deploy to scripts in package.json

Now, whenever you run npm run build, you will see a cheat sheet with instructions on how to deploy to GitHub Pages.
To publish it at https://myusername.github.io/my-app, run:

npm install --save gh-pages

Add the following scripts in your package.json:

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

The predeploy script will run automatically before deploy is run.

Deploy the site by running npm run deploy

npm run deploy

For a project page, ensure your project’s settings use gh-pages

Finally, make sure GitHub Pages option in your GitHub project settings is set to use the gh-pages branch:

Thank You!