Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/luanbitar/gatsby-env-variables
Gatsby plugin to provide custom environment variables in client-side
https://github.com/luanbitar/gatsby-env-variables
env environment environment-variables environments gatsby gatsby-plugin gatsbyjs variables
Last synced: 3 months ago
JSON representation
Gatsby plugin to provide custom environment variables in client-side
- Host: GitHub
- URL: https://github.com/luanbitar/gatsby-env-variables
- Owner: luanbitar
- License: cc0-1.0
- Created: 2019-12-04T17:11:25.000Z (about 5 years ago)
- Default Branch: master
- Last Pushed: 2023-10-11T00:08:05.000Z (over 1 year ago)
- Last Synced: 2024-09-21T10:27:59.311Z (5 months ago)
- Topics: env, environment, environment-variables, environments, gatsby, gatsby-plugin, gatsbyjs, variables
- Language: JavaScript
- Homepage: https://www.gatsbyjs.org/packages/gatsby-env-variables/?=env
- Size: 34.2 KB
- Stars: 19
- Watchers: 3
- Forks: 5
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- Funding: .github/FUNDING.yml
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
gatsby-env-variables
Webpack feature to provide your custom environment variables in client side
Use `BUILD_ENV` to chose wich environment file to load and `THEME` to chose theme variables together
## Install
`$ npm i gatsby-env-variables`
or
`$ yarn add gatsby-env-variables`
## How to use
Add the plugin to your `gatsby-config.js`.
```javascript
module.exports = {
plugins: [
`gatsby-env-variables`
]
}
```
Create your's `environment.js` files inside `env/` folder, on root of your project, file `index.js` will be the file with variables shared between multiple environments, if you chose other env, these variables will be merged
```bash
project/
├── env/
├── index.js
├── development.js
├── staging.js
└── production.js
```
index.js
```javascript
module.exports = {
API_ROOT: "example.com",
CARDS: "/cards",
}
```
staging.js
```javascript
module.exports = {
API_ROOT: "stg.example.com",
}
```
Run your yarn/npm script with `BUILD_ENV` variable to chose your environment, default selected is `development`
package.json
```bash
BUILD_ENV=staging yarn start
```
# Use in client-side
## Global variables
```javascript
/* globals API_ROOT, CARDS */
function Example() {
const cardsURL = API_ROOT + CARDS // stg.example.com/cards
fetch(cardsURL)
}
```
If you don't want to use `/* globals */` in each file, just create an empty `.eslintrc` file in your project folder. If you are using eslint, just disable the `no-undef` rule.
## Importing variables
```javascript
import { API_ROOT, CARDS } from "gatsby-env-variables"
function Example() {
const cardsURL = API_ROOT + CARDS // stg.example.com/cards
fetch(cardsURL)
}
```
# Using themes
You can have multiple themes, with multiple environments, just put your variables inside the name of theme, and use `THEME=example` on your running script
staging.js
```javascript
module.exports = {
API_ROOT: "stg.example.com",
dark: {
CARDS: "/dark_cards",
}
}
```
package.json
```bash
THEME=dark BUILD_ENV=staging yarn start
```
Use in client-side
```javascript
function Example() {
const cardsURL = API_ROOT + CARDS // stg.example.com/dark_cards
fetch(cardsURL)
}
```
## Nested Objects
String values are not required, you can use nested objects too
staging.js
```javascript
module.exports = {
API: {
CARDS: "/cards"
}
dark: {
API_ROOT: "darkexample.com"
}
}
```
## Async variables
If you have to put dynamic variables in you environment, like values coming from API or something like this, you can export an promise
staging.js
```javascript
module.exports = new Promise(async res => {
const ROOT_API = "example.com"
const CARDS = "/cards"
const response = await fetch(ROOT_API + CARDS)
const ACTIVE_CARDS = await response.json()
const envs = {
ROOT_API,
CARDS,
ACTIVE_CARDS,
dark: {
CARDS: "/dark_cards",
},
orange: {
CARDS: "/orange_cards",
},
}
res(envs)
})
```
# Options
### `envFolderPath`
This options allows you to specify which folder will stay your `.env` files
Example:
```javascript
module.exports = {
plugins: [
{
resolve: `gatsby-env-variables`,
options: {
envFolderPath: `src/env/`
}
}
]
}
```
```bash
project/
├── src/
├── env/
├── index.js
├── development.js
├── staging.js
└── production.j
```
Or you can use this option to rename to `config/` folder too
Example:
```javascript
module.exports = {
plugins: [
{
resolve: `gatsby-env-variables`,
options: {
envFolderPath: `config/`
}
}
]
}
```
```bash
project/
├── config/
├── index.js
├── development.js
├── staging.js
└── production.jn
```
## Further reading
Check out the [DefinePlugin section][1] of the Webpack config documentation for more information.
[1]: https://webpack.js.org/plugins/define-plugin/