Reverse proxy for bazel + angular project - reverse-proxy

Question

I am running an angular build using Bazel, and need a reverse proxy to change the host and port of my backend. Normally I would create a serve-command in angular.json, which implements the builder #angular-devkit/build-angular:dev-server with a proxy setup:
"serve": {
"builder": "#angular-devkit/build-angular:dev-server",
"options": {
"browserTarget": "MyPackage:build",
"proxyConfig": "proxy.conf.json"
},
"configurations": {
"production": {
"browserTarget": "MyPackage:build:production"
}
}
}
But since I'm using Bazel, I'm using another builder, the #bazel/angular:build. Unfortunately this builder does not support my proxy configuration, where I would use something like:
{
"/apps": {
"target": "https://my.server:8080",
"secure": true,
"changeOrigin": true
}
}
Is there an alternative to this?

Answer 1

You have probably already seen this page, but I'll link it for reference:
https://bazelbuild.github.io/rules_nodejs/examples#angular
In the "Architect" approach, you build with Bazel but run the standard Angular builders. So if you just want a quick way to keep the functionality, but plug the project into Bazel, I would recommend it.
The #bazel/angular:build builder is part of the "Google" approach described on that page. While it's fast and more "Bazel-native" it also uses a different toolchain. Most notably, no webpack.
The linked example uses concatjs_devserver:
https://github.com/bazelbuild/rules_nodejs/blob/stable/examples/angular/src/BUILD.bazel#L111
which sadly doesn't have a proxy feature.
You can either fall back to the "Architect" approach or write your own Bazel rule that starts a different devserver. Yet another approach would be to just run some reverse proxy in front of both the devserver and your backend server.