javascript - SvelteKit.next Static Site Adapter Pages Return 404 on Refresh - Stack Overflow

admin管理员组

文章数量:1404073

I know this can't be that hard, but Googling isn't turning up any answers. I'm using the SvelteKit static site adapter, and it's building the site, but the build file structure is:

root
  - _app
  - faviceon.png
  - index.html
  - secondpage.html

But, when you click on the navigation items to take you to the secondary page, the URL is: url/secondpage rather than url/secondpage.html. I'm assuming the generated JS is doing the routing here, but if you input the url directly or refresh the second page, it returns a 404.

I know this has to be a config issue, but I've tried tons of variations, and the build stays the same. This is my svelte.config.js file:

// import adapter from "@sveltejs/adapter-auto";
import adapter from "@sveltejs/adapter-static";
import preprocess from "svelte-preprocess";

/** @type {import('@sveltejs/kit').Config} */
const config = {
    // Consult 
    // for more information about preprocessors
    preprocess: preprocess({
        scss: {
            prependData: `@import './src/lib/scss/style.scss';`,
        },
    }),

    kit: {
        adapter: adapter({
            // default options are shown. On some platforms
            // these options are set automatically — see below
            pages: "build",
            assets: "build",
            fallback: null,
            prepress: false,
            trailingSlash: 'always',
        }),
    },
};

export default config;

I initially didn't have the trailingSlash param, but the few sort of related things in docs and on StackOverflow made it seem like that might affect the routing code generation.

Anyway, let me know if you need any other code samples from me, or if just not seeing the forest for the trees.

Thanks!

I know this can't be that hard, but Googling isn't turning up any answers. I'm using the SvelteKit static site adapter, and it's building the site, but the build file structure is:

root
  - _app
  - faviceon.png
  - index.html
  - secondpage.html

But, when you click on the navigation items to take you to the secondary page, the URL is: url./secondpage rather than url./secondpage.html. I'm assuming the generated JS is doing the routing here, but if you input the url directly or refresh the second page, it returns a 404.

I know this has to be a config issue, but I've tried tons of variations, and the build stays the same. This is my svelte.config.js file:

// import adapter from "@sveltejs/adapter-auto";
import adapter from "@sveltejs/adapter-static";
import preprocess from "svelte-preprocess";

/** @type {import('@sveltejs/kit').Config} */
const config = {
    // Consult https://github./sveltejs/svelte-preprocess
    // for more information about preprocessors
    preprocess: preprocess({
        scss: {
            prependData: `@import './src/lib/scss/style.scss';`,
        },
    }),

    kit: {
        adapter: adapter({
            // default options are shown. On some platforms
            // these options are set automatically — see below
            pages: "build",
            assets: "build",
            fallback: null,
            prepress: false,
            trailingSlash: 'always',
        }),
    },
};

export default config;

I initially didn't have the trailingSlash param, but the few sort of related things in docs and on StackOverflow made it seem like that might affect the routing code generation.

Anyway, let me know if you need any other code samples from me, or if just not seeing the forest for the trees.

Thanks!

• javascript
• routes
• svelte
• sveltekit
• static-site

Share Improve this question Follow asked Sep 28, 2022 at 2:22 farnscofarnsco 11533 silver badges88 bronze badges 1

• This is also an issue for statically-generated pages with no SSR, any time you go to the site with javascript disabled (or crawl it with a bot). I don't like the trailingSlash param, why can't svelte-kit just generate paths ending in '.html'. :) – tekHedd Commented Jul 18, 2024 at 20:04

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 7

I found the same situation, I found out that I should put a line in src/routes/+layout.js

export const trailingSlash = 'always'

The problem is that when there are multiple pages, the adapter-static generates several html files and expects all links to be static. The routes, even when they are static, are being treated by static-adapter as dynamic and it plains when prerender: true is set.

The adapter-static has two distinct modes of operation: SPA and prerendering. When there are several routes, both the npm run dev and npm run preview works as intended, but once built, the static routing falls to the web server who cannot found the page without the .html.

I found a workaround to avoid converting the site to a SPA: Installing a url rewrite mechanism as a middleware in order to add the .html extension that the static server is expecting in the piled site.

For Nginx static server the solution is a url rewrite configuration as explained here: https://www.codesmite./article/clean-url-rewrites-using-nginx For other servers, the solution should be very similar

I had the same problem for prerendered dynamic routes throwing 404 on refresh or direct links.

In my case I had a /archive/[slug] route and further dynamic subroutes, all marked as prerender=true.

However, the problem was that these routes were then not included "in the manifest" according to the prerender page options. You have to use prerender='auto' for the dynamic routes to be included. TBH I don't understand why true works different than auto, but this solved the 404 on refresh problem for me.

本文标签： javascriptSvelteKitnext Static Site Adapter Pages Return 404 on RefreshStack Overflow