michael/astro
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

docs: update env variable guide (#1990)

Browse source 
* docs: update env variable guide

* docs: add note about access server-side variable access
This commit is contained in:
Nate Moore 2021-11-23 12:21:21 -06:00 committed by GitHub
parent 0fb56bcabf
commit e4002f2958
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 7 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
docs/src/pages/guides/environment-variables.md
View file

@ -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⚠️: