From cc9672b2eb5c0ae140d87a6deae699669168eee6 Mon Sep 17 00:00:00 2001 From: Chihab Otmani Date: Mon, 8 Apr 2024 08:44:27 +0000 Subject: [PATCH] doc: add documentation for runtime option --- README.md | 9 +++++--- packages/angular/README.md | 40 +++++++++++++++++++++++++---------- packages/angular/package.json | 2 +- 3 files changed, 36 insertions(+), 15 deletions(-) diff --git a/README.md b/README.md index 2e6dd28..00f1130 100644 --- a/README.md +++ b/README.md @@ -17,11 +17,11 @@ Here are some of the benefits of using `dotenv-run`: | Integration | Package | Status | | --------------- | ----------------------------------------- | ------ | | CLI | [@dotenv-run/cli](#dotenv-runcli) | ✅ | -| Core | [@dotenv-run/core](#dotenv-runcore) | ✅ | +| Core | [@dotenv-run/core](#dotenv-runcore) | ✅ | | ESBuild | [@dotenv-run/esbuild](#dotenv-runesbuild) | ✅ | | Rollup | [@dotenv-run/rollup](#dotenv-runrollup) | ✅ | -| Vite | [@dotenv-run/rollup](#dotenv-runrollup) | ✅ | -| Node.js preload | @dotenv-run/load | ✅ | +| Vite | [@dotenv-run/rollup](#dotenv-runrollup) | ✅ | +| Node.js preload | @dotenv-run/load | ✅ | | Angular | [@ngx-env/builder](#ngx-envbuilder) | ✅ | ## Quick start @@ -152,6 +152,7 @@ await build({ [`@ngx-env/builder`](https://www.npmjs.com/package/@ngx-env/builder) is a plugin for Angular CLI and a wrapper around `@dotenv-run/esbuild` or `@dotenv-run/webpack` that can be used to inject environment variables into your Angular applications. - ✅ Official recommendation in [dotenv documentation](https://www.dotenv.org/docs/frameworks/angular/vercel) 🔥 +- ✅ Runtime environment variables (Experimental) 🎉 - ✅ Webpack and ESBuild support 🚀 - ✅ Easy to use, no configuration required - ✅ Up to date with latest Angular versions @@ -216,6 +217,8 @@ Configuration options can be passed to `@ngx-env/builder` using `ngxEnv` section } ``` +If you want to update the environment variables at runtime, you can use the `runtime` option. + You can find the full `@ngx-env/builder` documentation [here](https://github.com/chihab/dotenv-run/tree/main/packages/angular). ### @dotenv-run/webpack diff --git a/packages/angular/README.md b/packages/angular/README.md index fc7eb36..789a9cb 100644 --- a/packages/angular/README.md +++ b/packages/angular/README.md @@ -9,6 +9,7 @@ - ✅ Official recommendation in [dotenv documentation](https://www.dotenv.org/docs/frameworks/angular/vercel) 🔥 - ✅ Webpack and ESBuild support 🚀 +- ✅ Runtime environment variables (Experimental) 🎉 - ✅ Loading priorities of environment variables with Monorepo Support ([Nx](https://nx.dev), [Turbo](https://turbo.build/), etc.) ✨ - ✅ Easy to use, no configuration required - ✅ Up to date with latest Angular versions @@ -227,6 +228,27 @@ You can also access the environment variables starting with `NG_APP_` in the `in ``` +## Runtime Environment Variables (Experimental) + +By default, environment variables are embedded during the build time which means they are static and cannot be changed at runtime. + +If you want to change the environment variables at runtime, you can use the `runtime` option in the `angular.json` configuration. + +```json +"ngxEnv": { + "prefix": "NG_APP_", + "runtime": true +} +``` + +When you set the `runtime` option to `true`, a new environment file will be created during the build with the name `ngx-env.js` in the build output directory containing the environment variables that match the prefix. You can change the environment variables at runtime by modifying this file. + +```ts +globalThis._NGX_ENV_ = { + NG_APP_VERSION: "10.0.0", +}; +``` + # Defining Environment Variables ## Command Line @@ -471,19 +493,15 @@ Usage `process.env` might introduce typing issues depending on whether your work ## Declare your environment variables in the generated `.env.d.ts` file ```ts -interface ImportMeta { - readonly env: ImportMetaEnv; +declare interface Env { + readonly NODE_ENV: string; + // Replace the following with your own environment variables, for example: + // readonly NG_APP_VERSION: string; + [key: string]: any; } -interface ImportMetaEnv { - /** - * Built-in environment variable. - * @see Docs https://github.com/chihab/dotenv-run/packages/angular#ng_app_env. - */ - readonly NG_APP_ENV: string; - // Add your environment variables below - // readonly NG_APP_API_URL: string; - [key: string]: any; +declare interface ImportMeta { + readonly env: Env; } ``` diff --git a/packages/angular/package.json b/packages/angular/package.json index 7df4a10..ba42125 100644 --- a/packages/angular/package.json +++ b/packages/angular/package.json @@ -1,6 +1,6 @@ { "name": "@ngx-env/builder", - "version": "17.3.0-alpha.0", + "version": "17.3.0", "description": "Easily inject environment variables into your Angular applications", "author": "chihab ", "homepage": "https://github.com/chihab/ngx-env/tree/main/packages/angular",