kit
kit copied to clipboard
`vite preview` serves .svelte-kit, not build, leading to incorrect behaviour with `adapter-static`
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.
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.
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.
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.
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.
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?
Will try to see if this can be alleviated by utilising the Vite environments API.