[Bug?]: baseURL issues for nested urls + static builds

[birkskyum]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Current behavior 😯

I experience that when in dev mode the links break, because they don't get the /offset/ path of the url added, when making a build, and running npx serve .output/public, the page can't find a lot of resources, because it looks up this address where they don't exist currently i.e.:

GET http://localhost:3000/offset/_build/assets/HttpStatusCode-6f2232a6.js net::ERR_ABORTED 404 (Not Found)

Expected behavior 🤔

I expected the link with relative urls to adjust to a base path, by prepending it.

I expected to have a way to preview the build locally, going to localhost/offset/, which works as expected when using i.e. the node-server preset.

Steps to reproduce 🕹

Stackblit: https://stackblitz.com/edit/github-o2jqvn?file=src%2Fapp.tsx

Here is a simple repro where I took the basic example where i just changed the vite.config to:

server: {
            baseURL: '/offset/',
            preset: 'static',
            prerender: {
                crawlLinks: true
            }
        }

and the router got added this:

        <Router
            base={import.meta.env.SERVER_BASE_URL}

Context 🔦

extending the good work described here to nested urls

Your environment 🌎

Darwin 23.2.0 arm64 arm

[birkskyum]

Related

• support "renderAssetUrl" and customized "assetsBase": "base" vite setting breaks solid-start build nksaraf/vinxi#114 (comment)

Now for the use case where the whole app is under a sub path of a domain, eg. https://example.com/app/. Then you can set server.baseURL to /app to set the additional base for all the routers.

[nksaraf]

One of the issues here is that when you use lowercase 'a' tags, they are not able to read the base path from the context and then rewrite the url to include that. So they just stay the way they were written. I think you can try using uppercase 'A' component from the router and that should be base path aware

[birkskyum]

thanks @nksaraf , that does indeed fix the link. This error still persist when I try to preview my build:

GET http://localhost:3000/offset/_build/assets/HttpStatusCode-6f2232a6.js net::ERR_ABORTED 404 (Not Found)

[nksaraf]

Okay so during the preview of the static build, we need to a way to do it at the baseURL otherwise it correctly won't work.

[nksaraf]

Adding a vinxi serve (which is a static file server) with support for --base config.

So we'll relace the preview command from npx serve .output/public to npx vinxi serve --dir .output/public --base /offset

[birkskyum]

Interesting! I look forward to trying it out when it's released.

[nksaraf]

its released

[birkskyum]

@nksaraf I've tried to get this working, but I'm unable to get the preview behaving as I want, and I'm a bit at a loss now regarding which of these I can use in combination. Just to clarify, these are the places I can set a base path:

1. In the router <Router base='' >
2. In the vite.config.ts, base (I understand to leave this for vinxi internal use)
3. In the vite.config.ts, start.server.baseURL (this is the one setting import.meta.env.SERVER_BASE_URL right?)
4. In the vinxi serve --dir, --host, --port, --base. I try to use i.e. vinxi serve --dir ./.output/public/ --host http://localhost --port 3000 --base /offset

If I only use no. 1, my dev server behaves well - It injects the base in the <A > links , and all is good (let me know if <a> should always be used instead of <A>). As I understand I have to set 3. and 4. in order to get the preview working, but setting the server.baseURL will break my <A> links in dev mode. Does the vinxi serve --base replace or work in combination to the server.baseUrl?

The two errors i most often see in my attempts to get the preview working, apart from incorrect links, are generally:

Failed to load resource: the server responded with a status of 404 (Cannot find any path matching /_build/assets/client-47fd2372.css.)

and

{
  "statusCode": 404,
  "statusMessage": "Cannot find any path matching /.",
  "stack": []
}

[birkskyum]

This is how remix does it:

https://remix.run/blog/remix-vite-stable#basename-support

[birkskyum]

Okay, we're now on solid-start 0.6, and vinxi 0.3.5. I've updated everything and picked this up again.

If I have a app.config.js that looks like this:

const config = defineConfig({
    ssr: false,
    server: {
        preset: 'static',
        experimental: {
            asyncContext: true
        },
        baseURL: 'http://localhost:3000/maplibre-style-spec/',
    }
});

Then I'll get a warning saying:

vinxi v0.3.5
vinxi starting dev server
(!) "base" option should start with a slash.

This warning "base" option should start with a slash. i believe originate from the vite.base option. If we maintain the use of "baseUrl" rather than "base" it would be good to update that message so that it matches the property name as I initially thought it referred to the base property on the router. I do as the error say and change the baseUrl to /maplibre-style-spec/, and now my local anchor tags lack the localhost:3000/ breaking all links as they only contain the path but not the domain/localhost.

I think I'm not interested in baseUrl affecting the dev server - at least dev mode works perfectly when it's unset

[nksaraf]

Yeah i think im myself a bit confused about how to resolve this.

There are a bunch of places where base would get used and Im not sure what people intend with all the variations.

[birkskyum]

Okay, i understand. It is quite hairy.

Is it possible to untangle the vinxi internal base (the _build) so it doesn't influence any of the config parameters like vite.base?

The reason for setting a base in the app.config (normally vite.base, but now server.baseUrl) would be to designate nested public path and thus where a link would point if it's set to just "/", to find the public folder and entry scripts etc. That is a true base. The current baseUrl is problematic because it doesn't apply the path defined to the current domain, it overwrites it completely. If my dev server (or preview) is localhost:3000, and baseUrl is "/offset", it should make all the links "localhost:3000/offset", not just "/offset" which is does currently and breaks all anchors.

The parameter set on the router is to my understanding nothing more than an alternative to putting the routes in subfolder hierarchy and let the file router apply this extra path. It doesn't touch the asset path or anything like that. This base should be further appended behind the baseUrl.

So in total the <A> tags should join:
host/domain:port + vite.base/baseUrl (from app.config) + router base + routes / file routes

And the public path would be just:
host/domain:port + vite.base/baseUrl (from app.config)

What other use cases could there be?

[birkskyum]

@ryansolid this is hairy, but if start is at the "no more shrugging" state it really would be good to have this common use-case worked out for the 1.0 the ability to deploy to a nested url path, as it's possible with all the other popular meta frameworks.

[ryansolid]

I'm not clear what should be changed. The router is only going to accept one base path so we just need to make sure it gets the right one. Generally it ignores the host/domain:port.. so it just needs to be fed the the rest I think. I would assume that if the router had issues here we would have had complaints earlier. So is the problem what we get from SolidStart?

[birkskyum]

I think the issue originates in vinxi, and the way it integrates with solid-start/router. At the end of the day the dx (build previews) and feature set (deployment) of SolidStart is affected by this issue. There is no static example in vinxi i can use to narrow part of the issue down, and it would also not fully capture the interplay with the solid-router <A>'s when setting the server.baseURL

[ryansolid]

I guess what I don't understand on the Solid router side is why would /offset be a problem. The domain would inferred to be the current domain would it not? I can look at the example I guess again to see what's weird.

[nksaraf]

I think what would help me is a checklist/table of combination of flags (server.baseURL) and what you expect to happen with <A> and asset links.

I can then go thru that checklist and get it all working. It's all too abstract for me to know what I need to change/fix.

[birkskyum]

Alright, good idea, I'll try to come at it from a different angle.