Scott Whittaker

Configure Sveltekit for full SPA mode

At first I thought this was going to be difficult but as with a lot of things with Svelte/Sveltekit it turned out to be straightforward.

In your root layout.ts (or layout.js) file add the following to ensure your app is rendered on the client only.

// SPA mode
// https://kit.svelte.dev/docs/single-page-apps
export const ssr = false;

Then in svelte.config.js use adapter-static with a fallback page. Check the documentation for more detail.

import adapter from '@sveltejs/adapter-static';

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

export default config;

When you build the app using npm run build your app is output to the build directory. You can now deploy the contents of this directory to a server and it will run as a single page application.

Note that by default a Sveltekit app is configured to run in the root of a server. If it is not hosted in the root be sure to configure your base path.