Configure Gatsby for Platform.sh

The end goal of this guide is to deploy your Gatsby app to a project on Platform.sh. In many ways, a project is just a collection of tools around a Git repository. A project replicates the branching structure of a repository exactly, but with one important addition: any branch can be activated to become an environment on Platform.sh. Activated environments go through Platform.sh’s build and deploy phases, resulting in a fully isolated running site for each activated branch (or pull request) on that repository.

Once an environment is activated, Platform.sh provisions a cluster of containers to deploy your app. The configuration of that cluster is controlled by three YAML files:

  • .platform/routes.yaml controls how incoming requests are routed to your app, or apps in a multi-app setup. It also controls the built-in HTTP cache. If you’re only using the single default route, you don’t need this file.
  • .platform/services.yaml controls what additional services are created to support your app, such as databases or search servers. Each environment has its own independent copy of each service. If you’re not using any services, you don’t need this file.
  • .platform.app.yaml controls the configuration of the container where your app lives. It’s the most powerful configuration file with the most options. So it can get somewhat long depending on your configuration.

Each project on Platform.sh needs at least the last file and each file can be customized however you need. But most Gatsby sites have a fairly similar configuration, at least to start.

You can start by creating empty versions of each of these files in your repository:

# Create empty Platform.sh configuration files
touch .platform.app.yaml && mkdir -p .platform && touch .platform/routes.yaml

Now that you’ve added these files to your project, you can go through and configure each of them for Gatsby one by one in the sections below. Each section covers a particular configuration file, defines what each attribute configures, and then shows a final code snippet that includes the recommended configuration for Gatsby pulled from its template. Within that snippet, be sure to read each of the comments as they provide additional information and reasoning for why Gatsby requires those values.

Requests configuration: routes.yaml 

The routes.yaml file controls the routing and caching for all HTTP requests sent to your app. Typically you just route all incoming requests to your one app container, where your site lives, but many more elaborate configurations are possible.

The two most important parts to configure are the main route itself and its caching rules. A route can have a placeholder of {default}, which is replaced with a branch-specific generated domain name or, in production, your configured domain name.

The route then has an upstream, which is the name of the container that it should forward requests to. Most of the time, you want your app’s name.

You can (and should) enable the HTTP cache. The router includes a basic HTTP cache that obeys the HTTP cache headers produced by your app. However, by default HTTP caches includes all cookies in the cache key. So if you have any cookies at all, you can’t cache the site. The cookies key allows you to select which cookies should matter for the cache Generally, you just want the user session cookie, which is included in the example for Gatsby. You may need to add other cookies depending on what additional modules you have installed.

Routes can also be HTTP redirects, either fully or partially. In the following example, all requests to www.{default} are redirected to the equivalent URL without www. You could configure it the other way around if you want. More complex redirects are also possible.

Don’t worry about unencrypted HTTP routes. All requests on Platform.sh are TLS-enabled and HTTP requests are automatically redirected to HTTPS.

If you don’t include a routes.yaml file, a single default route is deployed. This is equivalent to the following:

.platform/routes.yaml
https://{default}/:
  type: upstream
  upstream: <APP_NAME>:http

Where <APP_NAME> is the name you’ve defined in your app configuration.

You can also create other routes as you like:

"https://{default}/":
  type: upstream
  upstream: "app:http"

Service configuration: services.yaml 

The services.yaml file lists the pre-packaged services you need for your application to run. You pick the major version of the service and Platform.sh updates the patch version periodically so that you always get the newest version when you deploy.

Gatsby doesn’t require services to deploy, so you don’t need a services.yaml file for now. You can add other services if desired, such as Solr or Elasticsearch. You need to configure Gatsby to use those services once they’re enabled.

Application container: .platform.app.yaml 

The .platform.app.yaml file is the heart of your configuration. It has an extensive set of options that allow you to configure nearly any aspect of your app. Most of it is explained with comments inline. This file changes over time as you build out your site.

In the template, yarn is run during the build hook to install all of Gatsby’s dependencies, and then yarn build is run to build the site and output to the public subdirectory. If you would rather use npm to manage your dependencies, you can:

  • delete yarn from the build hook
  • update yarn build to npm run build in the build hook
  • delete the build.flavor block, which tells Platform.sh to rely solely on the build hook to define the build process for your project when set to none. By default, Node.js containers run npm install prior to the build hook, so this block can be removed entirely from the configuration.
  • delete the dependencies block, which includes yarn, since it is no longer needed.

All traffic is then directed to the public subdirectory once the deployment has completed via the web.locations section.

# .platform.app.yaml

# The name of this application, which must be unique within a project.
name: 'app'

# The type key specifies the language and version for your application.
type: 'nodejs:16'

# Use Yarn instead of npm.
build:
    flavor: none

# Build dependencies. 
dependencies:
    nodejs:
        yarn: "1.22.5"

# The hooks that will be triggered when the package is deployed.
hooks:
    # Build hooks can modify the application files on disk but not access any services like databases.
    build: |
        yarn
        yarn build        

# The size of the persistent disk of the application (in MB).
disk: 5120

# The configuration of the application when it is exposed to the web.
web:
    locations:
        '/':
            # The public directory of the application relative to its root.
            root: 'public'
            index: ['index.html']
            scripts: false
            allow: true

source:
  operations:
    auto-update:
      command: |
                curl -fsS https://raw.githubusercontent.com/platformsh/source-operations/main/setup.sh | { bash /dev/fd/3 sop-autoupdate; } 3<&0