Infrastructure/astro
0
Fork 0
mirror of https://github.com/withastro/astro.git synced 2025-01-20 22:12:38 -05:00
Code Issues Activity

Add environment variables docs (Closes #873) (#1587)

Browse source 
* Added environment variables docs (Closes #873)

* Fixed prefix
This commit is contained in:
AsyncBanana 2021-10-20 18:55:12 -04:00 • committed by Drew Powers
parent 560721cbaa
commit 18222cf61b
2 changed files with 30 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
docs/src/config.ts
View file

@ -24,6 +24,7 @@ export const SIDEBAR = {
{ text: 'RSS', link: 'guides/rss' }, { text: 'RSS', link: 'guides/rss' },
{ text: 'Supported Imports', link: 'guides/imports' }, { text: 'Supported Imports', link: 'guides/imports' },
{ text: 'Aliases', link: 'guides/aliases' }, { text: 'Aliases', link: 'guides/aliases' },
{ text: 'Environment Variables', link: 'guides/environment-variables' },
{ text: 'Deploy to the web', link: 'guides/deploy' }, { text: 'Deploy to the web', link: 'guides/deploy' },
{ text: 'Publish to npm', link: 'guides/publish-to-npm' }, { text: 'Publish to npm', link: 'guides/publish-to-npm' },

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

@ -0,0 +1,29 @@
---
layout: ~/layouts/MainLayout.astro
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.
## 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.
Just create a `.env` file in the project directory and add some variables to it.
```bash
# .env
VITE_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`.
```js
fetch(`${import.meta.env.VITE_POKEAPI}/pokemon/squirtle`
```
> ⚠️WARNING⚠️:
> Because Vite statically replaces `import.meta.env`, you cannot access it with dynamic keys like `import.meta.env[key]`.