Deploy Vue.js application to gitlab pages even though deployment is successful nothing is displayed

Question

I am trying to deploy a sample Vue.js application to Gitlab pages but even though deployment has passed successfully nothing is rendered when I try to hit the served URL.

Here is my deployment code(.gitlab-ci.yml):

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

I tried to locally serve the pages after npm run build from the /dist folder and its working all fine. I am not sure if there are any issues in my deployment script in Gitlab.

How do I get my application running in Gitlab pages?

I am using vuejs2and vue-cli-3 for bundling the scripts.

Answer 1

I figured out the issue with my code. The public folder contained duplicate data due to which it was not rendering the application properly.

Here is the working version of the deployment script:

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 week
  paths:
  - public
 only:
  - master

After pipeline process is completed access the Gitlab pages of your repository. You should see the app rendering as expected.