Reverse proxy for bazel + angular project

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.