From 7e46209f41723976fbd4108bd022274fed8723e3 Mon Sep 17 00:00:00 2001 From: Dan Jutan Date: Wed, 14 Sep 2022 15:56:26 -0400 Subject: [PATCH 01/10] note that env variables can't be used in config files --- src/pages/en/guides/environment-variables.md | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/pages/en/guides/environment-variables.md b/src/pages/en/guides/environment-variables.md index 0ce74606cc854..f833add0d6262 100644 --- a/src/pages/en/guides/environment-variables.md +++ b/src/pages/en/guides/environment-variables.md @@ -68,7 +68,8 @@ const data = fetch(`${import.meta.env.PUBLIC_POKEAPI}/pokemon/squirtle`); ``` :::caution -Because Vite statically replaces `import.meta.env`, you cannot access it with dynamic keys like `import.meta.env[key]`. +- Because Vite statically replaces `import.meta.env`, you cannot access it with dynamic keys like `import.meta.env[key]`. +- Environment variables are not available inside Astro config files. ::: ## IntelliSense for TypeScript From 6fdbbfc469a680e63f24a5635026e2cf636d2900 Mon Sep 17 00:00:00 2001 From: Dan Jutan Date: Wed, 14 Sep 2022 16:00:32 -0400 Subject: [PATCH 02/10] add note to configuring astro --- src/pages/en/guides/configuring-astro.md | 4 ++++ src/pages/en/guides/environment-variables.md | 2 +- 2 files changed, 5 insertions(+), 1 deletion(-) diff --git a/src/pages/en/guides/configuring-astro.md b/src/pages/en/guides/configuring-astro.md index d12c2ed6f0fc0..fd976be01c8df 100644 --- a/src/pages/en/guides/configuring-astro.md +++ b/src/pages/en/guides/configuring-astro.md @@ -140,6 +140,10 @@ export default defineConfig({ This can be helpful if you have scripts with names that might be impacted by ad blockers (e.g. `ads.js` or `google-tag-manager.js`). +## Environment Variables +Environment variables can normally be accessed with `import.meta.env`, but not in configuration files. Astro is unable to load `.env` files as the files to load can only be determined after evaluating the Astro config. + + ## Configuration Reference 📚 Read Astro's [API configuration reference](/en/reference/configuration-reference/) for a full overview of all supported configuration options. diff --git a/src/pages/en/guides/environment-variables.md b/src/pages/en/guides/environment-variables.md index f833add0d6262..1f71a30ae3b96 100644 --- a/src/pages/en/guides/environment-variables.md +++ b/src/pages/en/guides/environment-variables.md @@ -69,7 +69,7 @@ const data = fetch(`${import.meta.env.PUBLIC_POKEAPI}/pokemon/squirtle`); :::caution - Because Vite statically replaces `import.meta.env`, you cannot access it with dynamic keys like `import.meta.env[key]`. -- Environment variables are not available inside Astro config files. +- Environment variables are not available inside configuration files. ::: ## IntelliSense for TypeScript From 6909d99b2db4cd6e5f94a96b622c0b426a386ccf Mon Sep 17 00:00:00 2001 From: Dan Jutan Date: Fri, 16 Sep 2022 11:22:19 -0400 Subject: [PATCH 03/10] rephrase and mention process.env --- src/pages/en/guides/configuring-astro.md | 3 ++- src/pages/en/guides/environment-variables.md | 2 +- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/src/pages/en/guides/configuring-astro.md b/src/pages/en/guides/configuring-astro.md index fd976be01c8df..37e8ea843bbf4 100644 --- a/src/pages/en/guides/configuring-astro.md +++ b/src/pages/en/guides/configuring-astro.md @@ -141,8 +141,9 @@ export default defineConfig({ This can be helpful if you have scripts with names that might be impacted by ad blockers (e.g. `ads.js` or `google-tag-manager.js`). ## Environment Variables -Environment variables can normally be accessed with `import.meta.env`, but not in configuration files. Astro is unable to load `.env` files as the files to load can only be determined after evaluating the Astro config. +Astro evaluates configuration files before it loads your other files. As such, you can't use `import.meta.env` or access environment variables that were set in `.env` files. +You can use `process.env` in a configuration file to access other environment variables, like those set by the CLI. ## Configuration Reference diff --git a/src/pages/en/guides/environment-variables.md b/src/pages/en/guides/environment-variables.md index 1f71a30ae3b96..f5263d5ca7279 100644 --- a/src/pages/en/guides/environment-variables.md +++ b/src/pages/en/guides/environment-variables.md @@ -69,7 +69,7 @@ const data = fetch(`${import.meta.env.PUBLIC_POKEAPI}/pokemon/squirtle`); :::caution - Because Vite statically replaces `import.meta.env`, you cannot access it with dynamic keys like `import.meta.env[key]`. -- Environment variables are not available inside configuration files. +- `import.meta.env` and `.env` files are not available inside [configuration files](/en/guides/configuring-astro#environment-variables). ::: ## IntelliSense for TypeScript From 96ff6a02a475491bec4f486ad4c3fa54a2f8301b Mon Sep 17 00:00:00 2001 From: Dan Jutan Date: Fri, 16 Sep 2022 18:29:43 -0400 Subject: [PATCH 04/10] add section on setting env variables with cli --- src/pages/en/guides/environment-variables.md | 26 ++++++++++++++++++++ 1 file changed, 26 insertions(+) diff --git a/src/pages/en/guides/environment-variables.md b/src/pages/en/guides/environment-variables.md index f5263d5ca7279..210b485024a72 100644 --- a/src/pages/en/guides/environment-variables.md +++ b/src/pages/en/guides/environment-variables.md @@ -2,6 +2,7 @@ layout: ~/layouts/MainLayout.astro title: Using environment variables description: Learn how to use environment variables in an Astro project. +setup: import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro' i18nReady: true --- @@ -28,6 +29,7 @@ Astro includes a few environment variables out-of-the-box: ## Setting environment variables +### `.env` files Environment variables can be loaded from `.env` files in your project directory. 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. @@ -49,6 +51,30 @@ PUBLIC_POKEAPI="https://pokeapi.co/api/v2" .env.[mode].local # only loaded in specified mode, ignored by git ``` +### Using the CLI +You can also add environment variables as you run your project: + + + + ```shell + POKEAPI=https://pokeapi.co/api/v2 yarn run dev + ``` + + + ```shell + POKEAPI=https://pokeapi.co/api/v2 npm run dev + ``` + + + ```shell + POKEAPI=https://pokeapi.co/api/v2 pnpm run dev + ``` + + + +:::caution +Variables set this way will be available everywhere within your project, including on the client. +::: ## Getting environment variables Instead of using `process.env`, with Vite you use `import.meta.env`, which uses the `import.meta` feature added in ES2020. From 01a740e4c773113b9cb2751b1267fabe3c9d49c6 Mon Sep 17 00:00:00 2001 From: Dan Jutan Date: Fri, 16 Sep 2022 18:31:09 -0400 Subject: [PATCH 05/10] move the caution to the overview --- src/pages/en/guides/configuring-astro.md | 2 +- src/pages/en/guides/environment-variables.md | 7 +++++-- 2 files changed, 6 insertions(+), 3 deletions(-) diff --git a/src/pages/en/guides/configuring-astro.md b/src/pages/en/guides/configuring-astro.md index 37e8ea843bbf4..ba33290c4bcff 100644 --- a/src/pages/en/guides/configuring-astro.md +++ b/src/pages/en/guides/configuring-astro.md @@ -143,7 +143,7 @@ This can be helpful if you have scripts with names that might be impacted by ad ## Environment Variables Astro evaluates configuration files before it loads your other files. As such, you can't use `import.meta.env` or access environment variables that were set in `.env` files. -You can use `process.env` in a configuration file to access other environment variables, like those set by the CLI. +You can use `process.env` in a configuration file to access other environment variables, like those [set by the CLI](/en/guides/environment-variables#using-the-cli). ## Configuration Reference diff --git a/src/pages/en/guides/environment-variables.md b/src/pages/en/guides/environment-variables.md index 210b485024a72..fda9bb710f3c9 100644 --- a/src/pages/en/guides/environment-variables.md +++ b/src/pages/en/guides/environment-variables.md @@ -17,6 +17,10 @@ PUBLIC_ANYBODY=there In this example, `PUBLIC_ANYBODY` (accessible via `import.meta.env.PUBLIC_ANYBODY`) will be available in server or client code, while `SECRET_PASSWORD` (accessible via `import.meta.env.SECRET_PASSWORD`) will be server-side only. +:::caution +`import.meta.env` and `.env` files are not available inside [configuration files](/en/guides/configuring-astro#environment-variables). +::: + ## Default environment Variables Astro includes a few environment variables out-of-the-box: @@ -94,8 +98,7 @@ const data = fetch(`${import.meta.env.PUBLIC_POKEAPI}/pokemon/squirtle`); ``` :::caution -- Because Vite statically replaces `import.meta.env`, you cannot access it with dynamic keys like `import.meta.env[key]`. -- `import.meta.env` and `.env` files are not available inside [configuration files](/en/guides/configuring-astro#environment-variables). +Because Vite statically replaces `import.meta.env`, you cannot access it with dynamic keys like `import.meta.env[key]`. ::: ## IntelliSense for TypeScript From 0fb8d0d744100fabdeb31dededc30239f8693b4a Mon Sep 17 00:00:00 2001 From: Dan Jutan Date: Fri, 16 Sep 2022 18:40:02 -0400 Subject: [PATCH 06/10] fix links --- src/pages/en/guides/configuring-astro.md | 2 +- src/pages/en/guides/environment-variables.md | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/pages/en/guides/configuring-astro.md b/src/pages/en/guides/configuring-astro.md index ba33290c4bcff..ca77e724c3ea6 100644 --- a/src/pages/en/guides/configuring-astro.md +++ b/src/pages/en/guides/configuring-astro.md @@ -143,7 +143,7 @@ This can be helpful if you have scripts with names that might be impacted by ad ## Environment Variables Astro evaluates configuration files before it loads your other files. As such, you can't use `import.meta.env` or access environment variables that were set in `.env` files. -You can use `process.env` in a configuration file to access other environment variables, like those [set by the CLI](/en/guides/environment-variables#using-the-cli). +You can use `process.env` in a configuration file to access other environment variables, like those [set by the CLI](/en/guides/environment-variables/#using-the-cli). ## Configuration Reference diff --git a/src/pages/en/guides/environment-variables.md b/src/pages/en/guides/environment-variables.md index fda9bb710f3c9..d36b5d0b6806a 100644 --- a/src/pages/en/guides/environment-variables.md +++ b/src/pages/en/guides/environment-variables.md @@ -18,7 +18,7 @@ PUBLIC_ANYBODY=there In this example, `PUBLIC_ANYBODY` (accessible via `import.meta.env.PUBLIC_ANYBODY`) will be available in server or client code, while `SECRET_PASSWORD` (accessible via `import.meta.env.SECRET_PASSWORD`) will be server-side only. :::caution -`import.meta.env` and `.env` files are not available inside [configuration files](/en/guides/configuring-astro#environment-variables). +`import.meta.env` and `.env` files are not available inside [configuration files](/en/guides/configuring-astro/#environment-variables). ::: ## Default environment Variables From edae13ad0b28ee8bd27decbc97f5f5597d7ed31a Mon Sep 17 00:00:00 2001 From: Dan Jutan Date: Mon, 19 Sep 2022 11:17:08 -0400 Subject: [PATCH 07/10] reformat default environment variables section --- src/pages/en/guides/environment-variables.md | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/src/pages/en/guides/environment-variables.md b/src/pages/en/guides/environment-variables.md index d36b5d0b6806a..571c1b821325f 100644 --- a/src/pages/en/guides/environment-variables.md +++ b/src/pages/en/guides/environment-variables.md @@ -6,7 +6,7 @@ setup: import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astr i18nReady: true --- -Astro uses Vite for environment variables, and allows you to [use any of its methods](https://vitejs.dev/guide/env-and-mode.html) to get and set environment variables. +Astro uses Vite's built-in support for environment variables, and lets you [use any of its methods](https://vitejs.dev/guide/env-and-mode.html) to work with them. Note that while _all_ environment variables are available in server-side code, only environment variables prefixed with `PUBLIC_` are available in client-side code for security purposes. @@ -25,11 +25,11 @@ In this example, `PUBLIC_ANYBODY` (accessible via `import.meta.env.PUBLIC_ANYBOD Astro includes a few environment variables out-of-the-box: -- `import.meta.env.MODE` (`development` | `production`): the mode your site is running in. This is `development` when running `astro dev` and `production` when running `astro build`. -- `import.meta.env.BASE_URL` (`string`): the base url your site is being served from. This is determined by the [`base` config option](/en/reference/configuration-reference/#base). -- `import.meta.env.PROD` (`boolean`): whether your site is running in production. -- `import.meta.env.DEV` (`boolean`): whether your site is running in development (always the opposite of `import.meta.env.PROD`). -- `import.meta.env.SITE` (`string`): [The `site` option](/en/reference/configuration-reference/#site) specified in your project's `astro.config`. +- `import.meta.env.MODE`: The mode your site is running in. This is `development` when running `astro dev` and `production` when running `astro build`. +- `import.meta.env.PROD`: `true` if your site is running in production; `false` otherwise. +- `import.meta.env.DEV`: `true` if your site is running in development; `false` otherwise. Always the opposite of `import.meta.env.PROD`. +- `import.meta.env.BASE_URL`: The base url your site is being served from. This is determined by the [`base` config option](/en/reference/configuration-reference/#base). +- `import.meta.env.SITE`: This is set to the [the `site` option](/en/reference/configuration-reference/#site) specified in your project's `astro.config`. ## Setting environment variables From c486bf7d6ce572d0055f1cee646258a2894f993b Mon Sep 17 00:00:00 2001 From: Dan Jutan Date: Mon, 19 Sep 2022 11:37:28 -0400 Subject: [PATCH 08/10] replace .env file snippet with reference to vite docs (where it was copied from) --- src/pages/en/guides/environment-variables.md | 8 +------- 1 file changed, 1 insertion(+), 7 deletions(-) diff --git a/src/pages/en/guides/environment-variables.md b/src/pages/en/guides/environment-variables.md index 571c1b821325f..c44fc74e8be88 100644 --- a/src/pages/en/guides/environment-variables.md +++ b/src/pages/en/guides/environment-variables.md @@ -47,13 +47,7 @@ DB_PASSWORD="foobar" PUBLIC_POKEAPI="https://pokeapi.co/api/v2" ``` -```yaml -# Supported file names: -.env # loaded in all cases -.env.local # loaded in all cases, ignored by git -.env.[mode] # only loaded in specified mode -.env.[mode].local # only loaded in specified mode, ignored by git -``` +For more on `.env` files, [see the Vite documentation](https://vitejs.dev/guide/env-and-mode.html#env-files). ### Using the CLI You can also add environment variables as you run your project: From a8113646a6efd78209cc8fa6cff17d34e73305e4 Mon Sep 17 00:00:00 2001 From: Dan Jutan Date: Mon, 19 Sep 2022 11:41:52 -0400 Subject: [PATCH 09/10] remove unhelpful tip --- src/pages/en/guides/environment-variables.md | 4 ---- 1 file changed, 4 deletions(-) diff --git a/src/pages/en/guides/environment-variables.md b/src/pages/en/guides/environment-variables.md index c44fc74e8be88..11d807d7f83a9 100644 --- a/src/pages/en/guides/environment-variables.md +++ b/src/pages/en/guides/environment-variables.md @@ -77,10 +77,6 @@ Variables set this way will be available everywhere within your project, includi Instead of using `process.env`, with Vite you use `import.meta.env`, which uses the `import.meta` feature added in ES2020. -:::tip[Don't worry about browser support!] -Vite replaces all `import.meta.env` mentions with static values. -::: - For example, use `import.meta.env.PUBLIC_POKEAPI` to get the `PUBLIC_POKEAPI` environment variable. ```js /(? Date: Mon, 19 Sep 2022 11:42:51 -0400 Subject: [PATCH 10/10] add back consistent casing --- src/pages/en/guides/environment-variables.md | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/pages/en/guides/environment-variables.md b/src/pages/en/guides/environment-variables.md index 11d807d7f83a9..536c9c13b0c39 100644 --- a/src/pages/en/guides/environment-variables.md +++ b/src/pages/en/guides/environment-variables.md @@ -5,7 +5,6 @@ description: Learn how to use environment variables in an Astro project. setup: import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro' i18nReady: true --- - Astro uses Vite's built-in support for environment variables, and lets you [use any of its methods](https://vitejs.dev/guide/env-and-mode.html) to work with them. Note that while _all_ environment variables are available in server-side code, only environment variables prefixed with `PUBLIC_` are available in client-side code for security purposes. @@ -21,7 +20,7 @@ In this example, `PUBLIC_ANYBODY` (accessible via `import.meta.env.PUBLIC_ANYBOD `import.meta.env` and `.env` files are not available inside [configuration files](/en/guides/configuring-astro/#environment-variables). ::: -## Default environment Variables +## Default environment variables Astro includes a few environment variables out-of-the-box: