Vue js with GitHub Actions: A Comprehensive Tutorial

1. What is GitHub Actions?

2. Steps to Automate Vue js Deployment Process on GitHub Action

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

4. Conclusion

What is GitHub Actions?

• 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.

• 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

Initial Set Up

• Vue.js Project Creation

vue create vueguthubdemo

• Github Repo Creation:

GitHub Actions Workflow

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

• Inside .github, create a workflows folder.

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

Workflow Configuration

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.

• The workflow triggers pushes to the develop branch.

• Set up a Node.js environment.

• Check out the repository.

• Installs packages and builds the Vue.js application

• Configures pages and builds with Jekyll

• Uploads the artifact

• Depends on the success of the build job

• Deploy the application to GitHub Pages

Changes in the Config file

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

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

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

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

Conclusion