Skip to main content

Svelte & Vite DevOps

A guide for self-guiding oneself on how to get some sort of guidance in this new Vite and Svelte-guided dev world

February 19, 2024 - 3 min. read


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.

Headless CMSs



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.

svelte javascript

← Back to archive