Last Updated on February 28, 2024
Quick Summary
The tutorial covers implementing Vue js with GitHub actions. We will guide you in automating the deployment of your Vue.js application on GitHub Pages using GitHub Actions. Moreover, obtained valuable insights on configuring workflows, integrating version control with Git, and making necessary Vue.js adjustments.
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
Hire Vue Js developer to ease your development workflow and create a secure application using GitHub action.
âž” 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.
Note: Only the following step is necessary if you intend to deploy on branch push using the defined workflow.
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
With the following steps, you can successfully navigate the intricacies of automating the deployment of your Vue.js application on GitHub Pages using GitHub Actions. With the correct method, you can streamline development workflow and ease the developer’s task to hamper manual and repetitive tasks in your Vue js with GitHub Actions.
Moreover, you will gain valuable insights into GitHub Pages, GitHub Actions, and Vue.js configurations. Now equipped with an automated deployment GitHub pipeline, you can easily showcase your Vue.js projects, fostering efficiency and agility in your development endeavors. However, if you are looking for a specialist who can streamline your project, get in touch with Vue.Js development company.
Frequently Asked Questions (FAQs)
There are two methods to deploy your Vue js project into GitHub:
- Static site hosting: Develop your Vue app by running NPM run build, pushing the generated files, using GitHub pages to implement site hosting, and lastly, integrating it with GitHub.
- CI/CD using GitHub actions: Define workflow in .yml file to test, automate, and deploy your application.
Following are the advantages of using GitHub in your Vue js application-
- It automates your development process and decreases manual, repetitive tasks
- Enhance continuous integration and continuous deployment for better quality code and live changes in the code
- It helps to manage complex projects with ease
- You can ensure consistent development across various environments
Yes, you can utilize the following tools for Vue js in GitHub actions and GitHub pages:
- @vue/cli-plugin-github-deploy: A plugin for the Vue CLI that simplifies deploying your app to GitHub Pages.
- Vercel-action: Deploy your app to the Vercel platform on GitHub Actions.
- Netlify-action: Get your app to the Netlify platform using GitHub Actions.
- Firebase-deploy: Deploy your app to the Firebase platform using GitHub Actions.
Yes, there are successful real-life examples like VuePress and open-source projects that indicate how GitHub actions are suitable for the Vue js project
Expand Your Digital Horizons With Us
Start a new project or take an existing one to the next level. Get in touch to start small, scale-up, and go Agile.
Your Success Is Guaranteed !
We accelerate the release of digital product and guaranteed their success
We Use Slack, Jira & GitHub for Accurate Deployment and Effective Communication.