
🍿 Minor Changes
-
#14173
39911b8Thanks @florian-lefebvre! - Adds an experimental flagstaticImportMetaEnvto disable the replacement ofimport.meta.envvalues withprocess.envcalls and their coercion of environment variable values. This supersedes therawEnvValuesexperimental flag, which is now removed.Astro allows you to configure a type-safe schema for your environment variables, and converts variables imported via
astro:envinto the expected type. This is the recommended way to use environment variables in Astro, as it allows you to easily see and manage whether your variables are public or secret, available on the client or only on the server at build time, and the data type of your values.However, you can still access environment variables through
process.envandimport.meta.envdirectly when needed. This was the only way to use environment variables in Astro beforeastro:envwas added in Astro 5.0, and Astro’s default handling ofimport.meta.envincludes some logic that was only needed for earlier versions of Astro.The
experimental.staticImportMetaEnvflag updates the behavior ofimport.meta.envto align with Vite’s handling of environment variables and for better ease of use with Astro’s current implementations and features. This will become the default behavior in Astro 6.0, and this early preview is introduced as an experimental feature.Currently, non-public
import.meta.envenvironment variables are replaced by a reference toprocess.env. Additionally, Astro may also convert the value type of your environment variables used throughimport.meta.env, which can prevent access to some values such as the strings"true"(which is converted to a boolean value), and"1"(which is converted to a number).The
experimental.staticImportMetaEnvflag simplifies Astro’s default behavior, making it easier to understand and use. Astro will no longer replace anyimport.meta.envenvironment variables with aprocess.envcall, nor will it coerce values.To enable this feature, add the experimental flag in your Astro config and remove
rawEnvValuesif it was enabled:astro.config.mjs import { defineConfig } from "astro/config";export default defineConfig({experimental: {staticImportMetaEnv: truerawEnvValues: false}});Updating your project
If you were relying on Astro’s default coercion, you may need to update your project code to apply it manually:
src/components/MyComponent.astro const enabled: boolean = import.meta.env.ENABLED;const enabled: boolean = import.meta.env.ENABLED === "true";If you were relying on the transformation into
process.envcalls, you may need to update your project code to apply it manually:src/components/MyComponent.astro const enabled: boolean = import.meta.env.DB_PASSWORD;const enabled: boolean = process.env.DB_PASSWORD;You may also need to update types:
src/env.d.ts interface ImportMetaEnv {readonly PUBLIC_POKEAPI: string;readonly DB_PASSWORD: string;readonly ENABLED: boolean;readonly ENABLED: string;}interface ImportMeta {readonly env: ImportMetaEnv;}namespace NodeJS {interface ProcessEnv {DB_PASSWORD: string;}}See the experimental static
import.meta.envdocumentation for more information about this feature. You can learn more about using environment variables in Astro, includingastro:env, in the environment variables documentation. -
#14122
41ed3acThanks @ascorbic! - Adds experimental support for automatic Chrome DevTools workspace foldersThis feature allows you to edit files directly in the browser and have those changes reflected in your local file system via a connected workspace folder. This allows you to apply edits such as CSS tweaks without leaving your browser tab!
With this feature enabled, the Astro dev server will automatically configure a Chrome DevTools workspace for your project. Your project will then appear as a workspace source, ready to connect. Then, changes that you make in the “Sources” panel are automatically saved to your project source code.
To enable this feature, add the experimental flag
chromeDevtoolsWorkspaceto your Astro config:astro.config.mjs import { defineConfig } from 'astro/config';export default defineConfig({experimental: {chromeDevtoolsWorkspace: true,},});See the experimental Chrome DevTools workspace feature documentation for more information.