Gatsby

This guide shows you how to deploy an Gatsby application to Edgio.

Example#

Connector#

This framework has a connector developed for Edgio. See Connectors for more information.

System Requirements#

• Install Node.js 14.19.0

Sign up for Edgio#

Deploying requires an account on Edgio. Sign up here for free.

Install the Edgio CLI#

If you have not already done so, install the Edgio CLI.

With npm:

1npm i -g @layer0/cli

With yarn:

1yarn global add @layer0/cli

Getting Started#

If you don’t already have a Gatsby application, you can create one using:

1npm install -g gatsby-cli
2gatsby new gatsby-site https://github.com/gatsbyjs/gatsby-starter-hello-world

You should now have a working Gatsby site. Run gatsby develop to see the application running on localhost:8000.

Configure your project for Edgio by running the following command in your project’s root directory:

10 init

This will automatically add all of the required dependencies and files to your project. These include:

• The @layer0/core package
• The @layer0/gatsby package
• The @layer0/cli package
• layer0.config.js
• routes.js - A default routes file that sends all requests to your Gatsby static site. Update this file to add caching or proxy some URLs to a different origin.

Running Locally#

You can test the integration of the App Platform router with your gatsby site locally using:

10 dev

Deploying#

Deploy your app to the App Platform by running the following command in your project’s root directory:

10 deploy

See Deploying guide for more information.

Routing#

The default routes.js file created by 0 init sends all requests to the Gatsby static site.

1// This file was automatically added by 0 deploy.
2// You should commit this file to source control.
3
4const { Router } = require('@layer0/core/router')
5const { gatsbyRoutes } = require('@layer0/gatsby')
6
7module.exports = new Router()
8  // Prevent search engine bot(s) from indexing
9  // Read more on: https://docs.layer0.co/guides/cookbook#blocking-search-engine-crawlers
10  .noIndexPermalink()
11  .use(gatsbyRoutes)

Adding routes to a different origin#

To proxy some URLs to a different origin, you need first to configure that origin in your layer0.config.js file.

For example:

1// layer0.config.js
2
3module.exports = {
4  backends: {
5    legacy: {
6      domainOrIp: process.env.LEGACY_BACKEND_DOMAIN || 'legacy.my-site.com',
7      hostHeader: process.env.LEGACY_BACKEND_HOST_HEADER || 'legacy.my-site.com',
8    },
9  },
10}

Using environment variables here allows you to configure different legacy domains for each Edgio environment.

Then you can add routing and caching rules to your routes.js file. Note that gatsbyRoute must be declared last as it acts as a fallback route.

For example:

1// routes.js
2
3const { Router } = require('@layer0/core/router')
4const { gatsbyRoutes } = require('@layer0/gatsby')
5
6module.exports = new Router()
7  // Prevent search engine bot(s) from indexing
8  // Read more on: https://docs.layer0.co/guides/cookbook#blocking-search-engine-crawlers
9  .noIndexPermalink()
10  .get('/some/legacy/url/:p', ({ proxy }) => {
11    proxy('legacy')
12  })
13  .use(gatsbyRoutes)

Check Routing and Caching guides for more information.