Continuous Integration with Travis CI

Travis Ci is a Continuous Integration tool that lets you automate the build and deployment of your project when something new is pushed to a GitHub repository.

In this guide we will setup our Travis CI pipeline to:

  • Create a new deployment after each push to any branch
  • Alias your deployment made on the master branch with your custom domain
  • Optionally; build an application inside Travis instead of with Now

The first thing you'll need is a token for your account. You can get this in the Tokens section of your Account Settings.

Head to the tokens page of your dashboard by navigating to your Account Settings and then clicking the "Tokens" link.

By entering a name into the input labelled "Create a new token..." and subsequently pressing Enter, a new token will be created which you can copy to your clipboard by clicking Copy.

With this token you can use Now with your account anywhere with the following command:

now --token [TOKEN]

Replace --token with -t for short.

The [TOKEN] in the example command is replaced with token you copied from your Account Settings.

First of all, make sure you've signed up with Travis and synced the repositories you'd like to use with Now previous to this. If you have yet to do this, read steps 1 and 2 of the Travis CI's "To get started with Travis CI" guide. If you're configuring a public repository, you can use travis-ci.org, otherwise if the repository is private, you'll need to use the paid version on travis-ci.com.

Now that you have your token and have set up your GitHub account with Travis, you can start integrating Travis into your project. Start by creating a .travis.yml file in the root of your repository.

Next, go to the desired repository's settings in Travis (e.g. https://travis-ci.org/:username/:repository/settings) and add a new environment variable with the value of your newly created Now token. If you call it NOW_TOKEN you can then use it inside Travis CI configuration like the following for example:

now --token $NOW_TOKEN

Note: You can use any name for your environment variable, just change the name that you entered into the repositories settings in Travis CI with your own variable name and then use that name with $ at the beginning like the example above.

Now that Travis is integrated into your repository, you need to configure your Travis pipeline. In order to do that you need to change your .travis.yml file and add the following content:

language: node_js
node_js:
  - "node"
cache:
  directories:
    - "node_modules" # This will tell Travis CI to cache the dependencies
script: npm test # Here you could also run the build step of your application
before_deploy: npm install now --no-save # Install Now CLI on Travis
deploy:
  - provider: script # Run a custom deployment script which we will define below
    script: now --token $NOW_TOKEN
    skip_cleanup: true
    on:
      all_branches: true
      master: false
  - provider: script
    script: now --token $NOW_TOKEN && now alias --token $NOW_TOKEN
    skip_cleanup: true
    on:
      master: true

Note: If you are deploying using an OSS account you will have to add the --public argument with the Now commands to avoid being asked if you are sure you want your deployment to be public, which will block the build; awaiting user input.

As you may have noticed, the above script for the master branch uses the now alias command without providing the deployment URL and the alias to use. This can be achieved using a configuration file. You can read more about it in "How Do I Deploy and Alias in a Single Command?" on our FAQ page.

And that's it! Everytime you push something new to any branch it will create a new deployment and if the branch is master it will also move the project aliases to it.

In some cases you may prefer to build on Travis CI instead of directly on Now. If that's the case, this can be achieved modifying your .travis.yml and now.json files a little bit.

If you decide to build your application on Travis CI you will not need to deploy your source code, if that's the case you can use a configuration file with the files key to specify what to deploy.

If you are building a Next.js application with a custom server you can add the following to your configuration file.

{
  "files": [
    ".next",
    "server",
    "static",
    "package.json",
    "yarn.lock"
  ]
}

With this, Now will only deploy the files under the directories .next, server, static, and the files package.json and yarn.lock. You can customize this to add any files which will be required by your application after the build step.

To run your build on Travis CI you only need to change your .travis.yml file to run the build script. To do this, change the script part of your file as follows:

script: npm run build

Note: This will make Travis CI run the build script instead of the test script, you can add a prebuild or postbuild step to run tests

Since you are building your application on Travis, you don't want Now to try to build it. To avoid this you can add the following simple script to your package.json.

{
  "scripts": {
    "now-build": "echo 'Built on Travis CI'"
  }
}

If the now-build script is defined, Now will use it instead of build. This lets you define it yourself in order to customize the build step on Now or just avoid building it on Now entirely.