Flower and http-proxy-middleware

Question

[EDIT]

I was able to fix the CSS errors described below with the following in my https_server.js:

function flowerGetMethods(app, endpoint, certified) {
    if (certified) {
      var options = {
          logLevel: 'debug',
          target: 'http://'+"flower:5555", // target host
          changeOrigin: true, // needed for virtual hosted sites
          ws: true,
          port: 5555,
          pathRewrite: {},
      };
      var flowerProxy = createProxyMiddleware(options);
    }

and in my docker-compose.yaml

  flower:
    container_name: flower
    image: mher/flower
    hostname: "flower"
    command: ["celery", "flower", "--url_prefix=flower"]
    ports:
      - 5555
    expose:
      - 5555

However, I'm still getting the following issue:

When navigating to localhost/flower/tasks I get a popup saying

DataTables warning: table id=tasks-table - Ajax error. For more information about this error, please see http://datatables.net/tn/7

This seems to be because of a 404 error when trying to POST http://localhost/flower/tasks/datatable. I'm not sure why this file cannot be found. Would appreciate any help that can be provided!

[ORIGINAL POST BELOW]

I want to use http-proxy-middleware to proxy to flower. However, the CSS doesn't load, and the links on the webpage don't work. The page looks like this:

And I get errors like this:

Error http://localhost/static/css/flower.css?v=83ad...[not found]

Clicking the links, the whole page breaks. Example when I click on "Dashboard":

http://localhost/dashboard [not found]

What I want is the page to go to http://localhost/flower/dashboard and for the requests for the CSS elements to go to http://localhost/flower/static/css/flower.css?... All relevant code is below, I'm running both the flower instance and the webserver in docker containers.

The http server is:

var async = require('async');
const express = require('express')
var app = express()
const port = 80




var helmet = require('helmet');

const { createProxyMiddleware } = require('http-proxy-middleware');
/* redirect to flower */
function flowerGetMethods(app, endpoint, certified) {
    if (certified) {
      var options = {
          logLevel: 'debug',
          target: 'http://'+"flower:5555", // target host
          changeOrigin: true, // needed for virtual hosted sites
          ws: true,
          pathRewrite: {},
          port: 5555,
      };
      options.pathRewrite['^'+endpoint+'/flower'] = ''; // remove path
      var flowerProxy = createProxyMiddleware(options);
    }

    app.get(endpoint+'/flower*', function(req, res, next) {
      flowerProxy(req, res, next);
    });
}

async.waterfall([
  function(next) {
    app.use(
       helmet({
         contentSecurityPolicy: false,
         noSniff: false,
       })
     );
    var protocol = require('http').createServer(app);

    protocol.listen(port, () => {
      console.log(`Example app listening at http://localhost:${port}`)
      });

      app.get('/', (req, res) => {
        res.send('Hello World!')
      });
      flowerGetMethods(app, '', true);
    }
]);

The dockerfile for this server is:

FROM node:10.24-alpine

# Install openssl
RUN apk add --update openssl ca-certificates

# Create app directory
RUN mkdir -p /node-servers

# Setting the working directory
WORKDIR /node-servers

# Install app dependencies
COPY package.json /node-servers/
RUN npm install
# if building for production
#RUN npm ci --only=production

# Copy everything
COPY ./ /node-servers

# Entrypoint used to load the environment and start the node server
ENTRYPOINT [ "node", "https_server.js" ]

And I have a docker compose that starts this container, and flower (https://flower.readthedocs.io/en/latest/)

version: '3'
services:
  https-server:
    container_name: https-server
    build: ./node-servers
    ports:
      - 80:80
    expose:
      - "80"
    depends_on:
      - flower

  flower:
    container_name: flower
    image: mher/flower 
    ports:
      - 5555