How to use GitHub Actions with multiple repositories and deploy to GitHub Pages?

Question

Is there a way to setup Github Actions to run multiple npm run builds? I wanted to use multiple repos and set them as different webpages on the main site.

Imagine I had 3 repos: Main, Angular App, and React App.

The Main repo would have my landing site. Angular App and React App would be two different sites.

From foobar.github.io (main repo), I would go to foobar.github.io/angular to navigate to my Angular App. foobar.github.io/react would be a react app.

Each application would be in 3 different repositories. Is there a way for me to push to my Angular App and GitHub Actions would automatically do an ng build --prod --base-href='angular', and update that page or even run a build for all repositories and deploy it?

To do this locally, I would have to do a build command on each repository, and then drag each prod folder into my repo, then push it up, which, in my opinion, can get very inefficient.

Prong

Answer 1

The easiest way to do this would be to add a workflow to each repository that updates the corresponding area in Pages. I.e. in the "Main" repo, it would look something like:

on: push

jobs:
  main:
    steps:
      - name: Checkout
        uses: actions/checkout@v2

      - name: Build
        run: TODO

      - name: Publish
        run: TODO 

And in the other repositories, you'd have something similar. For example in the Angular repository:

on: push

jobs:      
  angular:
    steps:
      - name: Checkout App
        uses: actions/checkout@v2

      - name: Build Angular
        run: |
          npm ci
          npm run build
          ng build --prod --base-href='angular'

      - name: Publish
        run: TODO

---

If you wanted to only publish when you update Main, you could have a workflow in your Main repository that builds and publishes all three, e.g.:

on: push

jobs:
  main:
    steps:
      - name: Checkout repo
        uses: actions/checkout@v2
        with:
          repository: my-org/main
          path: main

      - name: Build
        run: TODO
        working-directory: ./main

      - name: Publish
        run: TODO
        working-directory: ./main

  react:
    steps:
      - name: Checkout repo
        uses: actions/checkout@v2
        with:
          repository: my-org/react
          path: react

      - name: Build React
        run: TODO
        working-directory: ./react

      - name: Publish
        run: TODO
        working-directory: ./react

  angular:
    steps:
      - name: Checkout App
        uses: actions/checkout@v2
        with:
          repository: my-org/angular
          path: angular

      - name: Build Angular
        run: |
          npm ci
          npm run build
          ng build --prod --base-href='angular', 
        working-directory: ./angular

      - name: Publish
        run: TODO
        working-directory: ./angular

Cattleman

Don't think this would work for projects that have a separate repo for API and separate one for UI. How would I do this? – Baggage

Answer 2

You can use what GitHub calls ‘Reuseable Workflows’. You can read about it in their blogpost of February 2022. It is now generally available.

To start, set up a workflow in one ‘main’ repo, and refer to it in the workflow files across multiple repositories:

jobs:
  build:
  uses:
    my-organisation/my-awesome-main-repo/.github/workflows/myworkflow.yml@main

That’s basically it!

Chivers