How to Build a Gatsby Site Using Azure DevOps

Azure DevOps is Microsoft's all in one solution for issue tracking, code hosting, code building and code deploy. In this guide we will look at how you can build a Gatsby site using Azure DevOps. Azure DevOps supports build configuration in yml files.

The guide below depends on that you have two scripts defined in package.json, npm run lint and npm run build. There are multiple ways to implement thoose commands but possible solution could be:

{
  "scripts": {
    "build": "gatsby build",
    "lint": "eslint ."
  }
}

Trigger

trigger:
- develop

A trigger tells Azure DevOps when to run. In this case the build will only run on the branch develop.

Pool

pool:
  vmImage: 'ubuntu-latest'

Azure DevOps needs to know which image to run the build process on. ubuntu-latest tells DevOps to use the latest available Ubuntu image.

Variables

variables:
  - group: dev

The group option defines which variable group to use. In this case a variable group called dev is defined under Piplines -> Library.

There are two main reasons to use variables:

1. You dont want to store secrets in clear text in your code
2. It makes it easier to have the same build process for different environments.

Steps

steps:

Steps define the build steps you want to implement. This example contains the following steps: install NodeJs, install NPM packages, run lint and running the build.

Install NodeJs

- task: NodeTool@0
  inputs:
    versionSpec: '10.x'
  displayName: 'Install Node.js'

Firstly we want to install NodeJs. This is done by using the built in task called NodeTool. versionSpec defines which version of NodeJs to install. displayName is only the command name which will be displayed in the build log.

Install Dependencies

- script: |
    npm install
  displayName: 'npm install'

This step runs the npm install command to install the Node dependencies

Run Lint

- script: |
    npm run lint
  displayName: 'npm lint'

This step runs the linter to check for linting errors before we build the site.

Build the Gatsby Site

- script: |
    npm run build
  env:
    GATSBY_ENV: $(GATSBY_ENV)
  displayName: 'npm build'

In this last step the Gatsby project itself is created. If you start with the default Gatsby template the npm run build will run the command gatsby build. The GATSBY_ENV: $(GATSBY_ENV) part is used to get the $(GATSBY_ENV) from the Azure DevOps variable storage and pass it into Gatsby. Remember that all varibles who should be available on the client side on Gatsby need to start with GATSBY. Read more about Gatsby variables here.

The Complete File

Finally we have the complete Azure DevOps file:

trigger:
- develop

pool:
  vmImage: 'ubuntu-latest'

variables:
  - group: dev

steps:
- task: NodeTool@0
  inputs:
    versionSpec: '10.x'
  displayName: 'Install Node.js'

- script: |
    npm install
  displayName: 'npm install'

- script: |
    npm run lint
  displayName: 'npm lint'

- script: |
    npm run build
  env:
    GATSBY_ENV: $(GATSBY_ENV)
  displayName: 'npm build'

We could easily add more advanced steps like node_modules caching and deployment. However, this guide is only meant to be a starting point for more advanced build configurations. Stay tuned for more guides!

If you want to support this blog you can do so by signing up to DigitalOcean using this referral link