Ease of use is key nowadays in such a fast pace and rapid build environment we live in, so we’re going to make things a bit easier and integrate Travis CI and Netlify into our Vue app.

Now CI/CD is an automated process, specifically a sequence of events – that without, you’d have to do manually. So to keep it short Travis CI is going to save you a lot of time. Netlify discovers and installs your project dependencies and allows you to write powerful plugins that hook into any stage, so as you can see with Travis CI and Netlify, your project will be in good hands, let’s get started.

Getting started

First lets disable Netlify’s automatic builds so let’s browse over to, Build & Deploy > Continuous Deployment > Build Settings. Now we need to fetch some of your environment varibles. So let’s go to Personal Access Token and then select, New Access Token, enter a quick description so you know what the access token is for, and let’s generate it.

Getting Travis CI setup

Now that you have your access token, let’s add that token to your environment variables in Travis now:

Click Add, and there you have it. Your environment varbiables are set. Let’s look at a sample .travis.yml:

language: node_js
cache:
  directories:
    - node_modules
script:
  - yarn test:unit
before_deploy:
  - npm install netlify-cli -g
  - yarn build
deploy:
  provider: script
  edge: true
  script: netlify deploy --dir=dist --prod
  on:
    branch: main

You’ll notice in the before_deploy hook we are going to install the package netlify-cli globally, and in this case we are going to be using yarn, so we’re going to tell Travis to run yarn build – which in essence will start building and running your app on Netlify. Don’t forget to run your tests locally if need be:

yarn test:unit

Travis CI is now on your Netlify app! To make sure, look for these following lines in your build log:

Conclusion

There you go, you just got an inside look on how fast Travis CI can be setup on Netlify, so why not give it a shot?

As always if you have any questions, any questions at all, please email me at montana@travis-ci.org.

Happy building!