How to Deploy React App on gh-pages: Beginner's Guide

Hello Devs👋

So, you've created an amazing React web application, and now you want to share it with others? One of the simplest way to do this is by deploying it on GitHub Pages. In this article, I'll show you how you can deploy your react app to GitHub Pages step-by-step. We'll start from scratch and cover all the necessary details to host your react app successfully.

Prerequisites

1. GitHub account
2. Basic knowledge of GitHub and Git commands. You can refer my Getting Started with Git and GitHub: A Beginner's Guide article.

GitHub Pages

GitHub Pages is a feature provided by GitHub that allows you to host static websites directly from your GitHub repositories.

Step 1: Create a GitHub Repository

1. Visit your GitHub profile.
2. Click on the '+' icon in the top right corner to create a new repository.
3. Give your repository a name of your choice.
4. Click "Create repository."

Step 2: Upload Your Project Files

If you want to upload all your project's source code to GitHub follow this step, If you do not want you can go to the next step. So this is an optional step.

You can push your code files to GitHub Repo in 2 ways:

Option 1: Using GitHub Website

• Click on the "Add file" button and choose "Upload files."
• Add all your project files, including HTML, CSS, JavaScript, etc.

Option 2: Using GitHub Desktop / CLI

• Download and install GitHub Desktop if you haven't already.
• Clone your repository to your local machine using the command:

git clone repository_url

• Copy your project files into the cloned repository folder.
• Commit the changes using GitHub Desktop and push them to GitHub.

If you are not familiar with git commands you can refer Getting Started with Git and GitHub: A Beginner's Guide

Step 3: Create a gh-pages Branch

Every repo has a default branch called "master" or "main", If you are following step 2 all your code files will be pushed to this branch.

For deployment purpose we need to create a another branch called gh-pages. GitHub Pages uses this special branch to deploy your app.

Now, Let's create this branch. This also can be done in 2 ways:

Option 1: Using GitHub Website

• Navigate to the "Branch" dropdown on your repository page.
• Type gh-pages into the new branch box and click "Create branch: gh-pages from master."

Option 2: Using GitHub Desktop / CLI
Navigate to cloned repo directory on your local machine and Run the git command:

git checkout -b gh-pages

Step 4: Modify package.json

• Open package.json file in text editor.
• Add a "homepage" property with the link to your GitHub Pages in this format:

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

• Add a "scripts" property with a "predeploy" and "deploy" script:

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

It will look like this:
Here username is 'Kiran1689' and Repo name is 'cards'

Step 5: Upload Build Files

Make sure that your React app is working correctly on localhost. If everything is okay, run the build command to generate necessary files and then deploy and upload these build files to the gh-pages branch:

npm run build
npm run deploy

Step 6: Enable GitHub Pages

1. In your web browser, navigate to the GitHub repository
2. Above the code browser, click on the tab labeled "Settings"
3. In the sidebar, in the "Code and automation" section, click on "Pages"
4. Configure the "Build and deployment" settings as shown below:
5. Source: Deploy from a branch
6. Branch: i) Branch: gh-pages ii) Folder: / (root)
7. Click on the "Save" button

Congratulations! 🎉 You have successfully deployed Your application and the application is live on the internet. Now you can share the provided link with anyone you want to visit your react app.

Thanks for Reading❤

Kiran1689 (Kiran Naragund) · GitHub

Full-Stack Developer 👨‍💻 • Mentor @Exercism 👨‍🏫 • Open-Source Contributor 😎 • Tech Writer & Moderator @forem ✍ • Developer Advocate - Kiran1689

github.com