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