For creating a SvelteKit SPA app, we first need to set up SvelteKit to have all the pages pre-rendered. For this, for every +page.svelte we need to add a +page.server.ts or a +page.server.js with the following –

export const prerender = true;
export const ssr = true;

This will create the corresponding pages for each route. For example, if we have a URL like example.com/about, we will have an about.html page getting created.

However, putting the build folder directly under a simple nginx config doesn’t work. Since the URL does not have an .html extension, even if those pages are there, nginx doesn’t show them.

For this, the nginx configuration has to change like this –

server {
  server_name <server url>;

  ... other config options - SSL, port, logs etc.

  root /path/to/build/folder;

  location / {
    if ($request_uri ~ ^/(.*)\.html(\?|$)) {
      return 302 /$1;
    }
    try_files $uri $uri.html $uri/ =404;
  }
}

The last part states that the .html extensions be skipped from pages.

This ensures that when the URL is example.com/about, the actual about page shows.