Example usage with SvelteKit

[nilskj]

Hey! I'm currently trying this cms out, just wondering if anybody already did achieve the following?
Just like the NextJs and CMS merged node server, can we do the same with Payload but with SvelteKit instead?

I created an initial experiment repo here. Any feedback, thoughts or things I would need to consider? Big thanks for this awesome project gone OS.

[DanRibbens]

Hey @nilskj,

Great starter repo! I keep hearing a lot of good things about Svelte, yet I haven't taken the time yet to look into it. I like that you're using docker and everything looks very clean. The thing I might add would be to put in just a little more code in terms of usage.

For example, you could add a template that renders data from a simple collection assuming the user has gone into the admin to save something. That would show some basic principles in how the two systems can work together. We do this in the nextjs repo for this reason.
Another informative thing you could add is making the landing page show whether or not the user is logged in.

Those would be the first things I'd be interested in if I was checking out how these tools work together and having it as an example could give users a good idea of what they can do to continue building.

Do you plan on turning the repo into a template in GitHub?

It is super cool to see these example repos come out!

[nilskj]

Thank you, yes most definitely will extend this and when it is more polished I think it can be a nice template. I will try do add some simple example Collections showcasing how I would render them in Svelte.

Keep up the great work and big thumbs of for this architecture, hooking into Express in a framework agnostic way 👍. This enables us merging in the cms with a frontend in Svelte(or whatever 🤓) in one app!

[DanRibbens]

Feel free to take inspiration from the next example repo.

Rending different pages from a Payload colllection using Sveltkit would be really cool to see too.

[nilskj]

That example is a great reference! I have translated fetching a page collection from that next example to svelte, prerendering the page on server side as well and passing the page as prop ;)

<script context="module">
	import { env } from '$lib/util/env';
	export const prerender = true;

	/** @type {import('./__types/[...slug]').Load} */
	export async function load({ fetch, params }) {
		const slug = params?.slug || 'home';
		const response = await fetch(`${env.payload_url}/api/pages?where[slug][equals]=${slug}`);
		const data = await response.json();
		if (!data.docs.length)
			return {
				status: 404
			};
		return {
			status: response.status,
			props: {
				page: response.ok && data.docs[0]
			}
		};
	}
</script>

<script lang="ts">
    export let page;
</script>

<h2>
    {JSON.stringify(page)}
</h2>

In dev I would like to enable hot reload for quick iterative development, but that won't rebuild the node server output, so I split it up on another node server running on 3001.

Then when running the prod build I can finally merge everything to one express server (both built sveltekit handler and payload). Maybe there are better solutions to this that I cannot think of right now :D

Next step is rendering blocks for a page!

[etmartinkazoo]

@nilskj - We have two production apps using PayloadCMS with Svelte for the frontend right now. We are currently redoing our marketing site with Payload and Svelte and will be happy to share the code when completed.

[Snailedlt]

Any updates on this?

[harlantwood]

@etmartinkazoo yes please 😊