Using Travis CI to test Gatsby Projects before Deploying

I started up my first group project on Github and saw something cool when I had one of my friends submit their first pull request. While doing the code review, I saw that Travis CI interacted with my project. On the pull request menu, I saw that travis automatically ran a test deploy AND Netlify(our hosting platform) created a preview for our deployment if travis was able to successfully test the submitted code. How awesome is that?!

Setup

The setup is easy. First head on down to Travis CI website and create an account. I would suggest signing in with your Github account, if you do all of the tokens you need will be generated for you.

Pro tip - Travis CI is free for open sourced projects, if you’re a student you can get the ability to test private repos. Checkout Github Student for more info.

The next step is to add a .travis.yml file to your projects root directory. That file will tell Travis how to install all the dependencies and build your project. We are building a Gatsby project in this example. You can change the before_script section and the script section to modify it for other projects. The before_script is where you want to add your global dependencies for your project and the script would be the actual build command. The other section that you may want to ignore is the node_js. This section sets a specific node version. Using “stable” will use the most current edition of node. Using “lts” will use the current LTS version of node. You can check which version these are by visiting the NodeJS home page Heres the code.

language: node_js

node_js:
  - "stable"
  - "lts/*"

branches:
  only:
    - master

cache:
  directories:
  - node_modules

before_script:
  - "npm i -g gatsby-cli"
  - "yarn"

script:
  - gatsby build

Testing

Now we just need to test a project to see if everything works. Make a change in any project and push it to master. You can also do a pull request to master as well. Once the request is applied, go to your dashboard on Travis. You should not see that your project is being tested with Travis. You can click on it and view the console for the build. Our travis.yml file is set up to run two test per commit. You should see 2 items in the build jobs section, one item will be run with nodejs stable and the other with LTS. Hopefully, everything passes just fine. If you did a pull request and are using Netlify, you can head over to the Netlify dashboard to see a preview of your deployment to test it further before approving the pull request.

Wrapping up

You can view this page to look at all of the customization options for the travis.yml file. One thing you may consider is to run operating system based tests. For example, I have an application that I develop with a Mac but host on a windows server. You can add MacOS and Windows platform test to make sure your code will work on both platforms.