How to publish React App (CRA) on Github Pages using Github Actions with Turborepo

Create a .yml file inside of the .github/workflows/
give any semantic name, like publish-app.yml:

name: Deploy to GitHub Pages

on:
  push:
    branches:
      - main

jobs:
  build-and-deploy:
    runs-on: ubuntu-latest
    steps:    
      - name: Check out code
        uses: actions/checkout@v3
        with:
          fetch-depth: 2

      - uses: pnpm/action-setup@v2.0.1
        with:
          version: 6.32.2

      - name: Setup Node.js environment
        uses: actions/setup-node@v3
        with:
          node-version: 16
          cache: 'pnpm'

      - name: Install dependencies
        run: pnpm install

      - name: Build
        run: pnpm build

      - name: Deploy
        uses: JamesIves/github-pages-deploy-action@4.1.0
        with:
          branch: gh-pages
          folder: apps/web/build

Steps:

Every push on branch main, will run the job on ubuntu virtual machine, install the pnpm as node package manager, and setup the node.js with the version 16.

Then will install the dependencies of the project, do the build.

Finally, will do the deploy on github pages using the scripts from JamesIves/github-pages-deploy-action, and create a branch gh-pages with the code from apps/web/build.

So, you need to go to the GitHub repository settings page:

https://github.com/<username|org>/<repository>/settings/pages

And do this settings:

Source: Deploy from a branch
Branch: gh-pages

Done, your site is live at https://username|org.github.io/your-repository

🚀

Blog

How to publish React App (CRA) on Github Pages using Github Actions with Turborepo

Thiago Marinho

Join Our Newsletter. No Spam, Only the good stuff.

Related