Deploying React Apps to GitHub Pages: A Step-by-Step Guide

Deploying React Applications to GitHub Pages

GitHub Pages is a free service that allows you to host static websites directly from your GitHub repository. In this article, we will explore how to deploy React applications to GitHub Pages, including setting up a custom domain and automating the deployment process using GitHub Actions.

Prerequisites

• A GitHub account
• Familiarity with Git commands
• Node.js installed on your machine

What is GitHub Pages?

GitHub Pages is a service that enables you to add HTML, JavaScript, and CSS files to a repository and create a hosted static website. The website can be hosted on GitHub’s github.io domain or on a custom domain.

Deploying a React Application to GitHub Pages

To deploy a React application to GitHub Pages, follow these steps:

1. Set up your React application: Create a new React application using create-react-app or set up an existing project.
2. Create a GitHub repository: Create a new GitHub repository for your project.
3. Push your React app to your GitHub repository: Initialize Git in your project and push your code to your GitHub repository.

Setting up the React Application

Let’s create a new React application using create-react-app. Open your terminal and navigate to your preferred directory. Run the following command:

npx create-react-app my-react-app

This will create a new React application in a directory called my-react-app.

Creating a GitHub Repository

Create a new GitHub repository for your project. Click the “+” icon in the top right corner of your GitHub dashboard and follow the prompts to set up a new repository.

Pushing Your React App to Your GitHub Repository

Initialize Git in your project by running the following command:

git init

Add your files to the Git index by running the following command:

git add .

Commit your changes by running the following command:

git commit -m "Initial commit"

Link your local repository to your GitHub repository by running the following command:

git remote add origin https://github.com/your-username/your-repo-name.git

Push your changes to your GitHub repository by running the following command:

git push -u origin master

Configuring GitHub Pages

To configure GitHub Pages, you need to add a gh-pages package to your project. Run the following command:

npm install gh-pages --save-dev

Add a homepage property to your package.json file:

"homepage": "http://your-username.github.io/your-repo-name"

Add a predeploy script to your package.json file:

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

Deploying Your React Application

To deploy your React application, run the following command:

npm run deploy

This will create a production build of your React application and deploy it to GitHub Pages.

Adding a Custom Domain

To add a custom domain to your GitHub Pages site, follow these steps:

1. Purchase a domain name: Purchase a domain name from a domain registrar such as Namecheap or GoDaddy.
2. Connect your domain to GitHub Pages: Go to your GitHub repository settings and click on the “Pages” tab. Enter your custom domain name and click “Save”.
3. Update your DNS settings: Update your DNS settings to point to GitHub’s servers.

Automating Deployment with GitHub Actions

To automate the deployment process, you can use GitHub Actions. Create a new file in your repository called .github/workflows/deploy.yml. Add the following code:
“`
name: Deploy to GitHub Pages

on:
push:
branches:
– master

jobs:
deploy:
runs-on: ubuntu-latest
steps:
– name: Checkout code
uses: actions/checkout@v2

  - name: Install dependencies
    run: npm install

  - name: Build and deploy
    run: npm run deploy

“`
This will automate the deployment process whenever you push changes to your master branch.

Conclusion

In this article, we explored how to deploy React applications to GitHub Pages, including setting up a custom domain and automating the deployment process using GitHub Actions. GitHub Pages is a free service that allows you to host static websites directly from your GitHub repository. With GitHub Actions, you can automate the deployment process and make it easier to manage your website.