diff options
Diffstat (limited to 'docs/src')
| -rw-r--r-- | docs/src/pages/guides/environment-variables.md | 12 |
1 files changed, 7 insertions, 5 deletions
diff --git a/docs/src/pages/guides/environment-variables.md b/docs/src/pages/guides/environment-variables.md index 1f7f396ad..178cb276b 100644 --- a/docs/src/pages/guides/environment-variables.md +++ b/docs/src/pages/guides/environment-variables.md @@ -4,25 +4,27 @@ title: Using environment variables description: Learn how to use environment variables in an Astro project. --- -Astro uses Vite for environment variables, and allows you to use any of its methods to get and set environment variables. Note that all environment variables must be prefixed with `VITE_` to be accessible by client side code. +Astro uses Vite for environment variables, and allows you to use any of its methods to get and set environment variables. Note that all environment variables must be prefixed with `PUBLIC_` to be accessible by client side code. + +The ability to access private variables on the server side is [still being discussed](https://github.com/snowpackjs/astro/issues/1765). ## Setting environment variables -Vite includes `dotenv` by default, allowing you to easily set environment variables with no configuration in Astro projects. You can also attach a mode (either `production` or `development`) to the filename, like `.env.production` or `.env.development`, which makes the environment variables only take effect in that mode. +Vite includes `dotenv` by default, allowing you to easily set environment variables without any extra configuration in Astro projects. You can also attach a mode (either `production` or `development`) to the filename, like `.env.production` or `.env.development`, which makes the environment variables only take effect in that mode. Just create a `.env` file in the project directory and add some variables to it. ```bash # .env -VITE_POKEAPI="https://pokeapi.co/api/v2" +PUBLIC_POKEAPI="https://pokeapi.co/api/v2" ``` ## Getting environment variables -Instead of using `process.env`, with Vite you use `import.meta.env`, which uses the `import.meta` feature added in ES2020 (don't worry about browser support though, Vite replaces all `import.meta.env` mentions with static values). For example, to get the `VITE_POKEAPI` environment variable, you could use `import.meta.env.VITE_POKEAPI`. +Instead of using `process.env`, with Vite you use `import.meta.env`, which uses the `import.meta` feature added in ES2020 (don't worry about browser support though, Vite replaces all `import.meta.env` mentions with static values). For example, to get the `PUBLIC_POKEAPI` environment variable, you could use `import.meta.env.PUBLIC_POKEAPI`. ```js -fetch(`${import.meta.env.VITE_POKEAPI}/pokemon/squirtle` +fetch(`${import.meta.env.PUBLIC_POKEAPI}/pokemon/squirtle`) ``` > ⚠️WARNING⚠️: |