Sveltekit Base URL for subdirectory throws 404

Question

I need a bit of understanding for serving a Sveltekit app from a subdirectory. My company will serve the app from a subdirectory called /activ. I figure it's easy enough to update the appropriate paths like so:

svelte.config.js:

kit: {
  ...
  paths: {
    base: "/activ"
  },
  adapter: adapter({
    fallback: 'index.html' // render as SPA
  }),
}

routes/index.svelte:

<svelte:head>
  <base href="/activ">
</svelte:head>

When I npm run build and copy the build over to the subdirectory on the server, the app loads and functions as expected.

However, when I try to serve from dev (localhost:3000) I receive the following errors:

http://localhost:3000

Not Found

http://localhost:3000/activ (what would be the subdirectory and Base URL)

404
Not found: 
Error: Not found: 
    at resolve (file:///Users/tomdoe/Sites/__playground/sveltekit-app/node_modules/@sveltejs/kit/dist/ssr.js:1728:13)
    at async respond (file:///Users/tomdoe/Sites/__playground/sveltekit-app/node_modules/@sveltejs/kit/dist/ssr.js:1676:10)
    at async Immediate.<anonymous> (file:///Users/tomdoe/Sites/__playground/sveltekit-app/node_modules/@sveltejs/kit/dist/chunks/index.js:3484:22)

It seems that I don't understand how to mimic the subdirectory when serving from dev (localhost). Any help is very much appreciated!

Answer 1

You should add

rel="external"

Read following.

https://kit.svelte.dev/docs/a-options#sveltekit-reload