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.
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
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
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.
Personal access tokens, select
New access token.
- Enter a description and select
- 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_TOKENenvironment variable in TravisCI.
To set the target site to deploy
- From the Netlify site dashboard, go to
Site information, and copy the value for
- Assign the
API IDto a
NETLIFY_SITE_IDenvironment 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!