Environment Variables with Gatsby and Netlify

Last week I finally shipped the new site for my apparel company, DVLPR. It’s built with Gatsby and hosted on Netlify. While setting it up, I wanted to add a banner on the top that I could display some information. When I was using a Shopify theme, I could just add an app, and then configure the banner that way, which was easy, but since I am using Gatsby, I don’t have that option.

Enter Gatsby Environment Variables.

Environment Variables are super helpful for hiding sensitive API keys, configuring what environment the app is running in (development, staging, production), API URLs, etc. In this case, I just wanted to either show or hide the banner, and be able to update what the banner text says.

To get started set up a .env.* at the root of your project. You can target different environments with .env.development or .env.production which allows for flexibility depending on your environment. By default Gatsby had two environments:

• Development - when you run gatsby develop

• Production - when you run gatsby build or gatsby serve

Most the time I just use a generic .env file that is used for both environments.

Much like Create React App in order to use the variables on the client, you have to prefix the variable with GATSBY_, so for the two variables I wanted to set up, my .env file looks like this:

GATSBY_SHOW_BANNER=true
GATSBY_BANNER_TEXT=FREE U.S. SHIPPING

NOTE: Do not put any secrets (such as API keys) in the variables prefixed with GATSBY_ they will be embedded into the client-side of your app during build time and therefore will be visible in the code.

To use these variables in your code, you need to use the package dotenv. It is already a dependency of Gatsby, so you just have to require it. Since I wanted to access the variables on the client side, I required it in gatsby-config.js. You can also require it gatsby-node.js depending on your needs.

require("dotenv").config({
  path: `.env.${process.env.NODE_ENV}`,
})

Next time you run gatsby develop you can access your variables in your code using process.env.*

Here is how it looks in my use case:

import React from 'react';
const showBanner =
  process.env.GATSBY_SHOW_BANNER === 'true';
const Banner = () => {
  if (!showBanner) {
    return null;
  }
  return (
    <div>
      {process.env.GATSBY_BANNER_TEXT}
    </div>
  );
};
export default Banner;

Now you can try changing your env variables, restart the process and you should see your changes on the screen.

Setting up env variables on Netlify

Once you have your site up on Netlify, setting up your env variables is super easy.

Go to sites > your_site > Settings > Build & Deploy > Environment

Once you have added your variables, you will have to trigger a deploy so your code picks up your new changes.

You can do that by going to your Deploys tab and then clicking Trigger Deploy.

Boom, you should now see your changes live based on your env variables.

Now when I want to hide the banner or update the text, it’s as easy as changing those env variables in Netlify and triggering a new deploy which can be done right in the Netlify admin.

There are so many other ways to take advantage of environment variables, this was just one use case I found for them.