How to use
SvelteKit is supported through the ssgName: custom
option (learn more).
Follow the example repository for a concrete example of integrating Stackbit with a SvelteKit. Here's an excerpt from the Stackbit configuration file:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
Note the use of some experimental configuration properties to ensure compatibility with Vite (the development server used by SvelteKit and others):
experimental.ssg.logPatterns.up
is set to[' ready in ']
. This is part of the log message that appears when the Vite dev server is ready to accept requests.experimental.ssg.passthrough
is set to a dedicated relative path to Vite's HMR Websocket endpoint. The path '/vite-hmr/' is configured accordingly invite.config.js
(see here). With this setting, any code changes will trigger a client refresh through Vite's HMR mechanism, without interference from our container.
Content Reload
In the example repository, content changes are handled by:
- Capturing the
'stackbitObjectsChanged'
window event. - Then, invalidating the JSON endpoint providing data to the current page, which will cause the current page to refresh.
This behavior is found at the root __layout.svelte
file, which enables it across the website without needing to further modify any other module.
Here are the contents of this file (source):
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
Managed hosting
If you're using Managed Hosting you also need to include a Netlify configuration file netlify.toml
in your repository. Its contents should look like the following:
1
2
3
Additionally, use Netlify's SvelteKit adaptar in svelte.config.js
(example) to enable support for SSR. This will make SvelteKit's renderer be deployed as a Netlify serverless function.
Example
SvelteKit + Contentful Example
Originally adopted from this demo on GitHub, with added Stackbit support & modifications for compatibility with the latest version of SvelteKit.