JSPM

gatsby-env-variables

1.0.2
  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 1577
  • Score
    100M100P100Q115144F
  • License MIT

Use your env variables in client side

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

Version Downloads Total

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 in root of your project

project/
│ package.json
│ .env.development
│ .env.staging
└ .env.production

.env.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

function Example() {
    return process.env.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.development
│	│	├── .env.staging
│	│	└── .env.production

Further reading

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