Package Exports

gatsby-env-variables

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (gatsby-env-variables) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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

$ 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