HTTP serving on non-root directory

[amotl]

Hi @surister,

thanks a stack for conceiving cratedb-admin-alt. It is well received, because the existing admin interface of CrateDB is using outdated technologies.

Using the Compose+Nginx configurations outlined below, I am trying to serve crate-admin-alt on a non-empty URL path, because it needs to be served side-by-side to other applications on the same URL namespace, like Grafana, JupyterLab, Marimo, etc.

With the current setup, I have been able to make it work using a), but b) does not work.

a) http://localhost:4201/
b) http://localhost:8080/admin/

Maybe you can do something to improve the situation, i.e. use relative URLs to reference assets?

With kind regards,
Andreas.

NB: After possibly fixing this, the OCI image at surister/cratedbaltadmin:latest would need to be updated, so downstream applications can continue consuming your application easily. Thank you so much!

Appendix

Find miniature rig's compose.yml and nginx.conf files here: https://gist.github.com/amotl/0db40a5abc91cd9ae5a06051b7c215da.

[amotl]

b), serving per http://localhost:8080/admin/ does not work. Maybe use relative URLs to reference assets?

crate-admin's HTML uses those URLs:

• static/libs/runtime.bundle.js
• static/styles/app.css

crate-admin-alt's HTML uses those URLs:

• /assets/index-690b3bcc.js
• /assets/index-4f8e7dcb.css

I think after adjusting that, it should start working without much ado, as long as other parts of the application will not also assume it is always running on the root URL.

[amotl]

This one possibly includes the solution?

How I solved it for my project:

in your vite.config.js you can specify a base field (which defaults to /), and set it to e.g. ./ to produce relative links to assets in your index.html.

• Relative Path in Generated index.html vitejs/vite#5081

[amotl]

• The patch Naming things: Adjust base URI query parameter, default port, and Vite's base setting #42 now includes the adjustment of Vite's base setting.

[amotl]

Hi again. There is some progress with the recent improvements from GH-42.

Progress

In general, the adjustments have been successful. When using the mini rig shared above, the app is able to load its main share of code per http://localhost:8080/admin/assets/index-7cfab5fc.js on a non-root URL path successfully.

$ http http://localhost:8080/admin/assets/index-7cfab5fc.js --print h
HTTP/1.1 200 OK
Accept-Ranges: bytes
Connection: keep-alive
Content-Length: 691870
Content-Type: application/javascript
Date: Tue, 06 May 2025 18:23:15 GMT
ETag: "679bb3ad-a8e9e"
Last-Modified: Thu, 30 Jan 2025 17:15:25 GMT
Server: nginx/1.27.5

In fact, the app seems to successfully load all of its assets....

Problem

.... but just doesn't boot, with no indications (on screen or in console log) what might go wrong, only displaying the alpha flag.

Outlook

It's probably just a very little quirk that prevents the application from starting up successfully? 🙏

[surister]

Reproduced and 'fixed' in 5531cb0.

In reality it is not a complete fix, the issue is that we need to pass an env variable at build time, making the current docker image unusable for this purpose, it is like this because html/css/js are static files. Huge emphasis on static.

I added two files that show how one would make this work :
dockerfile
nginx conf

........

The ultimate reason why you get a blank page is because the router is not being built in the right path, if we pass /admin/ in

cratedb-admin-alt/src/router/index.js

Line 53 in 5531cb0

history: createWebHistory(import.meta.env.VITE_BASE_URL),

it works. Right now I added a new build env variable VITE_BASE_URL, setting it up export VITE_BASE_URL=/admin/ before doing npm run build makes this work.

The interesting follow up is how do we change the build system so you can just do docker pull without needing to re-build the app, the simplest and first thing that comes is to have a dedicated CI build that builds on /admin/, this obviously doesn't scale but will most likely be fine, as this is an edge case right now.

[amotl]

Thank you very much for tackling this. However, /admin was just an example. It could be "anything", also on deeper nested path levels.

we need to pass an env variable at build time

Right now I added a new build env variable VITE_BASE_URL, setting it up export VITE_BASE_URL=/admin/ before doing npm run build makes this work.

Applications usually provide a runtime setting configuration variable for that, because the application certainly needs to know about it, so it is able to generate proper URLs for navigation purposes. It should be possible with any framework?

[amotl]

Applications usually provide a runtime setting configuration variable for that.

With Grafana, it is server.root_url:

If you’re serving Grafana from https://example.com/grafana/ then the root_url is https://example.com/grafana/ or https://%(domain)s/grafana/ with the corresponding domain configuration value set to example.com in the server section of the Grafana configuration file.

-- https://grafana.com/tutorials/run-grafana-behind-a-proxy/