{"id":19233058,"url":"https://github.com/reflexdemon/angular-multi-proxy","last_synced_at":"2026-04-12T18:09:27.339Z","repository":{"id":38489099,"uuid":"282067899","full_name":"reflexdemon/angular-multi-proxy","owner":"reflexdemon","description":"This is a demo project to show how we can setup Angular Project to have multiple configuration","archived":false,"fork":false,"pushed_at":"2023-01-26T22:13:56.000Z","size":9191,"stargazers_count":0,"open_issues_count":24,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-01-05T00:28:30.216Z","etag":null,"topics":["angular","angular-cli","demo-app","javascript","js","json","proxy","proxy-server","typescript"],"latest_commit_sha":null,"homepage":"https://reflexdemon.github.io/angular-multi-proxy/","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/reflexdemon.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-07-23T22:19:45.000Z","updated_at":"2020-07-24T10:40:24.000Z","dependencies_parsed_at":"2023-02-06T01:45:32.465Z","dependency_job_id":null,"html_url":"https://github.com/reflexdemon/angular-multi-proxy","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/reflexdemon%2Fangular-multi-proxy","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/reflexdemon%2Fangular-multi-proxy/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/reflexdemon%2Fangular-multi-proxy/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/reflexdemon%2Fangular-multi-proxy/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/reflexdemon","download_url":"https://codeload.github.com/reflexdemon/angular-multi-proxy/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":240310872,"owners_count":19781341,"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-cli","demo-app","javascript","js","json","proxy","proxy-server","typescript"],"created_at":"2024-11-09T16:08:39.105Z","updated_at":"2026-04-12T18:09:27.299Z","avatar_url":"https://github.com/reflexdemon.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# AngularMultiProxy\n\nThis project is a demo to show what needs to be done to set multiple proxy configurations for various environments. This project is only a demo project. If you are looking for any UI tips then it is a wrong project. The objective of this project is show how to setup proxy.\n\n## Background\n\nIf you are looking into this then you are intrested in proxying your application to an external API. For our demo let us try\nto proxy our API calls to below public APIs.\n\n1) International Chuck Norris Database - http://www.icndb.com/\n2) HTTP Bin - https://httpbin.org/\n\n## Setup\n\nFor our demo let us consider `/api` proxies to one of the backend based on configuration. This means when we run an applicatin using one configuratin `/api` is expected to hit ICNDB and with other configuration it will hit HTTP Bin.\n\nWith this being said let us get our code in place.\n\n## Code Changes\n\n### Step 1\n\nAdd a `proxyConfig` entry to your `angular.json`\n\n```\n...\n\"architect\": {\n  \"serve\": {\n    \"builder\": \"@angular-devkit/build-angular:dev-server\",\n    \"options\": {\n      \"browserTarget\": \"your-application-name:build\",\n      \"proxyConfig\": \"src/proxy.conf.js\"\n    },\n...\n\n```\n\n### Step 2\n\nAdd `src/proxy.conf.js` to your repository with below configuration.\n\n```js\nconst TARGET = process.env.TARGET || 'ICNDB';\n\n\nconst configuration = {\n  'ICNDB' : {\n    target : 'https://api.icndb.com',\n    host: 'api.icndb.com'\n  },\n  'HTTPBIN' : {\n    target : 'https://httpbin.org',\n    host: 'httpbin.org'\n  }\n};\n\n\nconst PROXY_CONFIG = [\n    {\n        context: [\"/api/**\"],\n        target: configuration[TARGET].target,\n        headers: {\n          host: configuration[TARGET].host\n        },\n        secure: false,\n        pathRewrite: {\n          '^/api': ''\n        }\n    }\n];\n\nmodule.exports = PROXY_CONFIG;\n\n```\n\n### Step 3\n\nAdd the `cross-env` Dev dependency to be able to have a seamless experience of passing environment variables between Windoes, Linux or Mac users. I strongly recommend you do that.\n\n```bash\n$ npm i -D cross-env\n```\n\n### Step 4\n\nNow add the below to your `scripts` part of your main `package.json`.\n\n```\n...\n  \"scripts\": {\n      \"proxy:icndb\": \"cross-env TARGET=ICNDB ng serve\",\n      \"proxy:httpbin\": \"cross-env TARGET=HTTPBIN ng serve\",\n...\n\n}\n```\n\n### Step 5\n\nIt is time to test the setup.\n\nTo start the ICNDB proxying start with below command.\n\n```bash\n$ npm run proxy:icndb  \n\n\u003e angular-multi-proxy@0.0.0 proxy:icndb /home/venkatvp/Development/github/reflexdemon/angular-multi-proxy\n\u003e cross-env TARGET=ICNDB ng serve\n\n10% building 3/3 modules 0 active[HPM] Proxy created: [ '/api/**' ]  -\u003e  https://api.icndb.com\n[HPM] Proxy rewrite rule created: \"^/api\" ~\u003e \"\"\n\nchunk {main} main.js, main.js.map (main) 57.8 kB [initial] [rendered]\nchunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 141 kB [initial] [rendered]\nchunk {runtime} runtime.js, runtime.js.map (runtime) 6.15 kB [entry] [rendered]\nchunk {styles} styles.js, styles.js.map (styles) 12.4 kB [initial] [rendered]\nchunk {vendor} vendor.js, vendor.js.map (vendor) 2.41 MB [initial] [rendered]\nDate: 2020-07-24T10:08:11.318Z - Hash: 0d0b991d4a90fb86406a - Time: 6242ms\n** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **\n: Compiled successfully.\n\n\n```\n\nIf you paid close attention to the output see where the routs `/api/**` is pointing to. In this case it is proxuing to ICNDB.\n\n```bash\n$ curl -v \"http://localhost:4200/api/jokes/random?limitTo=[nerdy]\"\n*   Trying 127.0.0.1:4200...\n* TCP_NODELAY set\n* Connected to localhost (127.0.0.1) port 4200 (#0)\n\u003e GET /api/jokes/random?limitTo=[nerdy] HTTP/1.1\n\u003e Host: localhost:4200\n\u003e User-Agent: curl/7.68.0\n\u003e Accept: */*\n\u003e \n* Mark bundle as not supporting multiuse\n\u003c HTTP/1.1 200 OK\n\u003c X-Powered-By: Express\n\u003c access-control-allow-origin: *\n\u003c date: Fri, 24 Jul 2020 10:11:28 GMT\n\u003c content-type: application/json\n\u003c transfer-encoding: chunked\n\u003c connection: close\n\u003c set-cookie: __cfduid=da6fb142879c06d040e1bbcc43fd9a54c1595585488; expires=Sun, 23-Aug-20 10:11:28 GMT; path=/; domain=.icndb.com; HttpOnly; SameSite=Lax\n\u003c access-control-allow-methods: GET\n\u003c cache-control: no-cache, must-revalidate\n\u003c expires: Sat, 26 Jul 1997 05:00:00 GMT\n\u003c vary: User-Agent\n\u003c cf-cache-status: DYNAMIC\n\u003c cf-request-id: 0421e77dfa00000d061d3bb200000001\n\u003c expect-ct: max-age=604800, report-uri=\"https://report-uri.cloudflare.com/cdn-cgi/beacon/expect-ct\"\n\u003c server: cloudflare\n\u003c cf-ray: 5b7cdb7659090d06-ATL\n\u003c \n* Closing connection 0\n{ \"type\": \"success\", \"value\": { \"id\": 513, \"joke\": \"Chuck Norris does not code in cycles, he codes in strikes.\", \"categories\": [\"nerdy\"] } }\n```\n\nCongragulations! You are now proxying the `ICNDB`. Now let us test proxying to my other endpoint, `HTTPBIN`.\n\nTo start proxying to `HTTPBIN`, you issue the below command.\n\n```bash\n$ npm run proxy:httpbin\n\n\u003e angular-multi-proxy@0.0.0 proxy:httpbin /home/venkatvp/Development/github/reflexdemon/angular-multi-proxy\n\u003e cross-env TARGET=HTTPBIN ng serve\n\n10% building 3/3 modules 0 active[HPM] Proxy created: [ '/api/**' ]  -\u003e  https://httpbin.org\n[HPM] Proxy rewrite rule created: \"^/api\" ~\u003e \"\"\n\nchunk {main} main.js, main.js.map (main) 57.8 kB [initial] [rendered]\nchunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 141 kB [initial] [rendered]\nchunk {runtime} runtime.js, runtime.js.map (runtime) 6.15 kB [entry] [rendered]\nchunk {styles} styles.js, styles.js.map (styles) 12.4 kB [initial] [rendered]\nchunk {vendor} vendor.js, vendor.js.map (vendor) 2.41 MB [initial] [rendered]\nDate: 2020-07-24T10:14:45.963Z - Hash: 0d0b991d4a90fb86406a - Time: 6396ms\n** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **\n: Compiled successfully.\n\n```\n\nNow pay attention to `/api/**`, this time it is pointing to `https://httpbin.org` and let us start testing them.\n\n```bash\n$ curl -v \"http://localhost:4200/api/get\"\n*   Trying 127.0.0.1:4200...\n* TCP_NODELAY set\n* Connected to localhost (127.0.0.1) port 4200 (#0)\n\u003e GET /api/get HTTP/1.1\n\u003e Host: localhost:4200\n\u003e User-Agent: curl/7.68.0\n\u003e Accept: */*\n\u003e \n* Mark bundle as not supporting multiuse\n\u003c HTTP/1.1 200 OK\n\u003c X-Powered-By: Express\n\u003c access-control-allow-origin: *\n\u003c date: Fri, 24 Jul 2020 10:14:47 GMT\n\u003c content-type: application/json\n\u003c content-length: 254\n\u003c connection: close\n\u003c server: gunicorn/19.9.0\n\u003c access-control-allow-credentials: true\n\u003c \n{\n  \"args\": {}, \n  \"headers\": {\n    \"Accept\": \"*/*\", \n    \"Host\": \"httpbin.org\", \n    \"User-Agent\": \"curl/7.68.0\", \n    \"X-Amzn-Trace-Id\": \"Root=1-5f1ab497-c6dec943364c39xxxxxxxxxx\"\n  }, \n  \"origin\": \"XXX.XXX.XXX.XXX\", \n  \"url\": \"https://httpbin.org/get\"\n}\n* Closing connection 0\n\n```\n\nNow you see it is returning a completly different response.\n\n## Conclusion\n\nIn a real world nobody will be having configurations to completly different type of services. Since this was a demo and wanted to show that is very poosible to setup configuration to completly different services, I had used this. For a realworld problem when we want to have different configuration for different evnironments like, `DEV`, `QA`, `UAT`, `STAGE`, etc, it is very easy to add such configurations and use them in your projects.\n\nIf you have any feedback on this please open a issue and I will get back to you.\n\nHappy Coding!\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Freflexdemon%2Fangular-multi-proxy","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Freflexdemon%2Fangular-multi-proxy","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Freflexdemon%2Fangular-multi-proxy/lists"}