How to add a simple GitHub Actions to a JavaScript project

May 27, 2022

GitHub will run your action that located in a .github/workflows directory relative to the project root.

Create the directory

$ mkdir .github
$ mkdir .github/workflows

Then create the workflow file, this can be anything but should be in a yml or yaml format

$ touch .github/workflows/main.yml
# .github/workflows/main.yml
name: Continous Integration

      - ''

    name: Code analysis, test and build
    # Replace the action runner with any os that github support
    runs-on: ubuntu-latest

      - uses: actions/checkout@v3
      - uses: actions/setup-node@v2
          node-version: 16.13

      - name: Restore cache ๐Ÿ”
        uses: actions/cache@v2
        id: cache-deps
          path: |
          key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
          restore-keys: |
            ${{ runner.os }}-yarn-

      - name: Install dependencies โฌ‡๏ธ
        if: steps.cache-deps.outputs.cache-hit != 'true'
        run: yarn install --frozen-lockfile

      - name: Code analysis โŒš๏ธ
        run: |
          yarn fmt:check
          yarn lint

        # This is optional
        # Can be omitted if there's no test for the project
      - name: Test ๐Ÿงช
        run: yarn test --ci

      - name: Build ๐Ÿ‘ทโ€โ™€๏ธ
        run: yarn build


To use this action with TypeScript, just add 1 more commands to run on Code analysis step

  - name: Code analysis โŒš๏ธ
    run: |
+     yarn ts:check
      yarn fmt:check
      yarn lint

The above additional run script assuming the ts:check script will runs type checking, e.g. tsc --noEmit.

But it's optional if the build script doesn't already cover the type checking step. For Next.js project, the type checking step is already covered in the build step as described here.