[Feature?]: Make paths starting with `/` go to the SERVER_BASE_URL

[birkskyum]

Duplicates

• [X] I have searched the existing issues

Latest version

• [X] I have tested the latest version

Summary 💡

I have ported a static docs site from an older solid-start-static to the Vinxi version of SolidStart, and what I found was that it's still necessary to append the baseURL virtually everywhere there is an asset or link.

Current situation:

• all assets like <img> or favicon needs to manually have appended ${import.meta.env.SERVER_BASE_URL}
• the <Router base={import.meta.env.SERVER_BASE_URL} /> is needed to make the <A /> work
• anchors in markdown or <a> needs the ${import.meta.env.SERVER_BASE_URL}/page.

Suggestion:

• It would be great if all links with a root url like /page or /img.png would contain the baseURL, so that it wouldn't have to be injected in any of these three cases.

Examples 🌈

No response

Motivation 🔦

No response

[ryansolid]

Interesting. I wasn't aware of this behavior especially on anchors. We need the base URL to be able to remove it from the path. Like anchors aside the router needs it. <A> always added it on. So I'm guessing it removed and adds it again. But the fact this could fix <a> in these scenarios is interesting.

Was this something we were doing in our Vite plugin though?.. Because I'd be super surprised if this was default behavior. I guess Vite does a transform on the HTML (their whole index.html thing) and we must have been tapping into that. Thanks this makes is easier to at least understand where the gap is.

[birkskyum]

@ryansolid , seem like i remembered wrong - there was no such behavior of injecting base path in anchors in the past, but it would be big dx improvement to have.

[nksaraf]

not possible to inject stuff arbitrary outside the html, most of the anchors, imgs, etc are being rendered via the JSX. If they are not A they are not even javascript code run for them that we can do something on the runtime. If you are app is at a base path not /, you would need to account for that in your assets/links etc if you're client runtime is not handling it (so for eg. solid's router can do it for A, but who will do it for a plain img?)

[birkskyum]

I don't know how it works, or if JSX is the limiting factor here, but if I look at a project like this Nuxt 3 demo: https://github.com/lucpotage/nuxt-github-pages

It has a baseURL: '/nuxt-github-pages/',.

image

The two pages Home and About contain images like this: <img src="/qingbao-meng-01_igFr7hd4-unsplash.jpg" loading="lazy">.

When i run npm run generate, the index.html contains an image tag that suddenly looks like this: <img src="/nuxt-github-pages/qingbao-meng-01_igFr7hd4-unsplash.jpg" loading="lazy">

<A />

The anchors are written as <NuxtLink to="/about">About</NuxtLink>, so no <Router base /> wrapper, and after generation it comes out as <a href="/nuxt-github-pages/about" class="">About</a>

---

It also works if i run npm run build and node .output/server/index.mjs instead of the ssg

Lowercase <a /> doesn't get this baseURL appended though.

[ryansolid]

The only way I could see consistently being able to make that transformation is if the image is being imported and then processed as an asset via vite. That could work as it would move it to the assets location and get that interesting hash rewrite. But I don't think we could just parse some arbitrary string. Is that like Nuxt special image component or something?