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

Proxying Multiple URLs (Custom Routes)

You can route specific API paths to your local machine (or other targets) while letting the rest of the application use the default environment.

1. Create a config file (e.g., my-routes.json):

   {
       "/api/inventory": {
           "url": "[http://host.docker.internal:8000](http://host.docker.internal:8000)",
           "rh-identity-headers": true
       }
   }

   Note: Use host.docker.internal to reach services running on your host machine.

2. Run the proxy with the file mounted:

   podman run -it --rm \
     -p 1337:1337 \
     -v $(pwd)/my-routes.json:/config/custom_routes.json:Z \
     quay.io/redhat-services/frontend-development-proxy:latest