Frontend Development Proxy

Configurable container proxy for UI/E2E testing, implemented using the caddy proxy extended with a custom header transforming extension.

Usage

This container proxy will expose a [env | stage].foo.redhat.com:[port | 1337] endpoint that will proxy request to routes defined by you and the rest to the chosen consoledot environment. \

Usage (testing against stage):

podman run -d
  -e HTTPS_PROXY=$RH_STAGE_PROXY_URL
  -p 1337:1337
  -v "$(pwd)/config:/config:ro,Z"
  frontend-development-proxy quay.io/redhat-user-workloads/hcc-platex-services-tenant/frontend-development-proxy:latest

Setup

All you really need is Podman or Docker and the app you want to test :)

Hosts setup

In order to access the https://[env].foo.redhat.com in your browser, you have to add entries to your /etc/hosts file. This is a one-time setup that has to be done only once (unless you modify hosts) on each machine.

For each env you will need to add this to your /etc/hosts file, default env is 'stage':

127.0.0.1 [env].foo.redhat.com
::1 [env].foo.redhat.com

Configuration

This proxy has configurable routes and the consoledot (HCC) environment

Routes

The proxy can be configured for your apps/needs by providing a JSON configuration file that defines the to-be proxied routes and a flag for endpoints that require the RH identity header (APIs for example might, but not the static files), these RH identity headers are automatically used for routes that start with /api/, you can disable that by setting the rh-identity-headers flag to false.

This proxy is meant to be used along a locally running console app in the static mode, i.e.: in your app run npm|yarn fec static or npm start:federated depending on your setup. And if you want also your backend.

By default the container will expect the routes JSON config in /config/routes.json, but if needed this can be changed by setting the ROUTES_JSON_PATH environment variable. \

Example:

{
  // STATIC FILES FE
  "/apps/NAME-OF-YOUR-APP*": { "url": "http://host.docker.internal:8003" }, // this will proxy to a serer that runs on your machine at localhost:8003
  // YOUR BACKEND API
  "/api/NAME-OF-YOUR-APP/*": { "url": "http://host.docker.internal:8000" },
}

Using a locally running Chrome UI

For development with locally running Chrome UI (insights-chrome) you need to add a new route into the routes config that points to a server which serves the chrome UI static files under the correct route and that has the is_chrome flag set.

{
  "/apps/chrome*": {
    "url": "http://host.docker.internal:9912",
    "is_chrome": true, // this will enable the HTML fallback handle needed by the chrome UI
  },
}

You can start a server which will serve the chrome static files like so:

❯ npx http-server ./build -p 9912 -c-1 -a :: --cors=\*

# Beware that the build folder needs to have the static file in the
# `build/apps/chrome/` directory.
❯ ls build/apps/chrome/
.  ..  index.html  js

Environment

The environment can be configured by setting the HCC_ENV_URL to something different than the default of console.stage.redhat.com and all the uncatched requests by your routes/matchers will be directed there. Other than that you can also set HCC_ENV and HCC_PORT variables that just change the exposed URL you are gonna be using.

For testing against stage you will also need to set the HTTPS_PROXY environment variable to the RH stage proxy URL.

DinD (docker-in-docker CI)

If your CI is a docker-in-docker setup, then there is a problem with using the host.docker.interal addresses for targeting the services outside of the container. This can be resolved by binding the container directly to the Podman/Docker host's network, with no network isolation, which is why you might need to run it as root/superuser. And changing the routes to 127.0.0.1.

sudo podman run -d
  -e HTTPS_PROXY=$RH_STAGE_PROXY_URL
  -v "$(pwd)/config:/config:ro,Z"
  --network=host
  frontend-development-proxy quay.io/redhat-user-workloads/hcc-platex-services-tenant/frontend-development-proxy:latest