Vue js with GitHub Actions: A Comprehensive Tutorial

Quick Summary

Table of Contents

Introduction

GitHub is the playground for developers where they share their skills. However, automating deployment processes is essential; hence, GitHub Actions come into the picture. This tutorial will guide you through deploying your Vue.js application using GitHub Pages with the help of GitHub Actions. Also, follow each step carefully to streamline your deployment workflow. Let’s delve into the tutorial guide of Vue js with GitHub actions for a successful project.

What is GitHub Actions?

GitHub is a prominent cloud-based repository with over 100 million active users. To streamline the development project, GitHub introduced “GitHub Actions” in 2018 to automate and ease development workflow.

GitHub actions are the automated process allowing you to host, test, and deploy software. It is a crucial component of GitHub, which eases the development process with push and automation tasks. In simple terms, GitHub actions navigate the instructions you generate in your Git repository to automate the development process or an API for cause and effect.

Moreover, GitHub actions allow you to automate workflow based on specific events, such as push, creation actions, new releases, issues, etc. As a result, you can reuse, share, or modify your software development.

There are a few components of GitHub actions that you must know before starting your development workflow process.

• Event: It is an activity where the workflow is triggered, and the automated pipeline is rolling to pull or push requests.
• Workflow: Any event can trigger a workflow, which indicates that automated processes are used when the application is ready for release.
• Runner: It is the server that functions the workflow when they are triggered. Also, every runner can be run simultaneously, and each workflow executes a fresh virtual machine.
• Action: A custom application performs complex but often repetitive tasks. It is implemented to decrease repetitive work and set up the environment.
• Jobs: Set of steps that function in a defined order and depend on each other for sharing data. If it is not dependent on others, it will start another job to package up the builds as a default.

Other crucial elements of GitHub actions that you should know:

• GitHub Pages: A static hosting server that allows you to host websites from GitHub repositories and make them publicly available. You can also use GitHub pages to display open-source projects and share codes.
• YAML Syntax: Yet Another Markup (YAML) is a human data serialization language. It defines the workflow in GitHub actions, and each workflow is stored as a separate YAML syntax file in your code repository. For instance, the directory name could be .github/workflows.

Steps to Automate Vue js Deployment Process on GitHub Action

Following are the steps to automate the development process using GitHub actions for your Vue js application. You can also execute it on GitHub pages with GitHub actions.

➔ Initial Set Up

• Vue.js Project Creation

We will create a project based on your specific environment for the Vue js GitHub actions workflow. Additionally, you can customize and generate creations as per your choice. Here, we have taken the following code:

vue create vueguthubdemo

• Github Repo Creation:

1. Create a new GitHub repository, e.g., sample-project.
2. Push all your codes into this repository.

➔ GitHub Actions Workflow

Before deploying the GitHub actions Vue js project, the following are the things to consider streamlining your application.

1. Create a .github Folder:

• Within your Vue.js project, create a .github folder.

2. Workflow Folder:

• Inside .github, create a workflows folder.

3. Deploy configuration file:

• Create a deploy.yml file in workflows and populate it with the necessary GitHub Actions configuration.

➔ Workflow Configuration

Earlier, we created deploy.yml file. Next, we must add configuration to automate our project’s deployment process using the code below.

name: Deploy to Github Pages  # Defines the name of the GitHub Actions workflow.

on:
    push:
        branches:
            - develop  # Triggers the workflow on each push to the 'develop' branch.

jobs:
    build:
      name: Build  # Defines the name of the build job.
      runs-on: ubuntu-latest  # Specifies the operating system for the job.

      steps:
        - name: Checkout Repo  # Checks out the repository.
          uses: actions/checkout@v4

        - name: Create Node Environment  # Sets up Node.js environment.
          uses: actions/setup-node@v4
          with: 
            node-version: 16.x

        - name: Install Packages and Build Application  # Installs npm packages and builds the Vue.js application.
          run: |
            npm ci
            npm run build

        - name: Setup Pages  # Configures pages for deployment.
          id: pages
          uses: actions/configure-pages@v3

        - name: Build with Jekyll  # Builds the application with Jekyll.
          uses: actions/jekyll-build-pages@v1
          with:
            source: ./dist/
            destination: ./_site

        - name: Upload artifact  # Uploads the build artifact.
          uses: actions/upload-pages-artifact@v2
      
    deploy:
      name: Deploy Application  # Defines the name of the deployment job.

      # Add a dependency to the build job
      needs: build  # Specifies that the deployment job depends on the successful completion of the build job.

      # Grant GITHUB_TOKEN the permissions required to make a Pages deployment
      permissions:
        pages: write      # Grants write permission to deploy to Pages.
        id-token: write   # Grants write permission to verify the deployment source.

      environment:
        name: github-pages  # Specifies the environment for deployment.
        url: ${{ steps.deployment.outputs.page_url }}  # Retrieves the deployment URL from the previous deployment step.

      runs-on: ubuntu-latest  # Specifies the operating system for the deployment job.
      steps:
        - name: Deploy to GitHub Pages  # Deploys the application to GitHub Pages.
          id: deployment
          uses: actions/deploy-pages@v2  # Specifies the version of the deployment action.

Moreover, let’s break down the key elements of the workflow to simplify the process:

1. Trigger:

• The workflow triggers pushes to the develop branch.

2. Build Job:

• Check out the repository.
• Set up a Node.js environment.
• Installs packages and builds the Vue.js application
• Configures pages and builds with Jekyll
• Uploads the artifact

3. Deploy Job:

• Depends on the success of the build job
• Deploy the application to GitHub Pages

➔ Changes in the Config file

It is essential because workflow often requires specific configurations based on particular actions and environments. To modify your Vue.config.js file, include the following code:

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  publicPath: '/sample-project/'  //you have to add your repo name here 
})

You can also get more details on the deployment link in the repository.

How to Deploy Vue js with GitHub Actions? A Step-by-Step Guide

We must perform the following steps to set up GitHub action and GitHub pages to perform our deployment process. Let’s find out how to test GitHub actions:

1. Commit and push the changes to the development branch.

2. Go to your GitHub repository’s settings.

3. In the repository settings, navigate to the “Actions” tab. Under “General,” access “Workflow permission,” and select “Read and Write” permissions to enable the workflow to execute on branch pushes.

• Repo setting -> Actions -> General -> Workflow permission -> Read and write permissions

4. Under the repository settings, navigate to the “Pages” tab. Opt to deploy from the develop branch in the “Build and Deployment” section.

• Repo setting -> Pages -> Build and Deployment -> Deploy from Action

After performing these steps, you can auto-deploy your project after each push. You can find an entire tutorial on GitHub Respiratory for more details.

Conclusion