Create a simple CI workflow for Frontend projects using Github Action

Hey guys,

Continuous Integration (CI) is a process that helps us validate our code per commit. It ensures that our changes do not contain any defect/error code.

If there are any, it will give us some errors, so that we’d be able to jump in and fix it immediately, before it’s merged into main and goes to production.

Today, let’s us find out how to use GitHub Actions to create and run a simple workflow for our frontend projects. It can be anything: React, Vue, you name it.

Requirements

• Your projects must be on GitHub (of course)
• GitHub Account

Create a new workflow

In your code, create a folder .github/workflows

Next, create a workflow file. I will name it frontend.yml

name: Frontend CI

on:
  push:
    branches: ["main"]
  pull_request:
    branches: ["main"]

concurrency:
  group: ${{ github.workflow }}-${{ github.ref }}
  cancel-in-progress: true

jobs:
  lint-and-analyse:
    name: "Lint and Analyse"
    runs-on: ubuntu-latest

    steps:
      - name: Checkout repo
        uses: actions/checkout@v4

      - name: Setup Node 20
        uses: actions/setup-node@v3
        with:
          node-version: 20

      - name: Install node packages dependencies
        run: npm ci

      - name: Linting
        run: npm run lint

      - name: Compile Typescript Check
        run: npm run build

Explanation:

• The workflow will be triggered when:
  • There is a new PR created and points to the main as the target
  • Or, a push commit to the main branch
• The concurrency will ensure GitHub won’t dispatch multiple workflow runs (for example, if you push multiple commits in a short amount of time, it will run for every commit – with the concurrency configuration, it will only run for the latest commit)
• The job: simply checkout, setup node, install dependency, run the lint test, lastly run the build

In my npm run build, I have this

"scripts": {
  "build": "npm run tsc && vite build"
}

Because I’m using TypeScript, I want to ensure that my project does not have any TypeScript errors before building the final bundle.

Let’s test it

Once you prepared it, simply commit, push, open a new PR, and wait for the workflow to be triggered automatically from GitHub (it’s awesome, isn’t it?)

Conclusion

Well, with this simple GitHub CI workflow, I can now ensure that my project is buildable without any TypeScript errors, and if there are any, I will jump in and fix it immediately.

It will help us maintain a sustainable & maintainable codebase, fewer errors happier life, etc.

DummyTechDev hopes you will enjoy this!