Client-side environment variables

With regard to environment variables that need to be available in the client-side JavaScript bundle generated by Gatsby, it’s a best practice to create an environment configuration file, which carries the prefix .env and usually an extension that identifies the environment in question. For a development environment, this takes the form .env.development, whereas for a production environment, the form is .env.production. These files need to be defined in your project root and can contain arbitrary project environment variables that apply to your project:

# .env.development
MY_ENV_VAR_FOR_DEV=foo

# .env.production
MY_ENV_VAR_FOR_PROD=bar

In Gatsby, OS-level environment variables carry the prefix GATSBY_. These will become available in the client-side browser-ready bundle Gatsby creates on your behalf:

# .env.development
GATSBY_DEV_ENV_VAR=foo

# .env.production
GATSBY_PROD_ENV_VAR=bar