Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/danduh/ng-process-env
Angular schematics and builder to retrieve values from System Environment (OS) variables and update relevant `environment.ts` file.
https://github.com/danduh/ng-process-env
angular angular-builders angular-schematics builder environment-variables schematics typescript typescript-compiler-api
Last synced: 24 days ago
JSON representation
Angular schematics and builder to retrieve values from System Environment (OS) variables and update relevant `environment.ts` file.
- Host: GitHub
- URL: https://github.com/danduh/ng-process-env
- Owner: danduh
- License: mit
- Created: 2020-04-16T06:39:53.000Z (over 4 years ago)
- Default Branch: main
- Last Pushed: 2023-05-08T13:10:42.000Z (over 1 year ago)
- Last Synced: 2024-08-04T01:06:42.369Z (4 months ago)
- Topics: angular, angular-builders, angular-schematics, builder, environment-variables, schematics, typescript, typescript-compiler-api
- Language: TypeScript
- Homepage:
- Size: 1.55 MB
- Stars: 18
- Watchers: 1
- Forks: 3
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-angular - ng-process-env - Angular schematics and builder to retrieve values from System Environment (OS) variables and update relevant `environment.ts` file. (Table of contents / Angular)
- fucking-awesome-angular - ng-process-env - Angular schematics and builder to retrieve values from System Environment (OS) variables and update relevant `environment.ts` file. (Table of contents / Angular)
- fucking-awesome-angular - ng-process-env - Angular schematics and builder to retrieve values from System Environment (OS) variables and update relevant `environment.ts` file. (Table of contents / Angular)
README
[](https://github.com/danduh/ng-process-env/actions/workflows/main.yml)
# Environment variables from process into Angular app
Angular already has its own environment system, which allows us to configure everything in
src/environments/environment.ts, and we can create as many environments as we need. The problem is, sometimes you want
to use the System Environment variables, for example, some configuration from the CI server or if the build process is
running an "on-premise" server; in this case, the Angular environment system will not help.
**ng-process-env** will help you to retrieve values from System Environment variables (`process.env[]`) and update
relevant `environment.ts` file.
### Installing
Just add it into your app.
```bash
npm i ng-process-env
```
Run
```bash
ng g ng-process-env:process-env
```
> For monorepo managed by NRWL, use `nx` command instead of `ng`
You will be prompted to insert relevant project name.
```bash
? Project name to update angular.json config.
(you can skip and do it later using schematics or manually) my-app
Project my-app will be updated
Env File will be created at apps/my-app/src/environments
```
```bash
? You can set name for config to be updated or added as a new one, 'onprem' - default
```
Define configuration name. It will create:
- `environment..ts` file in your /environments folder.
- `` section in your angular.json or project.json for nrwl managed monorepo
_environment..ts_
```typescript
export const environment = {
production: false,
baseUrl: 'http://localhost:4200',
envVar: {
/**
* Add environment variables you want to retriev from process
* PORT:4200,
* VAR_NAME: defaultValue
*/
}
};
```
_angular.json_ \ _project.json_
```json
{
"targets": {
"build": {
...
"configurations": {
"myconfig": {
"fileReplacements": [
{
"replace": "apps/portfolio/src/environments/environment.ts",
"with": "apps/portfolio/src/environments/environment.myconfig.ts"
}
]
}
}
}
}
}
```
Update `myconfig` section according to your needs
## Collect Vars
Open a created file `environment..ts`
Update `envVar` section with variables you want to be retrieved from `process.env`.
- **Important**: set default values.
```typescript
export const environment = {
production: false,
baseUrl: 'http://localhost:4200',
envVar: {
myVarA: 3,
myVarB: 'someValue'
}
};
```
## _This part can be run during CI/CD process_
To update the created environment..ts file with variables from `process.env`.
```bash
export myVarA=4
export myVarB=otherValue
ng run my-app:collect-vars
```
It will change file to:
```typescript
export const environment = {
production: false,
baseUrl: "http://localhost:4200",
envVar: {
myVarA: 4 as number,
myVarB: "otherValue"
}
};
```
After it, you can run a build command.