Github every new commit actions-workflow react js build

Question

I have a Github project in react js with a github-pages page.

Whenever I make changes to the project, before I push, I run the yarn build command to create the content for the github-pages and then I push.

What I would like to do is that every time a new commit is made in the project, the build is subsequently performed. Without me having to do it manually.

The reason is if I make a modification directly on the browser on the github project, I cannot build the project because I do not have the downloaded project with its npm modules.

I was wondering is it possible to do such a thing?

package.json

"build": "npm run watch:css && react-scripts build && cp -R ./copy-build/. ./build && rm -rf docs && mv build docs"

Answer 1

Solution:

# This is a basic workflow to help you get started with Actions

name: Build

# Controls when the workflow will run
on:
  # Triggers the workflow on push or pull request events but only for the main branch
  push:
    branches: [ main ]

  # Allows you to run this workflow manually from the Actions tab
  workflow_dispatch:

# A workflow run is made up of one or more jobs that can run sequentially or in parallel
jobs:
  # This workflow contains a single job called "build"
  build:
    # The type of runner that the job will run on
    runs-on: ubuntu-latest

    # Steps represent a sequence of tasks that will be executed as part of the job
    steps:
      # Checks-out your repository under $GITHUB_WORKSPACE, so your job can access it
      - uses: actions/checkout@v2
      
      - name: Install Yarn
        run: yarn
          
      - name: Build
        run: yarn build