Publish Vuejs to gitlab pages tutorial

Vue.js is a highly acknowledged web application development framework competing against Google Angular and Facebook React. Gitlab is a git-repository website like github. It has been doing a lot engineering work to make integration easier between repository and static pages deployment for startups and community since Microsoft acquired github in 2018.

In this tutorial, we will walk you through deploying compiled Vue.js file to gitlab pages. Vuejs 3.0 or above is used. Lower version also works but with different config file and option(s). Please refer to Vuejs documentation.

As for gitlab pages, we use project page instead of personal/organizational page. Gitlab supports third party domain name, so it really does not makes big difference from engineering perspective.

We are starting from gitlab repository setup as following steps. And for your information, the example git repository is shared to you here.

1): Create a gitlab repository. Assume you are "hawwah"(Eve). So your gitlab user name is it as well. and the your repository name is applegarden.

2):Create a new file .gitlab-ci.yml in this repository through gitlab web page. This is a simple tutorial, so we are not going to maintain more complex CI/CD script in this file and it will be in the list of ".gitignore".

YML:

# This file is a template, and might need editing before it works on your project.
# Full project: https://gitlab.com/pages/plain-html
  pages:
    stage: deploy
    script:
    - mkdir .public
    - cp -r * .public
    - mv .public public
    artifacts:
      paths:
      - public
    only:
    - master

3): We now clone it locally as below.

Bourne Shell:

git clone https://gitlab.com/hawwah/applegarden /path/to/localAppleGarden

4): Goto your Vue project directory and edit the package.json file

Bourne Shell:

cd /path/to/vueproject
  nano package.json

Find section "script" and add a new line in it so as the section like below:

Javascript code:

"scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "publishGitlab": "vue-cli-service build --dest /path/to/localAppleGarden",
    "lint": "vue-cli-service lint",
  }

Create a file in your Vue project directory with name "vue.config.js" which contain below source.

Javascript code:

module.exports = {
    publicPath: "/applegarden"
  }

5): Then you build the project by below command

Bourne Shell:

  npm run publishGitlab

6): Now we go to compiled source and push them to gitlab origin.

Bourne Shell:

git add --all
  git commit -m "Blahblahblah"
  git push origin master

7): At last, we can goto gitlab.com and the CI/CD as below screen shot.

Click the running status link, below screen shot showing that gitlab is copying the files to the "pubic" directory of a docker machine. Also you can goto serveless or kubernetes in GCP and got $300 credit directly through the native integration with GCP Kubernetes engine. Fantastic job, gitlab!

Finally, we can check deployed pages at "https://gitlab.io/hawwah/applegarden".

That's all. And you can further customize the page URL to your own domain. Even accelerate by deploying to cloudflare.com, free! But it is different topic we are going to cover it next blog. Then I will update here a link. Stay tune!