UI works on subpaths

[foot]

Fixes #2529

What changed?

• Enables support for running under weave-gitops under a subpath e.g. example.com/wego/ in the UI router

Why was this change made?

• Common to expose weave-gitops dashboard under some subpath

How was this change implemented?

UI routing now checks for and respects a <base href="/foo/" /> tag if present.

If its not present everything works as it did before.

Understand

• The UI uses react-router with the <BrowserRouter />.
• The UI handles navigation etc itself.
• The golang server file router serves up /index.html on just about any path except those with extensions (for css/js/images) and the api endpoints
• This means that when you land at example.com/wego/applications/detail, index.html will be served.
  • The UI code is responsible for choosing what to show at this point.
  • From this route, we need to know where we can fetch index.js and index.css from. The correct url respectively would be /wego/index.js and /wego/index.css
• Setting <base href="/wego/" /> tells the UI where to fetch relative resources from and where the api request can be made from (/wego/v1/api etc)

On the backend

How to set the <base /> tag in the served index.html

• Add a cli flag to set it and add it
• <base /> tag injected from cli
• Mount the server handler under a subpath and add a redirect at / to point to it. e.g. / 302 -> /weave-gitops

How did you validate the change?

Test

• uncomment the additionalArgs in tools/helm-dev-values.yaml
• tilt up
• open http://localhost:9001
• note you are redirected to http://localhost:9001/wego/ and the UI should all work

Test to check ingress works too..

Spin up a kind cluster w/ ingress support:

• Run ./tools/kind-with-ingress.sh
• Uncomment ingress and additionalArgs sections in tools/helm-dev-values.yaml
• tilt up
• open http://localhost:30080 note the 404 from ingress controller
• open http://localhost:30080/wego/ everything should be working okay

Release notes

Documentation Changes

[foot]

@LappleApple I'll write up some docs for this. "How to run weave-gitops on a sub path of your ingress controller", thoughts about where it should go?

[bigkevmcd]

We should document how to do this?

[bigkevmcd]

Looks good, but we probably need some Helm and documentation!

[jpellizzari]

Nice work! Love the UI tests and extra helper script.

[LappleApple]

@foot Let's chat next week about docs-y things :)

[bigkevmcd]

Tested it locally, and it works, let's get the exported functions either not-exported, if they don't need to be, or documented.

Otherwise, looks good.

[heubeck]

🙏

[gre9ory]

@foot
I can confirm it works in my setup too after building an image of the repo with the route-prefix support and setting up the Helm chart to use that dev image.

Still misses a new proper image and an updated Helm chart to reference that image to be usable by end users if not mistaken?

Anyhow, thank you for this - in my view - important feature!

[bigkevmcd]

@gre9ory it should be in the next release