Deploy React App to GitHub Pages using GitHub Actions

Deploy your React app seamlessly to GitHub Pages using GitHub Actions. With this setup, every push to your repository's main branch triggers an automated workflow that builds your app and publishes it to GitHub Pages. This ensures your latest updates are always live, without manual intervention. By leveraging gh-pages and a simple YAML configuration, you can maintain a smooth and efficient deployment pipeline directly from your GitHub repository.

Creating an app

Create react app if you don't have one by typing this command.

npx create-react-app my-app --template typescript
cd myapp

Add gh-pages library

gh-pages library is a simple tool for publishing files to a gh-pages branch on GitHub, which GitHub Pages uses to serve static websites.

npm install gh-pages --save-dev

Add home page in package.json

Specifying homepage tells React where the app will be hosted. It helps in generating the correct URLs for assets in the built files, ensuring everything works correctly when the app is deployed to GitHub Pages.

"homepage": "https://{github_username}.github.io/{repo_name}",

{
  "name": "myapp,
  "version": "0.1.0",
  "private": true,
  "homepage": "https://{github_username}.github.io/{repo_name}",
  "dependencies": {
    "@testing-library/jest-dom": "^5.17.0",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "@types/jest": "^27.5.2",
    "@types/node": "^16.18.101",
    "@types/react": "^18.3.3",
    "@types/react-dom": "^18.3.0",
    "react": "^18.3.1",
    "react-dom": "^18.3.1",
    "react-scripts": "5.0.1",
    "typescript": "^4.9.5",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "deploy": "gh-pages -d build"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "gh-pages": "^6.1.1",
    "tailwindcss": "^3.4.4"
  }
}

Deploying to GitHub Pages

Changing GitHub Repository Settings

• Create public repository in order to deploy to GitHub Pages.
• Push your code to the GitHub.

git add -A
git commit -m "init proj"
git remote add origin https://github.com/USERNAME/REPOSITORY_NAME.git
git push -u origin master

• Allowing read and write permissions in settings -> Actions -> General. This is to allow write access to gh-pages Branch.

• Create workflow yml file under .github/workflows/action.yml

# This workflow will do a clean installation of node dependencies, cache/restore them, build the source code and run tests across different versions of node
# For more information see: https://docs.github.com/en/actions/automating-builds-and-tests/building-and-testing-nodejs

name: Deploy App to GitHub Pages

on:
  push:
    branches: ["main"]
  pull_request:
    branches: ["main"]

jobs:
  build:
    runs-on: ubuntu-latest

    strategy:
      matrix:
        node-version: [20.x]
        # See supported Node.js release schedule at https://nodejs.org/en/about/releases/

    steps:
      - uses: actions/checkout@v4
      - name: Use Node.js ${{ matrix.node-version }}
        uses: actions/setup-node@v3
        with:
          node-version: ${{ matrix.node-version }}
          cache: "npm"
      - run: npm ci
      - run: npm run build --if-present
      - run: npm test
      - name: Deploy with gh-pages
        run: |
          git remote set-url origin https://git:${GITHUB_TOKEN}@github.com/${GITHUB_REPOSITORY}.git
          npx gh-pages -d build -u "github-actions-bot <[e-mail]>"
        env:
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

• After that commit the changes and push to GitHub and let the action run.

git add .github
git commit -m "add workflow"
git push

• You can see the actions running in Actions tab in GitHub.
• After that push, go to settings -> pages Change Branch to gh-pages & /root and save.

• This will create another action -> pages-build-deployment.

• Once completed, https://{github_username}.github.io/{repo_name} can be accessed.

By leveraging GitHub Actions and gh-pages, you can maintain a robust and automated pipeline for deploying your React applications.