Development Environment
- Create a new file named as
.env.developmentat the root of your project. - Add your variable to the newly created file. Example -
TEST_KEY=123 - Change your
npm run developcommand to set environment.
For Windows -
"develop": "set GATSBY_ENV=development && gatsby develop"For Linux -
"develop": "GATSBY_ENV=development gatsby develop"- Restart your dev environment. So Gatsby will load your new env file.
- You should be able to access your env variables using
process.env.TEST_KEYin any js file.
Production Environment
- Create a new file named as
.env.productionat the root of your project. - Add your variable to the newly created file. Example -
TEST_KEY=123 - Change your
npm run buildcommand to set environment.
For Windows -
"develop": "set GATSBY_ENV=production && gatsby develop"For Linux -
"build": "GATSBY_ENV=production gatsby build",This is only if you want to build on local.
If you are using any providers like Netlify use the Linux version. You will also need to add environment variables in the service provider.
For Netlify it is inSite Settings > Build&Deploy > Environment
This post was originally published athttps://www.jskap.com/blog/gatsby-add-environment-variables/
👋 Hi! I’m Kapil. I am always chatty about building things, sharing my learnings, freelancing. Come say hi to me athttps://twitter.com/kapilgorve
Top comments(3)
- LocationEarth
- Joined
Hey, please double check before you post. This is incorrect and misleading, please correct or take it down as it just muddies the water for people. There is noGATSBY_ENV that overrides the environments set ingatsby develop andgatsby build.gatsby build sets theNODE_ENV to production internally andgatsby develop setsNODE_ENV to development. If you test something like"develop:bang": "set GATSBY_ENV=bang && gatsby develop" print or console.log the env variables you would see that the command you call aren't doing anything.
Hi Kapil
Thanks for this, sort of got this working on Windows with an env variable. However, when I try to use this env variable in my gatsby-config.js to set a value with my plugins (e.g. Google Analytics tracking ID) it doesn't work. Have you managed to get it working in this gatsby-config.js file?
Hi Andy,
I solved it by adding below to mygatsby-config.js
require("dotenv").config({ path: `.env.${process.env.NODE_ENV}`,})Wrote a note about it attherdnotes.com/building-a-markdown...
HIH ✌
For further actions, you may consider blocking this person and/orreporting abuse
