In 2024 I am pivoting my stack.
Moving back to the web, from Dart to Nodejs and Express (or Fastify), from Flutter to Svelte, from heavy CMSs to the jamstack fun of Eleventy, spiced up with Alpine. Reasons in a future, more philosophical, probably non-sensical article.
So here are the result; top UI & Components Kits and libraries, the best Headless CMSs and some interesting References to use when building future Svelte + Vite applications and websites. Finally a TL;DR.
Interesting Libraries.
- Dexie.js, a minimalistic wrapper for IndexedDB.
- Turso, SQLite for production.
- Superbase, an open source Firebase (BAAS) alternative (Postgres Db, auth, Storage, etc) and this and this.
- Vercel Postgres, a serverless SQL database designed to integrate with Vercel Functions and your frontend framework.
- Pocketbase, Open Source backend for your next SaaS and Mobile app in 1 file.
- SurrealDB, a multi-model database, with this starter.
- Drizzle-ORM, TypeScript ORM that is production ready.
- Auth.js, Authentication for the Web. Free and open source.
- Lucia, an auth library written in TypeScript that abstracts away the complexity of handling sessions.
- Skeleton, The UI toolkit for Svelte and Tailwind.
- Shadcn-svelte, as a
componentlibrary. - Preline UI, prebuilt UI components based on the utility-first Tailwind CSS framework.
Headless CMSs
- Directus and here.
- Headless Wordpress with GraphQL (via Atlas or Cloudways).
- PayloadCMS.
- Tina and beware of this here.
- Ghost.
- Sanity, and here.
- Strapi.
References.
- SvelteKit and TypeScript Course - Build A Type-Safe SvelteKit 1.0 App
- Understanding Svelte5 runes, more here, and even more here.
- Why not also add Typescript for static type checking.
- Environment Variables: What They Are and How To Use Them, more here.
- Build a Server-Side-Rendering App with SvelteKit.
TL;DR.
So let's dive into some quick (always changing) definitions.
What is Vite?: A (rollup based) front-end build tool (aka bundler) and development server designed for modernnnnnnn-ous webdev.
What is Svelte? And SvelteKit?: As Svelte4 was concern, Svelte was a components framework, and SvelteKit an app framework.
Meaning that if what you need is to inject some simple functioanlity to a page (say one created with a Static Site Generator like Eleventy) then Svelte + Vite is for you (if you want to avoid builds you might prefer Alpine.js, and spice your site up, composing behaviour directly from your markup).
If on the other hand if what you need is to build a full-stack lovely and creepy application then SvelteKit is your way to go. More on this in this video about Svelte 5 with Rich Harris (Feb 1st, 2024).
Got it! So what else would do I need? A component library? Tailwind?
First, try out the technology. Svelte made a partnership with Stackblitz (a fullstack web IDE, like the Figma for code editors), so you can try it out online right from their REPL.
Second, undestand the difference between Svelte & SvelteKit with a practical example. The Svelte team is not making this easier for newcommers as the consciously try to blur the difference. I will make one of this example as I progress with my own learnings.
Third, learn Svelte & SvelteKit, and all their nuances (being aware of Svelte 5).
Fourth, create a small SvelteKit app, concept-app like my The LightningBeer.
Fifth, implement Svelte with a component library like Skeleton in a real production app.
SvelteKit notes
SvelteKit uses filesystem-based routing and apps are server-rendered by default.
A new project in the making will require some SSR (Server-Side-Rendering) along with some pages being generated at build time (just as I do with Eleventy for this site).
"SvelteKit does nicely allow for mixing and matching different rendering types on different pages"
There is an option for that when working with SvelteKit, using `prerender`
When using this option we must consider that that this content can only be updated by building and delopying a new version of the app.
An expected error is created using the error helper from @sveltejs/kit. An unexpected error, by contrast, is assumed to be a bug in your app. When an unexpected error is thrown, its message and stack trace will be logged to the console.