kit icon indicating copy to clipboard operation
kit copied to clipboard

`vite preview` serves .svelte-kit, not build, leading to incorrect behaviour with `adapter-static`

Open hybridherbst opened this issue 2 years ago • 6 comments

Describe the bug

The docs explain that npm run preview should be used after npm run build, however, at least in the case of adapter-static the behaviour is different – the generated things in .svelte-kit are served instead leading to very different behaviour, for example with routes and error handling (e.g. in a static build any missing route goes to the fallback page, no matter if there's a matcher or not).

There is a partial workaround by using the serve package and replacing vite preview with serve build, but that is only a partial solution as it doesn't support base paths, has a different HTTPS setup, and the like.

Potentially related to https://github.com/sveltejs/kit/issues/3535

Logs

No response

System Info

System:
    OS: Windows 10 10.0.22621
    CPU: (16) x64 Intel(R) Core(TM) i9-9900K CPU @ 3.60GHz
    Memory: 34.88 GB / 63.85 GB
  Binaries:
    Node: 18.13.0 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.19 - ~\AppData\Roaming\npm\yarn.CMD
    npm: 8.5.0 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: Spartan (44.22621.2134.0), Chromium (116.0.1938.69)
    Internet Explorer: 11.0.22621.1

Severity

annoyance

Additional Information

The last thing npm run build logs is:

Run npm run preview to preview your production build locally.

which is not really true given these limitations.

hybridherbst avatar Sep 14 '23 19:09 hybridherbst

It's intended that preview run the contents of .svelte-kit, which is your built app before any adapter has run on it. The choice of adapter is irrelevant. We should make this clearer in the docs and/or in the CLI output, though.

Conduitry avatar Sep 14 '23 20:09 Conduitry

Thanks! From my side I think it would be better that npm run preview actually gives me an accurate preview... I figured this out after running into many issues with differences between local preview (that I incorrectly assumed to be the static build), would definitely be helpful.

hybridherbst avatar Sep 14 '23 20:09 hybridherbst

For most of the adapters, there's not really a simple way to run the actual adapted build output locally, as it depends on runtimes present on whatever that cloud provider is.

For the Node adapter, you can just directly run the build output with node build. And for the static adapter, you can just point the static file server of your choice at the output directory. I don't think there's much value in providing a command that can do either of these (especially since for the static adapter output, it sloughs over the issue of how your real production static file server is configured).

But making it clearer what preview does and does not do would be helpful. There's a little bit of information in https://kit.svelte.dev/docs/building-your-app#preview-your-app but there obviously could be more.

Conduitry avatar Sep 14 '23 20:09 Conduitry

Which version of Vite are you using? Sveltekit uses Vite 4.4.2 by default. When I tried using 4.5.1 or newer, I also got some strange behavior, like no CSS until I went to another page and back, or when using 5.0.2, the page would not even load on prod, because of a different base path.

Tetrapak0 avatar Dec 07 '23 17:12 Tetrapak0

Getting a different index.html between build and preview (with the static adapter) was surprising, and if I hadn't found this issue open, I would have thought it's a bug.

Imho, if the preview isn't going to properly support the static-adapter, it's better to fail with an error (maybe with a chance to override), than provide a close-but-slightly-different version. Without fidelity, what purpose does it serve, that dev mode doesn't already have?

erezsh avatar Jun 05 '25 13:06 erezsh

Will try to see if this can be alleviated by utilising the Vite environments API.

teemingc avatar Jun 10 '25 04:06 teemingc