How to Deploy Your React Application on GitHub Pages

Are you looking for a simple way to deploy your React application on GitHub Pages? In this tutorial, I’ll walk you through the steps to deploy your React application on GitHub Pages.

Step 1: Create a GitHub Repository

First, create a new repository on GitHub where you will store your React application. Once the repository is created, you can clone it to your local machine and begin working on your React application.

Step 2: Install gh-pages

To deploy your React application on GitHub Pages, you will need to install the gh-pages package. You can install this package using npm by running the following command:

npm install gh-pages --save-dev

This will install the gh-pages package and save it as a development dependency in your project.

Step 3: Set Up Your Package.json File

Next, you’ll need to update your package.json file to include the following two lines:

"homepage": "https://<username>.github.io/<repository-name>",//On starting of your package.json file
"scripts": {
  "predeploy": "npm run build",
  "deploy": "gh-pages -d build"
}

Make sure to replace <username> and <repository-name> with your GitHub username and the name of your repository, respectively.

The first line tells GitHub Pages where to find your deployed React application. The second line sets up the deployment process using the gh-pages package.

Step 4: Deploy Your Application

Now you’re ready to deploy your application! To do this, run the following command:

npm run deploy

This will create a new branch in your GitHub repository called gh-pages and deploy your React application there.

Step 5: Configure GitHub Pages

Finally, you need to configure GitHub Pages to use the gh-pages branch. To do this, navigate to the "Settings" tab of your repository on GitHub. Then, scroll down to the "GitHub Pages" section and select the gh-pages branch as the source.

Congratulations! Your React application is now deployed on GitHub Pages.

Note: If your application include “Routing” then before step 4 you have to do one more step otherwise you will get “404” error after deploying the application.

Additional Step:

Add basename= “Your repository-name” in Router/BrowserRouter tag.

<BrowserRouter basename="Your repository-name">

Then follow the above steps.

Conclusion:

Deploying your React application on GitHub Pages using gh-pages is a simple and straightforward process. By following the steps outlined in this tutorial, you can easily deploy your React application and share it with the world. Happy coding!