{"id":13806684,"url":"https://github.com/danduh/ng-process-env","last_synced_at":"2025-12-30T03:04:07.392Z","repository":{"id":40770060,"uuid":"256130961","full_name":"danduh/ng-process-env","owner":"danduh","description":"Angular schematics and builder to retrieve values from System Environment (OS) variables and update relevant `environment.ts` file.","archived":false,"fork":false,"pushed_at":"2023-05-08T13:10:42.000Z","size":1622,"stargazers_count":19,"open_issues_count":2,"forks_count":3,"subscribers_count":1,"default_branch":"main","last_synced_at":"2024-11-18T22:32:31.392Z","etag":null,"topics":["angular","angular-builders","angular-schematics","builder","environment-variables","schematics","typescript","typescript-compiler-api"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/danduh.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null}},"created_at":"2020-04-16T06:39:53.000Z","updated_at":"2024-08-11T15:01:13.000Z","dependencies_parsed_at":"2023-02-08T09:01:27.538Z","dependency_job_id":"f5d725d0-64e4-4242-952f-5b8327e3b12b","html_url":"https://github.com/danduh/ng-process-env","commit_stats":{"total_commits":39,"total_committers":3,"mean_commits":13.0,"dds":0.4871794871794872,"last_synced_commit":"9a19e5861598f4e112480e69da08bc6ef0f73899"},"previous_names":[],"tags_count":8,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/danduh%2Fng-process-env","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/danduh%2Fng-process-env/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/danduh%2Fng-process-env/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/danduh%2Fng-process-env/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/danduh","download_url":"https://codeload.github.com/danduh/ng-process-env/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254036812,"owners_count":22003655,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular","angular-builders","angular-schematics","builder","environment-variables","schematics","typescript","typescript-compiler-api"],"created_at":"2024-08-04T01:01:14.721Z","updated_at":"2025-12-30T03:04:07.302Z","avatar_url":"https://github.com/danduh.png","language":"TypeScript","readme":"[![ng-process-env CI Process](https://github.com/danduh/ng-process-env/actions/workflows/main.yml/badge.svg)](https://github.com/danduh/ng-process-env/actions/workflows/main.yml)\n\n# Environment variables from process into Angular app\n\nAngular already has its own environment system, which allows us to configure everything in\nsrc/environments/environment.ts, and we can create as many environments as we need. The problem is, sometimes you want\nto use the System Environment variables, for example, some configuration from the CI server or if the build process is\nrunning an \"on-premise\" server; in this case, the Angular environment system will not help.\n\n**ng-process-env** will help you to retrieve values from System Environment variables (`process.env[]`) and update\nrelevant `environment.ts` file.\n\n### Installing\n\nJust add it into your app.\n\n```bash\nnpm i ng-process-env\n```\n\nRun\n\n```bash\nng g ng-process-env:process-env\n```\n\n\u003e For monorepo managed by NRWL, use `nx` command instead of `ng`\n\nYou will be prompted to insert relevant project name.\n\n```bash\n? Project name to update angular.json config. \n(you can skip and do it later using schematics or manually) my-app\n Project my-app will be updated\n    Env File will be created at apps/my-app/src/environments\n```\n\n```bash\n? You can set name for config to be updated or added as a new one, 'onprem' - default \n```\n\nDefine configuration name. It will create:\n\n- `environment.\u003cmyconfig\u003e.ts` file in your /environments folder.\n- `\u003cmyconfig\u003e` section in your angular.json or project.json for nrwl managed monorepo\n\n_environment.\u003cmyconfig\u003e.ts_\n\n```typescript\nexport const environment = {\n    production: false,\n    baseUrl: 'http://localhost:4200',\n    envVar: {\n        /**\n         * Add environment variables you want to retriev from process\n         * PORT:4200,\n         * VAR_NAME: defaultValue\n         */\n    }\n};\n```\n\n_angular.json_ \\ _project.json_\n\n```json\n{\n  \"targets\": {\n    \"build\": {\n      ...\n      \"configurations\": {\n        \"myconfig\": {\n          \"fileReplacements\": [\n            {\n              \"replace\": \"apps/portfolio/src/environments/environment.ts\",\n              \"with\": \"apps/portfolio/src/environments/environment.myconfig.ts\"\n            }\n          ]\n        }\n      }\n    }\n  }\n}\n```\n\nUpdate `myconfig` section according to your needs\n\n## Collect Vars\n\nOpen a created file `environment.\u003cmyconfig\u003e.ts`\n\nUpdate `envVar` section with variables you want to be retrieved from `process.env`.\n\n- **Important**: set default values.\n\n```typescript\nexport const environment = {\n    production: false,\n    baseUrl: 'http://localhost:4200',\n    envVar: {\n        myVarA: 3,\n        myVarB: 'someValue'\n    }\n};\n```\n\n## _This part can be run during CI/CD process_\n\nTo update the created environment.\u003cmyconfig\u003e.ts file with variables from `process.env`.\n\n```bash\nexport myVarA=4\nexport myVarB=otherValue\nng run my-app:collect-vars\n```\n\nIt will change file to:\n\n```typescript\nexport const environment = {\n    production: false,\n    baseUrl: \"http://localhost:4200\",\n    envVar: {\n        myVarA: 4 as number,\n        myVarB: \"otherValue\"\n    }\n};\n```\n\nAfter it, you can run a build command.\n","funding_links":[],"categories":["Table of contents"],"sub_categories":["Angular"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdanduh%2Fng-process-env","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdanduh%2Fng-process-env","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdanduh%2Fng-process-env/lists"}