gatsby-env-variables

gatsby-env-variables

Webpack feature to provide your custom environment env in client side Use BUILD_ENV to chose current .env file

Install

$ npm i gatsby-env-variables

or

$ yarn add gatsby-env-variables

How to use

Add the plugin to your gatsby-config.js.

module.exports = {
  plugins: [
    `gatsby-env-variables`
  ]
}

Create your's .env files inside env/ folder, on root of your project, file .env will be default variable values, if you chose other env, these variables will be merged

project/
├── env/
  ├── .env
  ├── .env.development
  ├── .env.staging
  └── .env.production

.env

COMMON=default

.env.staging

COMMON=staging
HAS_HEADER=true

Run your yarn/npm script with BUILD_ENV variable to chose your environment, default selected is development

package.json

BUILD_ENV=staging yarn start

Use in client-side

/* globals HAS_HEADER, COMMON */

function Example() {
  console.log(COMMON) // staging
  return HAS_HEADER && <Header />
}

Options

envFolderPath

This options allows you to specify which folder will stay your .env files

Example:

module.exports = {
  plugins: [
    {
      resolve: `gatsby-env-variables`,
      options: {
        envFolderPath: `src/env/`
      }
    }
  ]
}

project/
├── src/
  ├── env/
    ├── .env
    ├── .env.development
    ├── .env.staging
    └── .env.production

Or you can use this option to rename to config/ folder too

Example:

module.exports = {
  plugins: [
    {
      resolve: `gatsby-env-variables`,
      options: {
        envFolderPath: `config/`
      }
    }
  ]
}

project/
├── config/
  ├── .env
  ├── .env.development
  ├── .env.staging
  └── .env.production

Further reading

Check out the DefinePlugin section of the Webpack config documentation for more information.