Svelte kit with multiple pages

[fhrsales]

I started to code an experimental svelte web app with svelte kit as a multipage site (MPA). I have an index page and other ones (chapter one, chapter two, etc) organized correctly in the routes path (all of them are named with .svelte extension).

When I build the app (using the adapter static mode) and upload this built files to the server, everything works fine, the links to the other pages, etc...

But if I try to access one of the chapter's page as an URL (like https://myserver/chapter1/) i get a 404 error. It's important to say that in dev mode everything works fine (even if I access this chapters's page).

How can I build a site so I can have valid URLs for different svelte files at routes path using the same svelte project?

[omar2205]

You can build the pages as HTML files.

add src/hooks.ts

export async function handle({ event, resolve }) {
  const response = await resolve(event, {
    ssr: false
  })

  return response
}

Also, I think you should rename your routes to <page_name>.html.svelte i.e. about.html.svelte

[stephane-vanraes]

You have to tell SvelteKit to prerender all pages (this is assuming you can prerender all pages, only do this if the content will always be the same for all visitors). To do this, simply add the prerender option to svelte.config.js

const config = {
  kit: {
    prerender: { default: true }
  }
};

(No need to rename the files as the other answer states).

If you want a slighly more dynamic SPA like experience, you have to add a fallback page (as you might already have done)

const config = {
  kit: {
    adapter: adapter({
        fallback: 'index.html'
     }),
  }
}

This will make index.html your starting point, but this means the other files do not exist so you get a 404 when going directly to them. Solving this depends on what hosting you have, but always involves redirecting all traffic to this index page.

[fhrsales]

Thanks to @omar2205 and @stephane-vanraes I got it!
Now I can have the htmls as valid links.
As @omar2205 suggested, I renamed the files at the routes folder to "SOMETHING.HTML.SVELTE"

This is because I need to have an MPA project. I also tried the @stephane-vanraes approach and, in case that you need to have a SPA project, it also worked.

Thanks a lot!