Environment Variables

You can easily provide environment variables to your site.

For JavaScript loaded into the browser, just add a .env.development and/or .env.production file in your root folder for development or production builds respectively. The environment variables are embedded during build time using Webpack’s DefinePlugin. Because these variables are provided at build time, you will need restart your dev server or rebuild your site after changing them.

In addition to .env.* files, any variable in the environment prefixed with GATSBY_ will be made available in browser JavaScript.

To add environment variables for the JavaScript run in node.js, e.g. in gatsby-config.js or gatsby-node.js, you can add environment variables the normal ways e.g. when calling gatsby on the command line or by adding environment variables through your hosting/build tool.

If you want to access variables in .env.* files in your node.js code, use the NPM package dotenv. Once you’ve installed dotenv and followed their setup instructions, you can use your environment variables in the same way as shown in the example below.

Example

# Example .env.development file

API_URL=https://dev.example.com/api

# Example .env.production file

API_URL=https://example.com/api

These variables will be available to your site as process.env.API_URL.

Example

GATSBY_ASSETS_URL=http://s3.amazonaws.com/bucketname

// usage
render() {
  return (
    <div>
      <img src={`${process.env.GATSBY_ASSETS_URL}/logo.png`} alt="Logo" />
    </div>
  )
}

You can not override certain environment variables as some are used internally for optimizations during build

Reserved environment variables:

• NODE_ENV
• PUBLIC_DIR