Blog Engineering How to host VueJS apps using GitLab Pages
Published on: September 13, 2023
2 min read

How to host VueJS apps using GitLab Pages

Follow this tutorial, including detailed configuration guidance, to quickly get your application up and running for free.

hosting.png

If you use VueJS to build websites, then you can host your website for free with GitLab Pages. This short tutorial walks you through a simple way to host and deploy your VueJS applications using GitLab CI/CD and GitLab Pages.

Prequisites

  • A VueJS application
  • Working knowledge of GitLab CI
  • 5 minutes

Setting up your VueJS application

  1. Install vue-cli.
npm install -g @vue/cli
# OR
yarn global add @vue/cli

You can check you have the right version of Vue with:

vue --version
  1. Create your application using:
vue create name-of-app

When successfully completed, you will have a scaffolding of your VueJS application.

Setting up .gitlab-ci.yml for GitLab Pages

Below is the GitLab CI configuration necessary to deploy to GitLab Pages. Put this file into your root project. GitLab Pages always deploys your website from a specific folder called public.

image: "node:16-alpine"

stages:
  - build
  - test
  - deploy

build:
  stage: build
  script:
    - yarn install --frozen-lockfile --check-files --non-interactive
    - yarn build
  artifacts:
    paths:
      - public

pages:
  stage: deploy
  script:
    - echo 'Pages deployment job'
  artifacts:
    paths:
      - public
  only:
    - main

Vue config (vue.config.js)

In Vue, the artifacts are built in a folder called dist, in order for GitLab to deploy to Pages, we need to change the path of the artifacts. One way to do this is by changing the Vue config file, vue.config.js.

const { defineConfig } = require('@vue/cli-service')

function publicPath () {
  if (process.env.CI_PAGES_URL) {
    return new URL(process.env.CI_PAGES_URL).pathname
  } else {
    return '/'
  }
}

module.exports = defineConfig({
  transpileDependencies: true,
  publicPath: publicPath(),
  outputDir: 'public'
})

Here we have set outputDir to public so that GitLab will pick up the build artifacts and deploy to Pages. Another important piece when creating this configuration file is to change the publicPath, which is the base URL your application will be deployed at. In this case, we have create a function publicPath() that checks if the CI_PAGES_URL environment variable is set and returns the correct base URL.

Run GitLab CI

vuejs-gitlab-pages-pipeline

Check Pages to get your URL

gitlab-pages-domain

Voila! You have set up a VueJS project with a fully functioning CI/CD pipeline. Enjoy your VueJS application hosted by GitLab Pages!

References

We want to hear from you

Enjoyed reading this blog post or have questions or feedback? Share your thoughts by creating a new topic in the GitLab community forum. Share your feedback

Ready to get started?

See what your team could do with a unified DevSecOps Platform.

Get free trial

Find out which plan works best for your team

Learn about pricing

Learn about what GitLab can do for your team

Talk to an expert