Step by Step. How to host a VueJS (Vite based) Project on GitHub with GitHub Actions.

A while ago, I've started exploring a new JavaScript Framework named Vue.js. I've enjoyed its relative simplicity and variety, so I came to a decision to host one of my projects. When it comes to the options, I've done a short research, where Google has offered me several options, I decided to use GitHub Pages. For framework based projects, it is however, recommended to use other option on GitHub Pages, which is GitHub Actions. And this what I am going to show you how.

This is my first technical article on my blog. If there will be any questions, try to reach out to me with possible options. Thank you! And if you prefer a Video version of it, it already exists and done by a nice guy, Ben. Watch it.

If you're reading this article, I assume that you already have a repository with a project you would like to host on GitHub. So I will skip the part, how to create, pool and push your project. Let's start straight with hosting your project..

1. First, please make sure you are in your project root directory. This is the one, with your src folder. It should look like something like this:

2. This is a Vite based TypeScript app, this is why we are heading over to its config file: vite.config.ts. Within its content locate export default defineConfig({}) and paste the following: base: '/YOUR-REPO'. Like this:

In my case I called my Repo on GitHub vue-project, this is why on line 13 it says base: '/vue-project'. Below is a screenshot from my repo to demonstrate, what I meant.

3. As of this step, you can check the deployment part of a Vite app on its website via this link, or you can just keep reading and I will provide the necessary info. So, we need now a deployment workflow. Please copy the content below:

# Simple workflow for deploying static content to GitHub Pages
name: Deploy static content to Pages

on:
  # Runs on pushes targeting the default branch
  push:
    branches: ['main']

  # Allows you to run this workflow manually from the Actions tab
  workflow_dispatch:

# Sets the GITHUB_TOKEN permissions to allow deployment to GitHub Pages
permissions:
  contents: read
  pages: write
  id-token: write

# Allow one concurrent deployment
concurrency:
  group: 'pages'
  cancel-in-progress: true

jobs:
  # Single deploy job since we're just deploying
  deploy:
    environment:
      name: github-pages
      url: ${{ steps.deployment.outputs.page_url }}
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@v4
      - name: Set up Node
        uses: actions/setup-node@v4
        with:
          node-version: 20
          cache: 'npm'
      - name: Install dependencies
        run: npm ci
      - name: Build
        run: npm run build
      - name: Setup Pages
        uses: actions/configure-pages@v4
      - name: Upload artifact
        uses: actions/upload-pages-artifact@v3
        with:
          # Upload dist folder
          path: './dist'
      - name: Deploy to GitHub Pages
        id: deployment
        uses: actions/deploy-pages@v4

4. Back to GitHub. In the repository you want to host, click on the Settings and under Code and automation locate the Pages tab. Click on it and from dropdown menu Build and Deployment pick the GitHub Actions as option:

After choosing GitHub Actions as option, the pages menu will change a bit. Don't worry, this is how it should be.

5. On this same page, click on "create your own" under the dropdown menu, where you just changed/picked the option. You will see then a page (editor) where you have to paste the content from above. If it will be something already pre-populated, just delete the content and paste the code from Step 3.
   
6. In the top left corner, you'll see a path with your repo and an input field. I do usually name it deploy.yml, but you are free to name it as you wish. When you're done, it should look something like this:

Press on the "Commit changes" button in the top right corner and consider most of this adventure as done. It will create a new commit. If you wish, you could add and additional description and all that Jazz. Its up to you. Just Commit the changes. There will be new folder .github/workflows and file deploy.yml (in my case). Now GitHub will start to deploying your app. You can check its status under the Actions menu.

And if its (hopefully) successful, you will se a generated page for your right in this node:

Click on the link under the deploy and you will see your page live on the web. If this will help at lease one of you, then my time was worth it. Enjoy!

P.S. Here is the exact project from this guide, hosted while creating it. Vue-Project.

Be well
Begli