Deploy React-App to Github

Ohh…So you build the React App, Congratulation!

What next?

Let's deploy this app to Github Pages.

But first why GitHub pages why not something else...

If you don't know about Github Pages, it is Github's hosting service which is free of cost. You can serve any static webpage directly from your repository with it. You can host a static website on GitHub pages for free, with deploys straight from Git, because GitHub pages support custom domains.

Let's start deploying

Prerequisites:

1. GitHub Account
2. Git Bash

Procedure:

1. Create an empty repository on GitHub

• By empty, mean without a README.md file, a .gitignore file, a LICENSE file, or any other files.

2. Open react-app in vscode and go to the src folder and open the terminal (ctr + `) or ( ctr + j ). By default, it will open windows default terminal. Change it to GitBash from the Dropmenu option.

3. Install the gh-pages package as a “dev-dependency” of the app :

4. Add some properties to the app’s package.json file :

a) “homepage”: “https://username.github.io/repository-name",

b) And in script object add the following :

5. Create a git repository in the app’s folder and push the changes to Github using the following commands:

i) $ git init

ii) $ git add .

iii) $ git commit -m “Initial commit”

6. After that, add the GitHub repository as a “remote” in your local git repository:

i) $ git remote add origin https://github.com/username/repository-name.git

it will make it so git knows where you want to push your source code

7. Generate a production build of your app, and deploy it to GitHub Pages

voila…..! your app deployed on Github.

8. Now go to github.com, select the repository where you deployed your react-app.

9. Open the setting tab and go to the Pages section.

here you will see hosted app link

Go to that link and you will see your app is online.

Thank you.