Skip to content

Commit

Permalink
doc: add documentation for runtime option
Browse files Browse the repository at this point in the history
  • Loading branch information
chihab committed Apr 8, 2024
1 parent b169a21 commit cc9672b
Show file tree
Hide file tree
Showing 3 changed files with 36 additions and 15 deletions.
9 changes: 6 additions & 3 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -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
Expand Down
40 changes: 29 additions & 11 deletions packages/angular/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -227,6 +228,27 @@ You can also access the environment variables starting with `NG_APP_` in the `in
</html>
```
## 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
Expand Down Expand Up @@ -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;
}
```
Expand Down
2 changes: 1 addition & 1 deletion packages/angular/package.json
Original file line number Diff line number Diff line change
@@ -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 <chihab@gmail.com>",
"homepage": "https://github.com/chihab/ngx-env/tree/main/packages/angular",
Expand Down

0 comments on commit cc9672b

Please sign in to comment.