static adapter not working with nginx and refreshing pages

Question

This is my config:

import adapter from '@sveltejs/adapter-static';
import preprocess from 'svelte-preprocess';
import path from 'path';

/** @type {import('@sveltejs/kit').Config} */
const config = {
    // Consult https://github.com/sveltejs/svelte-preprocess
    // for more information about preprocessors
    preprocess: preprocess(),

    kit: {
        // hydrate the <div id="svelte"> element in src/app.html
        target: '#svelte',
        adapter: adapter({
            // default options are shown
            pages: 'build',
            assets: 'build',
            fallback: null
        }),
        vite: {
            resolve: {
                alias: {
                    $components: path.resolve('./src/components'),
                    $stores: path.resolve('./src/stores'),
                    $api: path.resolve('./src/api')
                }
            }
        }
    }
};

export default config;

however if I refresh any page in browser I get a 404....

index works, but nothing else if I refresh page.

Answer 1

Look up nginx docs for “try_files”.

Basically if the file doesn’t exist it redirects to index.html which will allow the client side router to handle refreshes

try_files $uri $uri/ /index.html;