Svelte Static SPA and deep linking. Is this possible? (No based on research for 1 day)

[jamiegau]

Hi all,
I am building a SPA using svelte, but have run into a major problem in that I cannot get deep linking to work.
So for example, If I use import { base } etc, to enable my app to live under https://server/s1
And /s1 is mapped to the files in the build directory.

The App runs as expected. HOWEVER, if I navigate to a page, https://server/s1/content/page
If I hit REFRESH on that page.. obviously. that page does not exist on the server and you get a 404.
You then add Nginx config such as...

location /s1 {
        try_files $uri $uri/ /s1/index.html?$query_string;
 }

This KINDA works, but the page cannot find

...
<link rel="modulepreload" href="./_app/immutable/entry/start.B5HBabx7.js">
 <link rel="modulepreload" href="./_app/immutable/chunks/entry.CDlx8qh-.js">
 <link rel="modulepreload" href="./_app/immutable/chunks/scheduler.DTHnHkU9.js">
...

I assume as the relative paths does not exist.. Rendering a mess as the CSS is also referenced this way.

The nginx config may trick it into serving up the index.html at /s1, but it still thinks its base is /sq/content/page so the relative path is broken.

How do I overcome this, and I am surprised to find so little on this obvious issue.

For example, I can't EMAIL someone a link to a deep-linked page in the SPA. I can come in the front door /s1 and manually navigate to it but not jump to it directly from an external link.

This is a show-stopper. I need to sort this out before I can continue investing into learning this new framework.

Can this be fixed with nginx configurations or do I need to move to running the SPA under the node, and proxy the calls through Nginx, as I do for the Python-based JSON API it is driven by?

[jamiegau]

After doing more investigation on this, I discovered the following.

const config_static = {
	kit: {
		adapter: adapter({
				// default options are shown. On some platforms
				// these options are set automatically — see below
				pages: 'build',
				assets: 'build',
				fallback: 'dc200.html',
				precompress: false,
				strict: true
			}
		),

		paths: {
			base: '/s1',
			relative: false
		}
	}
};

export default config_static;

Above is my svelte.config.js
Adding the relative: false option to the paths made the build render with absolute paths and fixed my problem.

Now I have other problems, but that's a different story.
I hope others found this useful.