Setup TravisCI to test, build and deploy your app on Netlify in 5 minutes

In this tutorial you'll learn how to setup TravisCI 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. 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 for more about Continuous Integration and Continuous Deployment with TravisCI and Netlify.

👉🏻 In this repository 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 to see how it works). For example I have these two instances running for my sample app

• Production site
• Preview site

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

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 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!