gatsby-dynamic-routes v0.0.107

gatsby-dynamic-routes

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

Install

$ npm i gatsby-dynamic-routes

or

$ yarn add gatsby-dynamic-routes

How to use

Add the plugin to your gatsby-config.js.

module.exports = {
  plugins: [`gatsby-dynamic-routes`]
}

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-dynamic-routes`,
      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-dynamic-routes`,
      options: {
        envFolderPath: `config/`
      }
    }
  ]
}

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

Recommended plugins

Check out the Dynamic Environment Variables plugin that provides you to load different files based on your env variables