Deploy your React App to GitHub pages

Hi All!! Hope you all are doing good! So today I am going to tell you about how to deploy your React App to GitHub Pages. Actually, I started to learn to React with the Remote mentoring program organized by the 99x Uni relations team. They have started the program called Remote mentoring program for selected interns during the COVID19 period. They conducted a few sessions about React, Git & GitHub, and also about how to improve online Presence. This mentoring program helping us to use this time for improving our skills. So when I learn to React, I needed to host one of the apps. Then I heard about GitHub Pages and I used GitHub pages to deploy the App. So today, I am planning to show, how to deploy the React App to GitHub pages.

Deploy your React App to GitHub pages

Before all of this work, you should have GitHub Account, Install Git in your machine and Set up Git, Install Node.js, Install Npm.

What is the GitHub Pages?

GitHub Pages is a static site hosting service that takes HTML, CSS, and JavaScript files straight from a repository on GitHub, optionally runs the files through a build process, and publishes a website, and serves on a unique URL that ties to your username or organization name.

Example:-

https://yohanym95.github.io/gh-pages-react-app/

Now I will tell you how we use this feature for React application.

1. First You have to create your React Application.

npx create-react-app gh-pages-react-app

Now we created our React project.

2. Create a GitHub repository and initialize it and add it as a remote repository in your local git repository.

Initialize the Git repository.

git init

Add it as remote repository in your local git repository.

git remote add origin https://github.com/{user-name}/{repo-name}.git

Ex:-git remote add origin https://github.com/yohanym95/gh-pages-react-app.git

3. Commit and push your commit to GitHub.

git add .
git commit -m “Your commit message”
git push -u origin master

4. Then you have to add the GitHub pages (gh-pages) package to your React App.

npm install gh-pages — save-dev

5. Now You have to add properties to package.json file in the react app project folder.

First, you have to add homepage property.

Open your package.json file in the react project and then add homepage property. Then define its value as a string http://{username}.github.io/{repo-name}.

username is your GitHub username and repo-name is the name of your GitHub repository.

Example:-

“homepage”: “https://yohanym95.github.io/gh-pages-react-app/”

Then you have to add deploy script commands to the package.json file, In the existing scripts property, add a predeploy property and a deploy property.

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

The predeploy command helps bundle the react app whilst the deploy command fires up the bundled file.

Example :-

6. Now deploy it to GitHub pages.

Run the following command to deploy it.

npm run deploy

This command will create a branch named gh-pages and then you have to open the setting page and scroll down to the GitHub pages section and select the branch name as gh-pages. Now This branch will host your React application and it will take a couple of minutes to publish.

Also, the homepage property that you created in the package.json file will hold your link for a live preview, or also you can open the setting page and scroll down to GitHub pages, and then you can get the link.

You can find the example code in my GitHub repository here.

So That’s it for today and I think you learned something new from my article. I hope to meet you guys with another article!

Happy Coding & Good Luck All 👽!!!