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

🚀

Comments

[Rômulo Rodrigues]

Thanks in advance bro, great article!!

If this uses the builded package I imagine this does deploy a static version only?
If that's the case, I can't see why using Vite (and esbuild instead of CRA's webpack) instead of CRA wouldn't work, would you give it a shot and let us know ?
Specially because CRA is being deprecated (even vercel took it off Next's docs recently).

[Thiago Marinho]

Thank you Rômulo ;)

You're right!

I just created a project using: github.com/vercel/turbo/tree/main/...

my focus was in the library that I was creating, and I just created a demo page to show how the lib works. It's not public yet. But this is the main reason.

Nowdays, I prefer Next.js, vite, tsup or rollup for bundling. ;)

Good point ;)