Create a new project

Or use an existing one. In this case, we’re creating a new one named vue_netlify_ci using vue create vue_netlify_ci.

Here’s the config I used:

Babel + Router + Vuex + Sass/SCSS Pre-processors(node-sass) + Standard Linter + Jest Unit-testing

Push it to a GitLab repo

Standard procedure.

Install netlify-cli globally

Run npm i netlify-cli -g and make sure it’s properly installed by typing in netlify -v . It’ll yield something like netlify-cli/2.11.10 darwin-x64 node-v10.15.3.

Command not found? It’s possible that when you try to run netlify you’ll get a “Command not found” message. That’s most likely due to some issue related to how you installed Node+npm in the first place. To fix it you need to update you $PATH env (for MacOS/Linux the process should be roughly equal. For Windows users, Google I guess?)



1. Look up the result of installing netlify-cli, it should look something like:

/usr/local/Cellar/node/8.7.0/bin/ntl -> /usr/local/Cellar/node/8.7.0/lib/node_modules/netlify-cli/bin/run

/usr/local/Cellar/node/8.7.0/bin/netlify -> /usr/local/Cellar/node/8.7.0/lib/node_modules/netlify-cli/bin/run

+ netlify-cli@2.11.10

updated 1 package in 5.123s

In my case, netlify can be found within /usr/local/Cellar/node/8.7.0/bin/

and that’s the line we need to add to our .bash_profile. To do so, vim in to it using vim ~/.bash_profile and add the line export PATH=/usr/local/Cellar/node/8.7.0/bin/:$PATH (note that you need to change this depending on your output). Save it and run source ~/.bash_profile and netlify should now be accessible in your terminal.

Preparing Netlify for CI

Link your repo to a new Netlify project

Run netlify init --manual and follow these wizard steps:

Select: Create & configure new site Give it a name (optional) (we’ll call it vue-netlify-ci) Pick your team, if any and press Enter to finish.

Note: if it’s your first time using netlify CLI, you’ll be prompted to authorize the connection to your account (it’ll open a browser window with the authorization UI).

After these, you’ll have your project created within Netlify but it won’t be deployed (because we haven’t told it how to do so yet).

All is OK. We actually need a Site ID before proceeding.

We now have a Site ID which we’ll need for our GitLab YAML instructions.

Generate a personal access token

If you’re logged in Netlify, click here to go straight to the right section. For reference, it’s located under User Settings > Applications.

Add a description to the token such as CI and keep it somewhere safe! Once you exit that page with the generated token you won’t be able to retrieve it anymore. If you lose it, you’ll need to generate a new one.

Setup Netlify’s config file

We can describe how Netlify will build and deploy your site using TOML markup language. In our case, simply create a file named netlify.toml under the project’s root directory with the following:

What’s happening here? We’re simply telling Netlify which directory contains the deploy-ready assets generated by the build.

(Note: In our case we are building the app using GitLab’s runners and deploying the bundle all together, whereas you’d normally have command = "npm run build" to tell Netlify to build the app first).

We now have an access token, the site’s ID and we’ve told Netlify how to handle the deploy process. Onto GitLab.

Preparing for GitLab CI/CD

GitLab’s CI/CD is pretty straight forward. If you push to a repo and it detects a .gitlab-ci.yml file within your project, it’ll use shared runners to run the scripts inside it according to the provided instructions.

Accessing CI / CD configs

Before setting up the file, we need to setup environment variables so our .yml doesn’t expose any sensible data, namely the access token and site ID.

To do so, navigate to Settings > CI /CD and expand the Variables section.

Add in NETLIFY_AUTH_TOKEN and NETLIFY_SITE_ID, each with their respective values. (Tip: if you don’t recall your side ID, you can see it in your project root directory under .netlify/state.json).

Save them, and we are now ready finally ready to add .gitlab-ci.yml

Defining the CI/CD pipeline

GitLab CI/CD pipelines are configured using a YAML file called .gitlab-ci.yml within each project.

In the project’s root directory, create a file called .gitlab-ci.yml and add the following:

A four stage pipeline

This sets up a 4-stage pipeline that will 1) setup the project’s dependencies; 2) run our tests; 3) build the app; 4) deploy it to Netlify.

Some details about what is being used:

image: indicates which Docker to use for the jobs.

cache: allows us to speed up invocations of subsequent runs of a given job, by keeping dependencies, in this case node_modules. More on caching here.

artifacts: specifies files/directories we want to make available to following jobs.

dependencies: to be used in conjunction with artifacts. Allows us to use the result of the build stage (the dist folder) into the deploy stage.

npm ci: “npm ci bypasses a package’s package.json to install modules from a package’s lockfile [..] offering massive improvements to both the performance and reliability of builds for continuous integration / continuous deployment processes”.

netlify deploy: deploys our site to Netlify, specifically: --site $NETLIFY_SITE_ID and --auth $NETLIFY_AUTH_TOKEN indicate the site we want to deploy to and authenticate us to deploy (using the CI/CD env variables we set up earlier). --prod indicates we want to deploy to production.

Result: does it blend?

Finally, add and commit the files and git push (we’ve been working on the master branch. Ideally you would push to a separate branch and then PR+Merge into master. Only changes to master affect the CI pipeline).

As soon as you push/merge to master, GitLab will trigger its runners and execute the pipeline.

Pass, pass, pass and pass 😎

Within your GitLab project, Navigate to CI/CD > Pipelines or CI/CD > Jobs to view in detail the status of each stage. If you get an error, be sure to click that job and look at the logs to understand what’s the issue.