How To Deploy React JS On Github

Introduction.

Setting up a React.js project is pretty exciting, but the real fun begins when it's time to share your creation with the world.

If you’re looking for a quick and efficient way to deploy your React app, GitHub Pages is a great option—free, easy to use, and you can showcase your project in no time.

In this guide, I’m going to walk you through deploying a React app on GitHub Pages step by step.

How Do I Deploy React JS On Github?

Step-by-Step Guide to Deploy React.js on GitHub

1. Create a GitHub Repository.

Before you can deploy your React app, you’ll need a GitHub repository to hold the project files.

If you haven’t already done so, head over to GitHub and create a new repository:

• Sign in to GitHub.
• Click the New repository button.
• Give your repo a name and make it public (GitHub Pages doesn’t work with private repos for free users).
• Skip the README for now—you’ll add it later.
• Once the repository is created, it’s time to move on to the actual deployment steps.

2. Install gh-pages.

To deploy a React app on GitHub Pages, you’ll need the gh-pages package. This package helps deploy static files to GitHub Pages without the hassle of manual file manipulation.

Here’s how to install it:

npm install gh-pages --save-dev

This will add the gh-pages dependency to your project.

3. Update package.json.

Now that you’ve installed gh-pages, it's time to configure your package.json file. Open it and make a few changes:

Add a homepage property: This tells React where your app will be hosted.

"homepage": "https://<your-username>.github.io/<your-repository-name>"

Add predeploy and deploy scripts: Under the scripts section, add these two commands.

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

The predeploy script builds the app before deploying, while the deploy script pushes the build folder to the gh-pages branch of your repository.

4. Build and Deploy the App.

Now, it's time to deploy the app:

Build the app: Run the build command to optimize your React app for production.

npm run build

Deploy to GitHub Pages: Once the build is successful, run the following command to deploy:

npm run deploy

This will create a new gh-pages branch in your repository and push the static files to it.

5. Enable GitHub Pages.

Once the deployment process is complete, go to your GitHub repository:

• Open Settings in the repository.
• Scroll down to the GitHub Pages section.
• Under Source, select the gh-pages branch as the source.

After a few moments, you’ll receive a link where your app is live. It usually takes just a couple of minutes for the changes to take effect.

Pros and Cons of Deploying React on GitHub Pages

Pros.

• Free Hosting: GitHub Pages is completely free for public repositories, so you don’t have to worry about hosting fees.
• Easy Setup: Once you’re familiar with the steps, deploying your React app on GitHub Pages is fast and straightforward.
• Continuous Deployment: If you make updates to your React app, deploying the changes is just a matter of pushing new code and running the deploy script again.

Cons.

• Single-Page Applications (SPA) Issues: GitHub Pages doesn’t handle route-based navigation in SPAs well. If you’re using React Router for navigation, you might run into issues with refreshing on different routes, although this can be mitigated using custom configurations like a _redirects file.
• Limited for Private Repos: Unless you're paying for GitHub, GitHub Pages won’t work with private repositories.
• Static Sites Only: GitHub Pages is only for static files, so any backend logic or server-side code would require a different hosting solution.

Conclusion.

Deploying a React.js app on GitHub Pages is an excellent choice if you’re looking for free, simple, and effective hosting.

From setting up the repository to configuring the deployment scripts, the process is pretty straightforward and can be completed in just a few minutes.

However, it's worth considering whether this option suits your app’s needs, especially if you're building more complex projects.

Now that you’ve seen how easy it is to deploy your React app on GitHub Pages, what kind of project are you excited to share with the world?