fix(docs): Environment Variables Examples #10406
Conversation
docs/docs/environment-variables.md
Outdated
| </div> | ||
| ) | ||
| } | ||
| ``` | ||
|
|
||
| `API_KEY` will be available to your site (Server-side) as `process.env.API_KEY`: |
There was a problem hiding this comment.
This is not quite correct - API_KEY will be available on front-side code (if .env file is actually there). What probably need to be better documented is that people shouldn't commit .env files really and use options provided by various CD providers (for example Netlify) to define those. And because of that they should prefix things they want available for frontend with GATSBY_ as .env files won't be used by their CD when building gatsby site
There was a problem hiding this comment.
There was a problem hiding this comment.
Will defer here to @pieh for technical review. Looks great from formatting perspective!
| @@ -47,6 +47,10 @@ In addition to these Project Environment Variables defined in `.env.*` files, yo | |||
| OS Env Vars. OS Env Vars which are prefixed with `GATSBY_` will become available in | |||
| browser JavaScript. | |||
|
|
|||
| ```shell:title=.env.* | |||
There was a problem hiding this comment.
oh, does the name of this file actually include an asterisk?
There was a problem hiding this comment.
The asterisk means that all names are possible (it's a common way to write it like that), that's why it's already used in line 46.
There was a problem hiding this comment.
Yeah, @LekoArts I think this is reasonable.
@shannonbux for clarification, we typically use .env.development and .env.production since those credentials could (and often do) change between environments.
|
@pieh Rewrote the paragraph |
* master: (33 commits) fix(blog): youfit case study typofix Doc improvements to Visual testing with Storybook guide (gatsbyjs#10436) fix(gatsby-plugin-offline): prevent incorrect revisioning of static file by workbox (gatsbyjs#10416) fix(starters): ttag repo link fix typo in pull request template (gatsbyjs#10454) fix(www) Fix query for plugin links always ?=undefined (gatsbyjs#10453) chore(release): Publish fix(gatsby): fix extracting StaticQuery nested in shorthand fragment (gatsbyjs#10443) fix(www): avoid querying for no-cache=1 (gatsbyjs#10389) fix(gatsby-image): update typescript definitions - properly mark fields as optional (gatsbyjs#10419) refactor(gatsby): improve EnsureResources (gatsbyjs#10224) Fixed minor Typos and grammatical errors (gatsbyjs#9353) docs: add ClinciJS website into showcase (gatsbyjs#10437) docs(babel-preset-gatsby): document --save-dev flag in README (gatsbyjs#10434) fix(docs): Environment Variables Examples (gatsbyjs#10406) chore(release): Publish [gatsby-image] re: fade out base64 on full image load (gatsbyjs#7539) docs(starter-library): add example to starter library (gatsbyjs#10425) docs(gatsby-plugin-offline): specify to not HTTP-cache sw.js (gatsbyjs#10430) fix(docs): prompt => confirm (gatsbyjs#10431) ...
* Add example + fix code for ENV var doc * Address michal's suggestions * Update environment-variables.md
I followed the guide yesterday and stumbled across the issue that the guide is for using env vars in the browser is wrong. After prefixing the vars both in the
.env.*and frontend files it worked, e.g.:https://github.com/LekoArts/gatsby-source-tmdb-example/blob/master/src/components/DetailedView.jsx#L264
I added a little example to the client-side part, moved the comments to code block titles and expanded the example while fixing it.