Vue.js on GitLab Pages

Bernhard Knasmüller April 27, 2019

This article describes how to setup a continuous integration pipeline in GitLab for your Vue.js app. Learn how to automate your deployment to GitLab pages in a few easy steps.

GitLab pages is a great way to host simple web applications and is easy to integrate into GitLab’s continous integration (CI) pipeline.

Create a new Vue.js app

We will use Vue CLI to create a new Vue.js app:

npm install -g @vue/cli
vue create my-example-project

After this initial setup is complete, a skeleton for your Vue.js app is created in my-example-project\. Fortunately, it already contains a git repository so you can simply configure your GitLab URL and are good to go:

cd example-project
git remote add origin [email protected]:<username>/<project-name>.git

Next, we create the configuration file for GitLab’s CI pipeline with the following content:

pages:
 image: node:latest
 stage: deploy
 script:
  - npm install --progress=false
  - npm run build
  - rm -rf public
  - mkdir public
  - cp -r dist/* public
 artifacts:
  expire_in: 1 day
  paths:
  - public
 only:
  - master

Simply save this file as .gitlab-ci.yml in the project’s root directory.

Finally, we add a Vue.js configuration file:

module.exports = {
  publicPath: process.env.NODE_ENV === 'production'
    ? '/<project-name>/'
    : '/'
}

Make sure to replace <project-name> with the name of your GitLab project (as seen in the URL).

Add both files to git and push your changes to GitLab:

git add .
git commit -m "Add CI configuration files"
git push --set-upstream origin master

After you have pushed your changes, go to your GitLab project and check the CI build status (“CI / CD” > “Jobs”). It should look like this:

You can configure GitLab pages under “Settings” > “Pages”. There you will also find the URL to your hosted web app. It should look like this:

Bernhard Knasmüller April 27, 2019