Forem

Chris Achinga
Chris Achinga

Posted on • Originally published at chrisdevcode.hashnode.dev on

Deploying A React app on GitHub Pages

GitHub offers more than just a host for your code. In this short tutorial, I will walk you through deploying a static react app/project on GitHub Pages.

I will be using one of my React projects from GitHub:

https://github.com/ChrisAchinga/myRepos

A programmer's learning tool is by practicing --I said that...

Let's Get Started:

This tutorial assumes you already have your react project setup and ready to deploy

Step 1: Install the Dependencies (gh-pages):

I use npm for my projects, so while in your project root directory, open the project on your terminal or cmd (windows).

Install the gh-pages package as a dev-dependency of the app

npm install gh-pages --save-dev

Enter fullscreen mode Exit fullscreen mode

Step 2: Define Homepage in package.json

In the package.json file in your react app and add homepage property using the given syntax:

http://{username}.github.io/{repo-name}

Enter fullscreen mode Exit fullscreen mode

Where {username} is your GitHub username, and {repo-name} is the name of the GitHub repository. Below is an example for my project:

"homepage": "http://ChrisAchinga.github.io/myRepos",


{
  "name": "myrepos",
  "homepage": "http://ChrisAchinga.github.io/myRepos",
  "version": "0.1.0",
  "private": true,
}

Enter fullscreen mode Exit fullscreen mode

Step 3: Deploy script in package.json file

Now we can add the deploy script in the package.json file. In the existing scripts property, add a predeploy property and a deploy property, each having the values shown below:

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

Enter fullscreen mode Exit fullscreen mode

So your "scripts" should look like this:

{
  "scripts": {
    "start": "react-scripts start",
    "predeploy": "npm run build",
    "deploy": "gh-pages -d build",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
}

Enter fullscreen mode Exit fullscreen mode

Step 4: Deploy Your App

Update your GitHub repository using git commands:

npm run deploy

Enter fullscreen mode Exit fullscreen mode

Step 5: Commit and Push to GitHub

On your project terminal, run the deploy script

git add .
git commit -m "gh-pages deploy"
git push

Enter fullscreen mode Exit fullscreen mode

Kudos your React app is ready for view... on the URL:

https://{github-user-name}.github.io/{repo-name}/

Enter fullscreen mode Exit fullscreen mode

https://chrisachinga.github.io/myRepos/

Deployment Preview

Resources For GitHub Pages

Image of Timescale

🚀 pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applications—without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read more

Top comments (0)

Sentry image

See why 4M developers consider Sentry, “not bad.”

Fixing code doesn’t have to be the worst part of your day. Learn how Sentry can help.

Learn more

👋 Kindness is contagious

Immerse yourself in a wealth of knowledge with this piece, supported by the inclusive DEV Community—every developer, no matter where they are in their journey, is invited to contribute to our collective wisdom.

A simple “thank you” goes a long way—express your gratitude below in the comments!

Gathering insights enriches our journey on DEV and fortifies our community ties. Did you find this article valuable? Taking a moment to thank the author can have a significant impact.

Okay