LocationProvider baseName / publicPath

[jacob-ebey]

It would be nice to have a configurable property on the LocationProvider that would prefix local routes with a base name / public path.

The use-case for this is to be able to support hosting platforms like github pages where things are hosted on https://basepath.com/repository-name.

I envision the usage as something like:

<LocationProvider basename="/repository-name">
  ...
</LocationProvider>

This would then route the following anchors respectively:

<a href="/">Home</a> /* /repository-name/ */
<a href="/about">About</a> /* /repository-name/about */

What are your thoughts on this? Could be solved with a simple "Link" component in the project that would reference some injected global for the prefix allowing for the anchors to match their location, but thought I'd throw this idea out there.

[jacob-ebey]

This seems bad for SEO on second thought, but let's talk about it.

[developit]

Hiya @jacob-ebey! Your point about SEO is effectively where my brain went with this. I do see the value of providing a basename, but perhaps not via the router? We could just have the router check for <base href="/repo-name" /> in the DOM and respect that - that would make links work properly too, which addresses the SEO (or really no-js) issue.

Thoughts?

[jacob-ebey]

That works for me. My current work-around is 2 fold and not that ugly, but something "built in" would be nice.

https://github.com/jacob-ebey/preact-webpack-prerender/blob/main/src/app.jsx#L14
https://github.com/jacob-ebey/preact-webpack-prerender/blob/main/src/components/link.jsx

[danielweck]

Based on my experience / usage, I think there is a bug in the code that generates the folder structure in dist (it should rebase route paths to config.publicPath).

I had to work around this issue, as I deploy WMR pages to a static content host that only serves my website at a non-root endpoint.

Perhaps I don't understand config.publicPath well enough, but if I am going to set a URL prefix for assets (CSS, <script>, etc.), that's probably because my router paths are based on that too (i.e. deployed to the same content server topology).

Here's a simple use case, and my solution / workaround:

GitHack to serve the GitHub repository files (note the non-root path to index.html):
https://raw.githack.com/danielweck/preact-wmr-twind-zero/main/dist/index.html

WMR config:
https://github.com/danielweck/preact-wmr-twind-zero/blob/418377b7a5176a43fd886ddf130dafbad3babc71/wmr.config.mjs#L12-L19
... passed into my component code:
https://github.com/danielweck/preact-wmr-twind-zero/blob/418377b7a5176a43fd886ddf130dafbad3babc71/public/index.tsx#L25-L26
... and to the router bits (links and actual route components):
https://github.com/danielweck/preact-wmr-twind-zero/blob/418377b7a5176a43fd886ddf130dafbad3babc71/public/index.tsx#L59-L82

With this hack, WMR build/prerender generates correct working router links. Unfortunately the dist folder contains a deep-nested path that contains the generated routes, so I have to move / hoist the files up the folder hierarchy, as a postbuild step. Final result:

https://github.com/danielweck/preact-wmr-twind-zero/tree/main/dist