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.
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.
Related
I have this .gitlab-ci.yml file:
image: node:latest
stages:
- build
- test
- publish
cache:
key:
files:
- package.json
- package-lock.json
paths:
- node_modules
build:
stage: build
script:
- echo -e "//my.private.repo.com/:_authToken=${NPM_TOKEN}\n$(cat .npmrc)">.npmrc
- npm install
- npm run build
artifacts:
paths:
- node_modules
- .npmrc
test:
stage: test
script:
- npm test
publish:
stage: publish
script:
- npm publish
only:
- tags
With this configuration, when I push a simple commit, everything is ok : build + test as expected.
But, when I push tag (created here with npm version, two pipeline are created : 1 for the commit, and 1 for the tag. So, build and tests are executed twice.
What can I do to prevent this behavior, and have the tag pipeline to "cancel" the commit pipeline
You could have different jobs for when you push a simple commit or tag, and use only and except keywords to differentiate between the cases, otherwise this is the correct behaviour considered by GitLab. You can see the discussion around a closed issue here.
I am currently trying to get my E2E tests running on Gitlab with their CI/CD platform.
My issue at the moment is that I cannot both my dev server and cypress to run at the same time so that the E2E tests can run.
Here is my current .gitlab-ci.yml file:
image: node
variables:
npm_config_cache: "$CI_PROJECT_DIR/.npm"
CYPRESS_CACHE_FOLDER: "$CI_PROJECT_DIR/cache/Cypress"
cache:
key: ${CI_COMMIT_REF_SLUG}
paths:
- .npm
- cache/Cypress
- node_modules
stages:
- setup
- test
setup:
stage: setup
image: cypress/base:10
script:
- npm ci
# check Cypress binary path and cached versions
# useful to make sure we are not carrying around old versions
- npx cypress cache path
- npx cypress cache list
cypress:
stage: test
image: cypress/base:10
script:
# I need to start a dev server here in the background
- cypress run --record --key <my_key> --parallel
artifacts:
when: always
paths:
- cypress/videos/**/*.mp4
- cypress/screenshots/**/*.png
expire_in: 7 day
In Cypress's official GitHub page, there is an example .gitlab-ci.yml for running Cypress in continuous integration.
It uses command npm run start:ci & for running dev server in the background.
So, your .gitlab-ci.yml might look like this:
⋮
cypress:
image: cypress/base:10
stage: test
script:
- npm run start:ci & # start the server in the background
- cypress run --record --key <my_key> --parallel
⋮
Or use this utility to start the server, wait for an URL to respond, then run tests and shut down the server https://github.com/bahmutov/start-server-and-test
I'm trying to run automated tests via browserstack on private server, tests are executed on Gitlab Ci. Since it is private server I need force local parameter when executing tests. When running from local PC following solution works perfectly:
Downloading binary
running command./BrowserStackLocal --key --force-local
I would like to do the same in .gitlab-ci.yml file, but I dont know exactly how to achieve this (how do download unzip and install browserstacklical binary)
This is my .gitlab-ci.yml file right now:
stages:
- e2e_testing
e2e_testing:
image: node:10.15.3
stage: e2e_testing
variables:
NODE_ENV: dev
script:
- apt-get update
- apt-get install unzip
- wget http://www.browserstack.com/browserstack-local/BrowserStackLocal-linux-x64.zip
- unzip BrowserStackLocal-linux-x64.zip
- ./BrowserStackLocal --key ${BROWSERSTACK_ACCESSKEY} --force-local
- npm ci
- npm run test:browserstack
only:
- master
tags:
- docker
- build
artifacts:
when: always
paths:
- reports/
You can execute the BrowserStack Local Binary through code using the Local Bindings for Node JS. Reference: https://github.com/browserstack/browserstack-local-nodejs
When using the Local Bindings, the Binary is automatically downloaded and initiated through code itself.
You could try executing the sample test: https://github.com/browserstack/browserstack-local-nodejs/blob/master/node-example.js from your Gitlab CI.
I have a simple .gitlab-ci.yml file that builds my Vue application. I build once and then deploy the dist folder to my various environments:
stages:
- build
- deploy_dev
- deploy_stg
- deploy_prd
build:
image: node:latest # Pull Node image
stage: build
script:
- npm install -g #vue/cli#latest
- npm install
- npm run build
artifacts:
expire_in: 2 weeks
paths:
- dist/
deploy_to_dev:
image: python:latest
stage: deploy_dev
dependencies:
- build
only:
- master # Only deply master branch automatically to Dev
script:
- export AWS_ACCESS_KEY_ID=$DEV_AWS_ACCESS_ID
- export AWS_SECRET_ACCESS_KEY=$DEV_AWS_ACCESS_KEY
- pip install awscli # Install AWS CLI
- aws s3 sync ./dist s3://$DEV_BUCKET
This all works great, however, I've now introduced some config and build my app differently per environment - for 3 environments I have 3 different build commands. Eg, I have an .env.production so for a production build my command becomes:
npm run build -- --mode production
Is there any way to get around having different builds for each environment but still using the .env files based on a GitLab variable?
You should split your build job to have one per environment and use the environment concept to have something like that for dev and production envs :
.build_template: &build_template
image: node:latest # Pull Node image
script:
- npm install -g #vue/cli#latest
- npm install
- npm run build -- --mode $CI_ENVIRONMENT_NAME
build_dev:
stage: build_dev
<<: *build_template
environment:
name: dev
build_prod:
stage: build_prod
<<: *build_template
environment:
name: production
In this snippet, I used anchors to avoid duplicate lines.
I built a Vue.js Vuex user interface. It works perfectly (on my laptop). I want to deploy it on Gitlab pages.
I used the file described here (except that I upgraded the Node.js version):
build site:
image: node:10.8
stage: build
script:
- npm install --progress=false
- npm run build
artifacts:
expire_in: 1 week
paths:
- dist
unit test:
image: node:10.8
stage: test
script:
- npm install --progress=false
- npm run unit
deploy:
image: alpine
stage: deploy
script:
- apk add --no-cache rsync openssh
- mkdir -p ~/.ssh
- echo "$SSH_PRIVATE_KEY" >> ~/.ssh/id_dsa
- chmod 600 ~/.ssh/id_dsa
- echo -e "Host *\n\tStrictHostKeyChecking no\n\n" > ~/.ssh/config
- rsync -rav --delete dist/ user#server.com:/your/project/path/
The job is marked as run successfully on the pipeline. However when I click on the pages URL I get a 404 HTTP error code.
What am I missing?
I was facing a similar issue when I was trying to deploy my Vue.js application to Gitlab pages. After weeks of trial and error, I have got it to work.
Seeing your above script your building the app, unit testing it and trying to deploy it to an external server. If you need it in Gitlab pages as well you have to use the pages job.
Here is my pages job for deploying a vue.js app to Gitlab pages:
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
Hope this is what you're looking for.
You can deploy without the pipeline. In order for this to work you have to first build your application for production. If you have used Vue cli this is done by invoking the build command. ex. npm run build
This will generate a dist folder where your assets are. This is what you have to push in your repository. For example, look at my repository.
https://github.com/DanijelH/danijelh.github.io
And this is the page
https://danijelh.github.io/