In this post, we will explore how to configure a CI/CD workflow using GitHub Actions for a Vue.js project, ensuring deployment to GitHub Pages only happens when unit tests pass successfully.

This is especially useful for maintaining code quality and automating repetitive tasks such as running tests, building the project, and deploying.

Why use CI/CD?

Integrating CI/CD allows you to automate code quality checks, ensure only functional code is deployed, and reduce manual errors by automating the deployment process.

Workflow configuration

The GitHub Actions workflow configuration file looks like this:

name: CI/CD Pipeline for Vue.js

on:
  push:
    branches:
      - main

jobs:
  build-and-deploy:
    runs-on: ubuntu-latest

    steps:
    - name: Checkout code
      uses: actions/checkout@v3

    - name: Setup Node.js
      uses: actions/setup-node@v3
      with:
        node-version: 16

    - name: Install dependencies
      run: npm install

    - name: Run unit tests
      run: npm run test:unit

    - name: Build Vue.js project
      run: npm run build

    - name: Deploy to GitHub Pages
      if: ${{ success() }}
      uses: peaceiris/actions-gh-pages@v3
      with:
        github_token: ${{ secrets.GITHUB_TOKEN }}
        publish_dir: ./dist

How does it work?

When a push is made to the main branch, GitHub Actions starts the process in multiple stages. First, it installs the required dependencies with npm install.

Then, it runs the project's unit tests using npm run test:unit.

If the tests pass successfully, it builds the project with npm run build, generating production files in the dist folder.

If everything goes well, the project is automatically deployed to GitHub Pages.

Permissions setup

It is important to make sure GitHub Actions has the required permissions to perform deployment. To do this:

1. Go to your repository settings on GitHub.
2. Open Settings > Actions > General.
3. Under Workflow permissions, select Read and Write permissions and save changes.

Practical example

Suppose we have a Counter.vue component:

<!-- components/Counter.vue -->

<script setup lang="ts">
    import { ref } from "vue";

    const count = ref(0);

    function increment() {
        count.value ++;
    };
</script>

<template>
    <div>
        <button @click="increment">Increment</button>
        <p>{{ count }}</p>
    </div>
</template>

To test this component, we can create a unit test using @vue/test-utils:

// __test__/components/Counter.test.ts

import { mount } from '@vue/test-utils';
import Counter from '@/components/Counter.vue';

describe('Counter.vue', () => {
    it('increments the count when button is clicked', async () => {
        const wrapper = mount(Counter);
        expect(wrapper.text()).toContain('0');
        await wrapper.find('button').trigger('click');
        expect(wrapper.text()).toContain('1');
    });
});

This test file will run during the CI process, and if any test fails, the workflow will stop before deployment.

This guarantees that only code passing all tests gets deployed.

Benefits

Using GitHub Actions for CI/CD and GitHub Pages offers many benefits. Most importantly, it automates verification and deployment so the process is always controlled and requires no manual intervention.

This improves project quality and helps detect errors quickly. In addition, because the workflow is automated, manual steps are not needed, which saves time and reduces the risk of mistakes.