How to deploy Vue.js apps | Github Actions

Vue.js auto-deployment to the server using GitHub Actions streamlines the deployment process, making a smooth CI/CD from the local machine to the server.

In this Story, you’ll learn how to automate the deployment of your Vue.js application to the server using GitHub Actions. We’ll walk through setting up GitHub workflows, integrating version control with Git, and making essential configurations to ensure smooth deployment. Along the way, you’ll gain practical insights into optimising your Vue.js setup for seamless production-ready deployment.

What is GitHub Actions?

GitHub actions are automated processes that enable you to host, test, and release software. It is an essential component of GitHub, facilitating the development process through push and automation activities. Simply put, GitHub actions navigate the instructions you create in your Git repository to automate the development process or an API for cause and effect.

Before you begin your development cycle, you need be aware of a few GitHub action components.

Event: This is an activity in which the process is activated and the automated pipeline begins to pull or push requests.
Workflow: Any event can initiate a workflow, indicating that automated processes will be used when the program is ready for release.
Runner: The server that executes the workflow when it is triggered. Furthermore, each runner can be performed concurrently, and each process launches a new virtual computer.
Actions:A custom application handles sophisticated yet often repeated activities. It is used to reduce repetitive tasks and prepare the environment.
Jobs: A collection of steps that work in a specific order and rely on one another to share data. If it is not dependent on others, it will start a new job to package up the builds by default.
YAML: (Yet Another Markup) is a human data serialization language. It defines the workflow using GitHub activities, and each workflow is saved as a distinct YAML syntax file in your code repository. For example, the directory may be named.github/workflows.

Now i assume your Vue app is ready to deploy, and you have all the basic requirements and your GitHub repo for the process.
Let’s start with the deployment process and setting up our Vue app

Direct Deployment

There is also a very easy but manual way to deploy a Vue app to the server by moving the build zip file to the server, this can be done by

npm i. //to install all the required packages
npm run build // it will make a build ready for production

After running the above commands, you will see files in the vueapp/dist folder. Make a zip of files under the dist folder and upload directly to the server. Then unzip or extract the zip file over there :)

Deployment using GitHub Actions

To do this, we need to make some changes in our Vue app directory

1. Open Your Project in VS Code or any editor and create a folder called .scripts inside the root of the folder, e.g. vueProject/.scripts,
2. Inside the .scripts folder, Create A file with a .sh extension, e.g. vueProject/.scripts/deploy.sh and paste the below code there,

#!/bin/bash
set -e

echo "Prodcution Deployment started "

# Pull the latest version of the app
git pull origin master
echo "New changes pulled to server !"

echo "Installing Dependencies "
npm install --yes

echo "Creating Production Build "
npm run build

echo "Deployment Finished!"

3. Go inside .scripts Folder, then Set File permissions forthe .sh File

git update-index --add --chmod=+x deploy.sh

4. Now create a Directory Path named .github/workflows inside your root project folder e.g. vueProject/.github/workflows then inside this folder create a file deploy.yml, e.g. vueProject/.github/workflows/deploy.yml

5. In deploy.yml file copy the below code, make changes according to requirements.

name: Deploy

# Trigger the workflow on push and
# pull request events on the master branch
on:
  push:
    branches: ["master"]
  pull_request:
    branches: ["master"]

# Authenticate to the the server via ssh
# and run our deployment script
jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - name: Deploy to Production Server
        uses: appleboy/ssh-action@master
        with:
          host: ${{ secrets.HOST }}
          username: ${{ secrets.USERNAME }}
          port: ${{ secrets.PORT }}
          key: ${{ secrets.SSHKEY }}
          script: "cd /var/www/project_folder && ./.scripts/deploy.sh"

make sure at the end of file you provide actual path to project by checking on your server else it will throw an error

After successfully making changes in the project folder locally,
It’s time to make changes in GitHub for this project repository

Go to Github Repo of this project and click on settings, then Click on Secrets and Variables from the Sidebar then choose Actions after this click on add new secrets, we will be adding four secrets here that are being used in deploy.yml file.

Name: HOST
Secret: Your_Server_IP

Name: PORT
Secret: Your_Server_PORT

Name: USERNAME
Secret: Your_Server_User_Name

Name: SSHKEY
Secret: Your_Server_SSHKEY

If you don’t know the SSHKEY, don’t worry, we can generate a new one

ssh-keygen -f .ssh/vueapp -t ed25519 -C "your_email@example.com"

# If you’re in your home directory (~), it will create:
 # ~/.ssh/vueapp → 🔒 Private Key
 # ~/.ssh/vueapp.pub → 🔑 Public Key

Open the Newly Created Public SSH Keys, then copy the key

cat ~/.ssh/vueapp.pub

Now, Open the authorized_keys File which is inside .ssh/authorized_keys, then paste the copied key in a new line at the end and close the file.

cd .ssh
nano authorized_keys

Till now, we have generated and added the public key to the authorized_keys. At the end, we will use the private key to add as secrets in GitHub Actions SSHKEY, Open Newly Created Private SSH Keys then copy the key

cat ~/.ssh/vueapp

Before you start to test the changes, I highly recommend to ssh into your server and take a pull from your repo to server directory to make required files available on the server to execute deploy script and workflow. Probably you might see a permissions error on .scripts/deploy.sh file to make in executable run this in project directory — chmod +x .scripts/deploy.sh

Now your deployment process should become automatic using actions, to test it out, make some changes on your project locally and push to , GitHub it will trigger the workflow and execute the script, which will make the build available on the server, Just in case if you get any permission error on server you can make changes according to situation and we are all set !

I hope this story adds some value to your new or existing application, I attempted to convey the basic notion. Thanks for reading this story If you find any mistakes please let me know.

If you find this Story Helpful, you can show some support to help me.