Deploy React App on GitHub Pages

There are lots of ways to host websites over the internet, and GitHub-Pages is one of them. In this blog, I will teach you how you can host your application on GitHub. In the end, you will get an idea that what is GitHub pages and how to host websites on it.

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. GitHub Pages is a hosting service provided by GitHub, it allows you to host static websites which contain pure HTML, CSS and JavaScript. GitHub is nothing but a code hosting platform for collaboration and version control. A repository is like a container or a folder which contains all your code files and version history.

What are the prerequisites?

To host a react-application you need a GitHub account and a React Project. And the second one is Patience, yes you read it right PATIENCE is the key which plays an important role in a programmer's life.

1. GitHub Account

2. React Project

Now, Let's get started!

First thing first you have to create a public GitHub repository because your website is going to be publically live.

Step 1: Create a public repository.

Make sure that the repository name should be unique.

In the next step, you have to make certain changes in your react application.

Step 2: Update package.json

The package.json file contains all the information regarding the dependencies and all the needy scripts and information of react app.

In the package.json file, write the complete homepage URL where your side going to live.

"homepage": " https://<github username>.github.io/<project repo name>"

Then make private equals to false. This is the second change you have to make.

"private": false

Make sure you haven't overridden it.

Then add predeploy and deploy in the scripts section.

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

Now one most important thing is if your app consists of routing then you should also have to make changes in the App.js file. Instead of BrowserRouter use HashRouter.

BrowserRouter: This router uses the HTML5 History API to manage the URL and navigation history. It allows you to have clean and nice-looking URLs without the hash symbol (#) in them. For example, https://example.com/about. It is the preferred option when you have full control over the server configuration. But we hosting react-app on GitHub pages where we won't have full control of the server.

HashRouter: It uses the URL hash (the part after the # symbol) to manage routing. For example, https://example.com/#/about. It is useful in scenarios where the server hosting the app might not be configured to handle client-side routing properly.

Don't worry, if you haven't understood a single word about browser-router and hash-router, we are not here to deep dive into the routing, we just want to make our website live.

The thing is you have to change the word BrowserRouter to HashRouter in your App.js that's it.

Step 3: Using git push the code to the repository.

Git is a command line interface (CLI). Below are the step-by-step instructions to push your code to a repository -

1-Initialize Git

git init

2-Add files to the staging area

git add .

3-Commit the changes

git commit -m "Initial Commit"

4-Add GitHub repository

git remote add origin <remote_repository_url>

5-Push code to the repository

git push -u origin main

Now go to your GitHub repository and refresh the page you will see all your code files and folders in the repository.

Step 4: Install gh-pages package

Open your terminal or command prompt in your React app's project directory and run the following command to install gh-pages as a development dependency

npm install gh-pages --save-dev

The gh-pages package is a convenient way to deploy your React app to GitHub Pages, a branch of your repository, allowing others to access and view your app online.

Step 5: Deploy to GitHub Pages

Now we are all set, we are just one step away from making our website live.

Run the following command in the terminal.

npm run deploy

This will first create a build in project directory which contain all the important files then deploy it to GitHub. And Done.

Congratulations!

You have successfully hosted your React app on GitHub Pages! Now, your app is live and ready to be explored by the world.

To see your app in action, simply visit the URL you specified in the homepage property of your package.json file. Your app will be accessible online, allowing others to experience your hard work and creativity firsthand.

By deploying your app to GitHub Pages, you have taken a significant step in showcasing your skills as a developer. It's a testament to your dedication and passion for building meaningful projects.

Keep in mind that this is just the beginning of your journey. Continue to learn, experiment, and refine your projects. Share your knowledge with the community and collaborate with other developers. The possibilities are endless, and your potential as a developer knows no bounds.

Happy Coding!