Reverse Proxy subfolder compatibility ?

[tibuski]

Hello,

I tried to host Mindwendel behind Traefik reverse proxy subfolder (http://mydomain.com/mindwendel) but had no success because, I think, we can't set the root path to something else than /

By any chance, did I miss an environment variable or are there any doc to achieve this somewhere ?

Thank you !

[gerardo-navarro]

@tibuski Thanks for raising this issue. We will look into this.

[nwittstruck]

Hi @tibuski , thanks for bringing this up. Is stripping the prefix with traefik an option?

A simple example that works fine for me:

    labels:
      - "traefik.enable=true"
      - "traefik.http.routers.mindwendel.rule=PathPrefix(`/mindwendel`)"
      - "traefik.http.routers.mindwendel.entrypoints=mindwendel"
      - "traefik.http.middlewares.strip-mindwendel.stripprefix.prefixes=/mindwendel"
      - "traefik.http.routers.mindwendel.middlewares=strip-mindwendel@docker"

See https://doc.traefik.io/traefik/middlewares/http/stripprefix/ for more information.

If this is not an option I might be able to introduce an ENV var for this. However, I'd prefer solving this on the infrastructure level, not on the application level.

[tibuski]

Thank you very much for looking at this issue!

If I remember correctly, I tried to strip the prefix but still had issues with images and/or css.

I'll try tomorrow and keep you posted!

[nwittstruck]

Ah, yes, images, styles and js will be tricky. I can reproduce these issues. I'll have a look at see if I can create an ENV for this.

[nwittstruck]

Hi @tibuski , unfortunately this seems to be a bit more time consuming than I can currently provide. Most of the changes are pretty straightforward, the only tricky thing will be to make sure that esbuild and dart sass play nice together in creating CSS files that contain your subpath.

Would you be interested in trying this yourself? I could add a few pointers on where to start.

[tibuski]

Hello @nwittstruck !

Sure I could try but I can't promise anything as my developer skills are quite low (I had to google esbuild and dart sass) and it will depend on my free time too ...

But, I am sure I will learn a lot so, why not give it a try !

[nwittstruck]

Ok, great 👍

This is a rough outline. You'll need to create an environment variable that contains your path, afterward you can set this varaible in these places. Replace "/example" in the following places with your variable:

Update Endpoint Configuration: Include the path in config/config.exs url: [... path: "/example" ... ]

Modify the Router: lib/mindwendel_web/router.ex scope "/example", MindwendelWeb do

Static Assets: lib/mindwendel_web/endpoint.ex

plug Plug.Static,
    at: "/example",
    from: :mindwendel,

Update LiveView Socket This might be a bit over the place. You'll also have to update the path for the sockets for the liveviews in lib/mindwendel_web/endpoint.ex. Also change this in the javascript code on the client side.

This should solve most of your issues, except the static hosting. It might be the easiest to generate them once, fix the path and then host them outside of your app. Otherwise, you'll need to use dart and esbuild to use your environment variable.

I hope this helps!