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.
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:
Add, and there you have it. Your
environment varbiables are set. Let’s look at a sample
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:
Travis CI is now on your Netlify app! To make sure, look for these following lines in your build log:
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 firstname.lastname@example.org.