Fixes to allow UI to be deployed on a subpath (e.g. nameSpace: /dspace)

[tdonohue]

Description

This PR was inspired by a question on dspace-tech about running the UI on a subpath (i.e. http://localhost:4000/dspace/): https://groups.google.com/g/dspace-tech/c/YD5x0IGSuGc/m/D6GQcQUkBgAJ

When trying to answer that question, I discovered this isn't really possible because our base theme, and some images/fonts all assume you will run the UI on the root path (i.e. http://localhost:4000/)

This PR fixes those issues by ensuring all such paths are relative to the UI's deployment path.

Instructions for Reviewers

Should be tested in two ways (I've tested both and they work for me);

1. Install this PR and run the UI on the root path (default) of http://localhost:4000/ Ensure theme loads, and all fonts/images.
2. Then, change the UI to run on a subpath (e.g. "/dspace"). This involves 3 changes at this time:
   • Change your config.*.yml to have nameSpace: /dspace in the ui section.
   • Modify the index.html to have <base href="https://github.com/dspace/"> here https://github.com/DSpace/dspace-angular/blob/main/src/index.html#L6
   • Modify the index.csr.html to have <base href="https://github.com/dspace/"> here https://github.com/DSpace/dspace-angular/blob/main/src/index.csr.html#L6
   • Redeploy/restart UI. Ensure everything loads properly when accessing the UI at http://localhost:4000/dspace/

[tdonohue]

@artlowel : Would you (or someone on your team) be willing to give this a quick review? It should be an easy one to test/review.

[artlowel]

Thanks @tdonohue

While this PR fixes some of the obvious problems you have when deploying on a different namespace, the express server is still hosted on / as well (try simply going to http://localhost:4000/ with this PR). This hides a lot of other problems.

If you take a look at the server output you'll see that most things are still being served from /

Environment extended with app config
[HPM] Proxy created: /  -> https://api7.dspace.org/server/sitemaps
[17:02:39 GMT+0100 (Central European Standard Time)] Listening at http://localhost:4000/dspace/ui/
Environment: Production
GET /dspace/ui 200 2465.929 ms - -
GET /styles.0324863878df4752a58c.css 200 2.994 ms - 346
GET /dspace-theme.css 200 2.868 ms - -
GET /assets/images/dspace-logo.svg 200 1.188 ms - -
GET /assets/dspace/images/banner.jpg 200 0.977 ms - 1671429
GET /assets/fonts/fa-solid-900.woff2 200 0.747 ms - 78268
GET /assets/dspace/images/favicons/manifest.webmanifest 200 0.715 ms - 436

Usually when you deploy something on a subpath, you stick an apache or nginx in front of it that will only redirect requests within that subpath to your server. If you were to do that here, css, fonts and images wouldn't load.

This article explains how to use a router in express to deploy an app to a subpath (note that this should include the /sitemap and /iiif routes as well, basically everything in a server.use() and likely a
server.get() as well). But afterwards I expect other paths will need fixing too, e.g. the image path.

[artlowel]

I'm sorry I see that I forgot the part about setting the <base> href in index.html. I'll try again, although I don't expect that will affect the /iiif or /sitemap subroutes

[artlowel]

If I do that, all requests do go the the correct subpath, but all but the initial HTML return a 404. As a consequence, styles, fonts, images and js files don't load:

[HPM] Proxy created: /  -> https://api7.dspace.org/server/sitemaps
[17:37:34 GMT+0100 (Central European Standard Time)] Listening at http://localhost:4000/dspace/ui/
Environment: Production
GET /dspace/ui 200 1000.373 ms - -
GET /dspace/ui/styles.0324863878df4752a58c.css 404 1153.363 ms - -
GET /dspace/ui/assets/dspace/images/banner.jpg 404 2021.969 ms - -
GET /dspace/ui/runtime-es2015.cc834bd1e490177007ec.js 404 2258.568 ms - -
GET /dspace/ui/assets/images/dspace-logo.svg 404 2345.610 ms - -
GET /dspace/ui/main-es2015.25248f37d814d424ec82.js 404 2544.564 ms - -
GET /dspace/ui/dspace-theme.css 404 3010.836 ms - -
GET /dspace/ui/polyfills-es2015.ba9e20b8d4b8a3eba50f.js 404 2050.481 ms - -
Environment: Production
GET /dspace/ui/assets/dspace/images/favicons/manifest.webmanifest 404 749.610 ms - -

Let me know if I'm still doing something wrong

[tdonohue]

@artlowel : I think you are correct that the /iiif and /sitemaps routes might still need fixing.

However, for me, this PR does get styles to load (at least for me it works)...but you need a very specific configuration:

• config.*.yml should have the nameSpace WITHOUT A TRAILING SLASH (i.e. /dspace)
• <base> tags in both index.html and index.csr.html must have the same nameSpace WITH A TRAILING SLASH (e.g. /dspace/).

Overall, my goal in this PR was to get the UI nameSpace configuration to actually work. Currently, it seems useless as-is. Either it should allow you to change the subpath of the UI, or we should remove it altogether and document a "better way" to install your UI under a subpath (perhaps as you implied we need docs on doing this via apache or similar). My assumption was the nameSpace configuration should work, but it obviously doesn't at this time.

[tdonohue]

@artlowel : Ok, I take it back. I just retested, and something is broken in this PR. It's not working for me either anymore. I thought I had it working, but I must have broken something along the way. I'll ping you once I get it working again.

[tdonohue]

@artlowel : I got this working again by going with the Express Router approach. However, even that doesn't seem to solve /sitemap_index.html style URLs...so, I'm not sure how to get Sitemaps working with a sitemap.

I had initially thought this would be a simple fix :) Doesn't seem like this is the case, so we may just want to delay this for 7.3. In any case, I've pushed up my latest fixes. For me, a URL of http://localhost:4000/dspace now works (in prod mode: yarn start) if I do the following:

• Update config.prod.yml to have nameSpace: /dspace
• Update index.html to have <base href="https://github.com/dspace/">
• Update index.csr.html to have <base href="https://github.com/dspace/">

However, Sitemaps don't seem to work at http://localhost:4000/dspace/sitemap_index.html, even though I've verified they work at http://localhost:8080/server/sitemaps/sitemap_index.html (as I have my frontend pointed at a local backend)

[tdonohue]

Closing in favor of #1642 as that PR seems to be further along than this one (and I haven't had time to get back to this anyways)