Deploy a Gatsby.js App to Gatsby Edge Network

Deploy a Gatsby.js app with an encrypted .env.vault file to Gatsby Edge.

Initial setup

Generate a gatsby.js application.

npm init gatsby

This will create a handful of files.

ls -1
README.md
gatsby-config.js
node_modules/
package-lock.json
package.json
src/

Install the latest dotenv. This is important because the Gatsby framework is currently using an old version of dotenv without .env.vault support.

npm install dotenv --save

Edit src/pages/index.js to the following.

import * as React from "react"

const IndexPage = () => {
  return (
    <div>Hello {process.env.GATSBY_HELLO}.</div>
  )
}

export default IndexPage

Require dotenv at the top of gatsby-config.js.

/**
 * @type {import('gatsby').GatsbyConfig}
 */
require('dotenv').config()
console.log(process.env) // for debugging purposes. remove when ready.

module.exports = {
  siteMetadata: {
    title: `gatsby-edge`,
    siteUrl: `https://www.yourdomain.tld`,
  },
  plugins: [],
}

Create .env file.

# .env
GATSBY_HELLO="World"

Run Gatsby.

npm run develop
started server on http://localhost:8000/

Visit localhost:8000

Perfect. process.env now has the keys and values you defined in your .env file.

That covers local development. Let's solve for production next.

Build .env.vault

Push your latest .env file changes and edit your production secrets. Learn more about syncing

npx dotenv-vault@latest push
npx dotenv-vault@latest open production

Use the UI to configure those secrets per environment.

dotenv.org

Then build your encrypted .env.vault file.

npx dotenv-vault@latest build

Its contents should look something like this.

#/-------------------.env.vault---------------------/
#/         cloud-agnostic vaulting standard         /
#/   [how it works](https://dotenv.org/env-vault)   /
#/--------------------------------------------------/

# development
DOTENV_VAULT_DEVELOPMENT="/HqNgQWsf6Oh6XB9pI/CGkdgCe6d4/vWZHgP50RRoDTzkzPQk/xOaQs="
DOTENV_VAULT_DEVELOPMENT_VERSION=2

# production
DOTENV_VAULT_PRODUCTION="x26PuIKQ/xZ5eKrYomKngM+dO/9v1vxhwslE/zjHdg3l+H6q6PheB5GVDVIbZg=="
DOTENV_VAULT_PRODUCTION_VERSION=2

Set DOTENV_KEY

Fetch your production DOTENV_KEY.

npx dotenv-vault@latest keys production
# outputs: dotenv://:[email protected]/vault/.env.vault?environment=production

Test production DOTENV_KEY locally using the CLI.

DOTENV_KEY='dotenv://:[email protected]/vault/.env.vault?environment=production' npm run develop

Next set up your site on Gatsby Edge and then set the DOTENV_KEY as an environment variable.

Deploy

Commit those changes safely to code and deploy.

That's it! When the build runs, your .env.vault file will be decrypted and its production secrets injected as environment variables – just-in-time.

You'll know things worked correctly when you see 'Loading env from encrypted .env.vault' in your logs. If a DOTENV_KEY is not set (for example when developing on your local machine) it will fall back to standard dotenv functionality.

If successful you'll see the message Loading env from encrypted .env.vault in your Gatsby Edge Network logs.

gatsbyjs.com/dashboard