DEV Community

Hein Htoo
Hein Htoo

Posted on

Deploy React App to GitHub Pages using GitHub Actions

#react #githubactions #github

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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}",
Enter fullscreen mode Exit fullscreen mode 
{
  "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"
  }
}
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode
  • Allowing read and write permissions in settings -> Actions -> General. This is to allow write access to gh-pages Branch.

Allowing read and write permissions

  • 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 <support+actions@github.com>"
        env:
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
Enter fullscreen mode Exit fullscreen mode
  • After that commit the changes and push to GitHub and let the action run. 
git add .github
git commit -m "add workflow"
git push
Enter fullscreen mode Exit fullscreen mode
  • 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.

Change branch

Highlight

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

Another action

  • 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.

Top comments (0)

Read next

otrex profile image

Quickly build UI components with AI

Obisike Treasure -

amenibensaada profile image

A Beginner’s Guide to Building Dynamic User Interfaces with React

Ameni Ben Saada -

martygo profile image

🛑 Why You Need Stop Create Hooks in React?🪝🎣

Martins Gouveia -

nikhilesh_mauje_24 profile image

Master React.js by Focusing on the Vital 20% Concepts

Nikhilesh Mauje -