SvelteKit examples

[benmccann]

Thanks for the great tutorials on MDN!

We're considering SvelteKit as the official way to build Svelte applications and about a month ago updated sveltejs/template to point people to SvelteKit and make sure they're aware of it. It's probably what we would suggest for anyone starting a new Svelte project today. Given that, I wonder if it makes sense to update the examples to use SvelteKit or to at least give it a mention in the tutorials.

[opensas]

Absolutely!

I'm planning to update the MDN tutorials, just wainting for the SvelteKit final realease, and to gain more experience working with it.

I'm also thinking about how to update the whole tutorial (or add a specific chapter) to show how to take advantage of sveltekit features. Any idea/collaboration would be more than welcome! (please DM me on twitter @opensas if you want to talk about it)

[benmccann]

Cool! I didn't have any specific ideas. But if you run into any trouble getting started with SvelteKit please let me know and I'd be happy to lend some pointers!

[opensas]

I'd like to provide some examples of all the possible ways to use SveleKit, like full MPA, full SPA, hybrid (SSR with client-side routing), static pre-rendering, edge-side dynamic rendering, etc... But I still have to really understand it and then find a good example or a way to adapt it to the MDN demo app.

[benmccann]

You should be able to switch between these various modes simply by toggling a flag in the config:

• hybrid - this is the default
• full MPA - set router: false to disable client-side routing
• full SPA - supported today but will be improved with https://github.com/sveltejs/kit/pull/2529. Most people use @sveltejs/adapter-static with the fallback option
• static pre-rendering - you can do this on a per-page basis by setting prerender = true on the pages you want to pre-render. If you want to pre-render everything, most people use @sveltejs/adapter-static (though pre-rendering works with any adapter)
• ESR - I have to admit I'm not familiar with this and wasn't able to find a good description of it. We do have adapter-cloudflare-workers. I don't know if that covers it. If it means something more, we might not support it currently (although I do see Vitedge which is built on top of Vite like SvelteKit is and supports it)

One that I've wanted, which isn't supported yet, is dynamic rendering (only do SSR for Googlebot). Hopefully I'll get to that at some point :smile:

[ttytm]

Absolutely!

I'm planning to update the MDN tutorials, just wainting for the SvelteKit final realease, and to gain more experience working with it.

I'm also thinking about how to update the whole tutorial (or add a specific chapter) to show how to take advantage of sveltekit features. Any idea/collaboration would be more than welcome! (please DM me on twitter @opensas if you want to talk about it)

I'm definitely doing the whole tutorial and step by step code along again as soon as this releases for consolidating and bringing the skills up to date 😊. Such great work with the first one! Covers many concept so nicely. A valuable resource for the community. Thank you 🙏

[robots4life]

@opensas I would like to get involved updating the MDN tutorial, if you need help or can think of a way to co-work, that would be fab. And yes, fully agree on the different ways to work with SvelteKit, that would be excellent. Perhaps one of the sections could also be to show how to work with a local (or cloud) instance of MongoDB and/or the use of "Shadow endpoints"? If you like to get in touch with someone learning Svelte and SvelteKit with moderate experience , I am on the Svelte Discord server under the same nick, robots4life. :+1:

[cayolblake]

@benmccann I've been stumbling upon ending up with a compiled JavaScript and CSS just like in the MDN tutorials, so I attempted to port rollup.conf.js to the basic SvelteKit todo app project to find the fact that I can't actually do that.

We're talking about 9 KB 👍 single JavaScript file for MDN's version based on Svelte only, versus, around 2 MB 😲 of multiple JavaScript files for SvelteKit version.

I worked out many of the dependencies and various deps libs versions and reached to the point where I have to define the entry point to input in the config file yet couldn't find one that actually worked. 🤔

I checked the official docs multiple times and couldn't find anything helpful except for some express rollup config params that I couldn't make work successfully. I desperately kept searching about anything related to that, and this issue is how far I got.

Any help here, or pointing to the right direction, or a code snippet would be heavily appreciated! Big time!

@opensas if you can jump in it would be great as well.

[benmccann]

@cayolblake I don't want to have this discussion here as it'd way off topic. Please post on the Svelte Discord for help