Setup TravisCI to test, build and deploy your app on Netlify in 5 minutes
Tags: beginners, tutorial, webdev, devops
Published: 2020-05-29 16:34:23

In this tutorial you'll learn how to setup [TravisCI](https://travis-ci.org/) to test and build a simple app (I'm using Vue.js here but feel free to use whatever you want!) and then deploy it on [Netlify](https://www.netlify.com/). TravisCI is a hosted, distributed continuous integration service used to build and test projects on GitHub. Netlify offers cloud hosting for static websites, providing continuous deployment, free SSL, serverless functions, and more... [Read this article](https://dev.to/astagi/continuous-integration-and-deployment-with-travisci-and-netlify-4294) for more about Continuous Integration and Continuous Deployment with TravisCI and Netlify.

👉🏻 In [this repository](https://github.com/astagi/netlify-travis-cicd) you'll find the final code.

## Setup Netlify

Setting up your site with Netlify is really straightforward, click on `New site from Git` and follow the instructions. After this step, disable automatic builds in Netlify site dashboard under `Build & Deploy` > `Continuous Deployment` > `Build settings`. Without this option I suggest to run a separate instance of your site on Netlify to easily keep features like site preview on pull requests (check [this pull request](https://github.com/astagi/netlify-travis-cicd/pull/2) to see how it works). For example I have these two instances running for my sample app

- [Production site](https://frosty-lamarr-758586.netlify.app/)
- [Preview site](https://happy-galileo-9b98e8.netlify.app/)

## Configure TravisCI

Builds on Travis CI can be configured through the build configuration stored in the file `.travis.yml` placed in the root of your project. To build, test and deploy a simple Vue app, the final `.travis.yml` file will look like this

```yml
language: node_js
node_js:
  - 12
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: master
```

This configuration is easy to understand: first of all it instructs TravisCI to use `Node.js 12` environment and run tests with `yarn test:unit` command as specified in the `script` section. 
In the following section, `before_deploy`, TravisCI runs a complete build of your site (using `yarn build` in this case) and installs [Netlify CLI](https://docs.netlify.com/cli/get-started/) to deploy the site later. Netlify CLI needs to know who you are and the target site you want to deploy.

- Under `Personal access tokens`, select `New access token`.
- Enter a description and select `Generate token`.
- Copy the generated token to your clipboard (once you navigate from the page, the token cannot be seen again!) and add it to a `NETLIFY_AUTH_TOKEN` environment variable in TravisCI.

To set the target site to deploy

- From the Netlify site dashboard, go to `Settings` > `General` > `Site details` > `Site information`, and copy the value for `API ID`.
- Assign the `API ID` to a `NETLIFY_SITE_ID` environment variable in TravisCI.

In the last section, `deploy`, TravisCI uses Netlify CLI to deploy your site on Netlify in production mode, specifying the source folder (in this case `dist` generated by `yarn build`). By default, deployments will only happen on the master branch but you can overwrite this by using the branch option.

✨ Your CI/CD pipeline using TravisCI and Netlify is ready!