SvelteKit is my mistress

SvelteKit just hit version 1.0 and provides an awesome set of tools for building fullstack web applications. Let's take a first look at its features and compare it to other frameworks like Next.js and Nuxt.
#webdevelopment #javascript #TheCodeReport
💬 Chat with Me on Discord
/ discord
🔗 Resources
- SvelteKit announcement svelte.dev/blog/announcing-sv...
- SvelteKit Docs kit.svelte.dev/
- Svelte in 100 Seconds • Svelte in 100 Seconds
- Subscribe to Beyond Fireship for the Full Tutorial / @beyondfireship
🔥 Get More Content - Upgrade to PRO
Upgrade at fireship.io/pro
Use code YT25 for 25% off PRO access
🎨 My Editor Settings
- Atom One Dark
- vscode-icons
- Fira Code Font
🔖 Topics Covered
- SvelteKit vs Next.js
- SvelteKit vs Nuxt
- Svelte vs React
- Build SSR apps with Svelte

[@spicywasab]

Finally, the JavaScript church I joined is now officially recognized.

[@danielbolivar9134]

LMAO

[@viraj_singh]

your prayers/pull_request have been heard/merged

[@Kabodanki]

the time is ticking, in 1 years it will be something else

[@ucielsola]

hahahah fucking yes

[@dongums]

Hopefully, many SvelteKit jobs popup

[@quinncasey120]

"I would close my eyes and pretend they were svelte" LOL

[@martinkulik9466]

I don't code, just researching how it works, but most of channels recommend vuejs but this one doesn't even mention it, so perhaps the opinion is not as objective

[@EduardoEscarez]

​@@martinkulik9466 He has recommended Vue (and related tools as Vite) in the past, and also you shouldn't take so serious this channel 😅

[@karl2673]

SvelteKit happened to be the first JS framework I ever used, so every time I looked at react code I'd think "why is this so complicated if it can be this simple?". I guess I am a spoiled web dev because of it.

[@i_dont_likevodka3062]

I worked with react, Vue and Svelte (a bit). react is garbage

[@diegoavendanohernandez9908]

I think that of javascript cause I learned python first haha

[@minnow1337]

As a long time react dev just picking up svelte I immediately thought the same

[@mustafazakiassagaf1757]

I tried sveltekit kit and I don't like it lol. there's some typescript stuff that need work around that makes me frustrated.

[@vaisakhkm783]

after learning c,cpp,java... js was a breeze... until i saw react and throwup... i stopped front end at that point until i discovered svelte....

[@gasparsigma]

Vercel smartest move was to hire the one guy that could threaten their market share. Now whether React remains king or Svelte takes over, Vercel will be on the winning side

[@Tobias-mz7nm]

Angular

[@gasparsigma]

@@Tobias-mz7nm Angular has been in slow decline since 2018, I think it's unlikely to rise again but who knows

[@MeatCatCheesyBlaster]

we'll all probably switch to web components or something completely new eventually

[@gasparsigma]

@@MeatCatCheesyBlaster yeah, svelte compiles to web components

[@ripple123]

@toast i can’t wait for this day

[@crowdozer3592]

Thing I loved about Svelte is their interactive tutorial. In terms of building a working app, it took me from zero svelte experience to 90% of the way there. Figuring everything else out was really easy and intuitive.

[@jonnyd6087]

That's awesome! Been doing angular for 3 years but the ecosystem is so closed off from non-angulat-specific packages I am looking to learn svelte now.

[@adreto2978]

@@jonnyd6087react is better if you’re looking for work otherwise up to you and yea I realise this is 10 months old

[@Eidolon108]

Man web development is fucking crazy. I can't believe it but I honestly think systems programming is simpler at this point

[@everyhandletaken]

Yep, it moves so rapidly & so many “features” that get added & usually just cause more complexity. SvelteKit is the most sane framework of them IMO

[@perregrinne2500]

Never stopped to think about it, but as a guy whose job is writing both, you're right.

[@minikame2272]

Don't even start. As a kid I would write little homebrew PSP games in C++ and the haphazardly documented open source libs, then I picked up C#, built stuff in Unity for the hell of it even though the tooling wasn't anywhere near as sophisticated as it is now... but web development? It fucking broke me.

[@fifty6737]

With Rust yea both web & system programming is much more sane using Rust compared to the wild west that is JS Frameworks, but to be fair because the JS World is changing and moving so rapidly we get all the nice things and innovations happening

[@everyhandletaken]

@@fifty6737 I wish I was smart enough for Rust life, hopefully one day I will get there & although I am on the JS/TS side, totally agree with you.

[@isdeonf]

I've worked on a few large-scale Svelte/SvelteKit projects, and lots of large-scale React projects in the last years. I can attest that Svelte simplicity and well-thought architecture makes it much harder to break stuff and hurt performance when compared to React projects. It's also much faster to dive into your teammates code since there are fewer lines to understand (and most code is just basically native HTML and JS).

[@leap8351]

Coming as a rookie Nuxt developer (with some medium-sized personal project experience) and after watching this introduction video, I myself don't find SvelteKit as simple as Nuxt. For simplicity, it comes to balancing convention vs configuration. (Like React is just too much configurations and choices and they trynna balance that with Next.js, and Angular's too much convention) And just from watching this video, I see a little too many conventions in SvelteKit compared to my experience of using Nuxt. Also, page configurations through `export const`, just curious would IntelliSense support this? Since you have some experience on large-scale projects, would you say that these design decisions are trade-offs out of concerns for the robustness of large apps (like a bunch of pages that start with `+`) so it would be "harder to break stuff and hurt performance"? If you have experience with Nuxt, how would you rate Nuxt from the robustness perspective?

[@isdeonf]

@@leap8351 I’ve never worked with Nuxt so I can’t compare. The biggest feature in SvelteKit isn’t the metaframework itself but the fact that you write Svelte. To write stuff in Svelte is as productive as one can get for reactive frontend development. Really, try it in some project. Regarding the file system decisions, SvelteKit 1.0 just launched and all the projects I’ve worked on were made in older versions of the framework, so I still have no practical opinion wether it is a good change or not. But if you’re not amused by SvelteKit 1.0+ way of handling routes and files, you can always use alternatives like Astro, Routify, or even Svelte itself with Vite and a client-side router such as Tinro. I myself used Tinro for some of the projects who were SPAs when SvelteKit didn’t even existed yet.

[@haddonjames5829]

agreed man! I messed around with Svelte for a couple hours when I first heard about it and loved it. it's simplicity was amazing and it truly seemed like a framework that was revolutionizing frontend development

[@FabianD1991]

Pienso lo mismo, ya ningun framework tiene sentido, vamos Svelte!. a seguir creciendo!.

[@radimhof]

SvelteKit is my favorite meta-framework. Hands down to all people who made this happen.

[@simplytom1213]

Ikr? Why even struggle with React when you can just use Svelte.

[@Fighter178]

When choosing a framework to "marry" I looked at Solid, Svelte & React (in that order). Svelte was the only one that I really looked into, and was the only one I ended up using. Honestly, some may say that it has a limited community, but now (it's not React, mind you), it's got pretty decent. The only thing that I had to make myself was a Modal component, maybe I'll add that little thing to GitHub and NPM someday.

[@rayaqin]

I don't think you know what hands down means.

[@Xe054]

@@rayaqin Perhaps the gentleman meant to say hats off. I for one tip my fedora hat and welcome our new framework overlords.

[@tonyb3123]

@@simplytom1213 because Svelte is less type safe. More likely to be buggy

[@isaacfink123]

The best feature of sveltekit is the amount of typescript support, automatically infers types for components and routes, and the page data is typed as well

[@peppi69]

Svelte and Sveltekit is amazing. For me it's the first framework that feels natural to work with.

[@gonzalobruna7154]

how about if you compare it to next 12 or 13? I have never tried those but I would love to hear an opinion first.

[@maskman4821]

I have bulit the same app with Svelte/Sveltekit, React/Next/Remix, Vue/Nuxt, Astro and I end up building everything with Sveltekit, I am migrating apps made with old versions to version1.0, Sveltekit is the smartiest, advanced framework we could ever have, in order to have such experiences you gotta try them all to conclude with such comment 😅

[@rifaldhiaw]

A masterpiece is here. Looks way simpler n easier than other frameworks

[@brokula1312]

Nuxt3 is very simmilar

[@arturoaguilera5167]

+masterpiece.ts+quiwik+is+most+easy

[@godnyx117]

What about Solid and Qwik? Have you tried these?

[@AzureFlash]

I haven't done a lick of webdev in the last 5 years but SvelteKit still feels life-changing

[@KT-pi3zg]

Been using Svelte for two months, has absolutely everything you could thing of in a framework

[@faceboy1392]

can't wait for a beyond fireship sveltekit tutorial, that'll be so helpful! Keep up the great vids man!

[@gastherr]

Code report is both fun and learning. Thank you for making it that way

[@johnnycatsville5486]

3 years ago I had to choose a framework I would learn and use for my Frontend apps. Sorry React, Vue, etc but Svelte is my most favorite thing ever, so simple and elegant, hope it will he around for a very long time :)

[@SuperQuwertz]

You choose the right starter-pokemon

[@bagr4ever]

of course it won't, its javascript

[@SuperQuwertz]

@@bagr4ever Why are you hurting us with the truth?

[@sincethatmoment]

javascript ecosystem is a hot mess, I hate it. I hate react but have to use it for the job.

[@BHVampireLF]

I thought it would be very difficult to change from React to Svelte, but it was super easy, even easier than moving from React to Solid, just because the syntax is super logical, you never ask yourself "WTF is this s*", "Why would they do that, I've read the whole documentation, dozens of videos, I know how to do it, but I still don't know why". Svelte is a tool that works at the rhythm of your mind. It's s basically how React should have been since the beginning, it removes all the things I hate from React and improves the good stuff 100 times. It's, indeed, a masterpiece 10/10.

[@bjunte2113]

I chose Svelte for every project since I discovered it 2 years ago. Best there is😍

[@kalvinniam7185]

I am so excited to this culmination of thousands of hours of work, both from the Svelte core team and the wider community, and I think this is the most enjoyable way to build production-grade websites, as a solo developer working on a small project or part of a large team.😍

[@lingais]

Would love for a more up to date tutorial on Sveltekit! Most of the current tutorials are outdated due to the breaking changes and makes it really hard for a beginner..

[@JeanDidier]

Everything is up to date in the official docs...

[@josk8936]

Likely with the lunch of 1.0, we'd see more and more great tutorials for Svelte and SvelteKit

[@maskman4821]

Huntabyte has the best Sveltekit tutorial 😘

[@copperbadge1]

Your meme game is top notch without ever distracting from the information presented, well done!

[@workflowinmind]

You make my life so much easier to be on top of webdev news, thanks a lot

[@typescript_evangelist]

Started learning svelte today. I've never felt more alive. Very clean syntax, easy to grasp.

[@stef2528]

So Awesome! We finally reached Version 1.0. I'm so excited about it! Thanks a lot for all your work and care you ladies & guys did put in! 🤗

[@xeon7879]

Have been using it for quite some time now and it‘s just a great dev experience

[@LoneIgadzra]

I love Svelte and will never go back to literally anything else for a SPA. However, I had a lot of bumps understanding SvelteKit from the documentation due to lack of thorough introductory explanations and sentences (this video is much better than the docs). But Svelte itself is just so easy, and solves everything that made previous frameworks hard to work with and reason about.

[@Ibrahimdevelopment]

Excited for the upcoming sveltekit course! Just got the pro membership just for it!

[@Poohbify]

I neeeeeeeed to understand how you grasp these concepts! I feel like I'm staying afloat but sinking under the water every so often when I'm trying to understand new development concepts.

[@infty5829]

I just love Svelte & SvelteKit - I tried all the other big JS Frameworks before and nothing is as convenient to use.

[@adampezdel7190]

song name at the end is Mozart - Symphony No. 40 if anyone was curious

[@dc22199x]

The pleasure of using sveltekit 😌

[@dprophecyguy]

I searched his channel more than 5 times since yesterday waiting for this video to be dropped.

[@zb2747]

So happy for svelte. I hope in 2023 we’ll see startups and companies alike choosing sveltekit to build their web apps

[@DEVDerr]

already using it in a company 😅 it's extremely cool and joy to work with

[@flogginga_dead_horse4022]

This is great. I had been waiting for a real release of this!!

[@DrShmuck]

1:10 A fix for this problem is to configure your editor to sort by filename and to increase the indentation. That way it's obvious which +page belongs to which folder.

[@berk473]

Svelte sounds very promising. It will be my first framework after doing my projects in vanilla JS

[@Raykazen]

Having both deployed svelte and svelte kit in production, I can say that this is a really great framework to get into, the learning curve is very favorable to a less experienced team while being really good performance wise for a more experienced team

[@jonnyd6087]

Can you get me a job? Pretty please 🥺

[@SirDamatoIII]

The first time I am excited since your VueJs video. Very happy with Vue since, but it seems time to switch. Looking forward to the full tutorial. Thanks Jeff!

[@SirDamatoIII]

Ahh, I can still dream.

[@BrandonAaskov]

I have been patiently waiting for this exact moment. Great coverage, thank you for that video. I’m gonna get building now…

[@marcinchaciej]

You can use symbolic-links stored in separate "pages" folder and name it like directories if you need quick access and the new file structure seems confusing to you (I was ranting for a day but then understood why that change could be superior to previous instances, especially for more complex projects)

[@bashscript2805]

I love Svelte as a backend developer!

[@RyuuuGamingUnlimited]

Excited for the tutorial 🔥🔥

[@levirichardson8505]

i worked on a personal project for about 3 years. went from really basic express/pug ssr to next.js to sveltekit and sveltekit was hands down my favorite framework of them all. it's actually fun to work with and i'd suggest it for any web dev

[@zachsanchez1644]

Hilarious, Informative, Interesting. He's done it again. Great video!

[@simonleonard4084]

Would love a more detailed tutorial 😃

[@MattHeslington]

Channel called @Huntabyte - great tutorials

[@godnyx117]

I'm learning Svelte and it seems very nice! I first started with Deno's Fresh as it is supposed to be "fast" because of Deno but after reading Deno docs, I gor frustrated and thought about looking at Svelte and it's much much better than Preact! Svelte and they way the do things also inspired my for the design of my GUI toolkit that I'll start writing when I finish my programming language.

[@Kat21]

I’m excited to try sveltekit

[@arteuspw]

LITERALLY! a video about sveltekit 🎉

[@omomer3506]

I just read about it, and you updated a video, man your quick,

[@mattplaygamez]

Slick, @fireship Thanks for “leaking” that you are going to do a full video on svelte (kit) on your other channel. I'm already looking forward.

[@owen_nx]

I know the react stans are here but svelte is just so smooth. It woos me.

[@DuckyyFuzzz]

IMO it looks like Svelte is going to bring non-JS Eng into web dev with is a good thing! Most JS Eng would probably still prefer next but interesting to see the growth of both ecosystems

[@marcelbricman]

really dont love the file naming. working with that in vscode is a pita. does anyone know if there is an SFC variant for SvelteKit?

[@LKNim]

What is +loading.svelte in 1:00 ? Can't find it in doc.

[@Ryguy12543]

would love to see a continuation of the sveltekit full course :) the fkit project has so much potential :)

[@HONjramiroz98]

cant wait for the svelte tutorial!!

[@tinmank]

Since I started using Svelte I never felt frustration but, curiosity. I had to learn React because it was the cool kid on the block, but I never liked it. Next made me love it a bit that's it.

[@typescript_evangelist]

Cool kid on the block😂😂

[@fibredeneige]

Fantastic vid and fantastic framework

[@NotTheHeroStudios]

I got here early this time! I'm excited to check it out

[@fev4]

I like that you ran VSCode to review Sveltekit 1.0 on a Nintendo Switch (4:09) /s

[@andrevanrensburg5437]

We are waiting for the fireship framework❤

[@DenzelBraithwaite]

All of your videos are hilarious lol, I don't know how you make web dev so funny.

[@metatronicx]

wonderful just wonderful. Now I can start working with it

[@Thorhian]

Good to see Elixir Phoenix above Svelte lol. Anyways, thanks for the info Fireship!

I'm a Angular dev, i love angular, and sometimes i have to work with React, and that makes me feel sad, so i'm learning svelte so i can wololo lots of React devs out of their madness. 💗

[@cre8ive65]

Lol I've have a Sveltekit app in production for over a year. Sure the breaking changes were a pain in the ass, but I found them significantly more tolerable than putting up with Next/React.

[@dannyvcf]

Man, I waited so long until Svelte became mature, since Sapper.

[@kimeiga]

I came here to say this is such a long way since sapper

[@aritark]

i was really hoping they'd be able to put in incremental static generation in 1.0

[@abdallahshuaibu2641]

Thanks for the review

[@krtirtho]

*"I'm web developmentally frustrated"* is the single most funny pun of all web development history

[@danvilela]

Finally this is out! Took long enough.. Like Nuxt 3. But for me it has the same problem as making every js file called index.. Really hard to find the file already opened on vs code.. everything with the same name, I hate that!

[@flogginga_dead_horse4022]

exactly...

[@AlecMaly]

Great content, thank you!!

[@ChrisJaydenBeats]

Now all we need is the Svelte ecosystem to mature a bit more. Svelte Auth is a step in the right direction.

[@syedalbaher]

Appreciate Your Efforts, Love From Pakistan ❤❤❤❤

[@zeldazamora]

I too love using SvelteKit on the Nintendo Switch

[@Bilchuck0511]

it's time to rewrite all frontend applications on the job in new framework 😍😍😍

[@noodle-eater]

I always wandering what framework I should pick for web dev in node js, I think I am gonna start here.

[@AndreasBeder]

Svelte felt instantly intuitive and very enjoyable while angular (and react) felt old and overcomplicated in the first and second place. To be fair I worked with nuxt3 which is kinda similar to svelte so this is may the reason for my initial thoughts.

[@fieryscorpion]

For me, Angular feels easiest and most intuitive. Maybe because I'm mostly a backend developer doing .NET and Java projects.

[@SaidElnaffar]

Need more on SvelteKit!

[@wew8820]

if you like svelte, I recommend trying to take all these concepts one step further by going totally SSR with your fav lang + HTMX

[@utsavdotpro]

Why is this a Code Report and not just a video on SvelteKit?! Good content tho (as always) 😀

[@JuicyBenji]

Too many exciting things are happening in this space. I'm already overwhelmed with just wanting to learn more about Next and Qwik, I don't think I have the capacity to go down the svelte route as well.

[@minnow1337]

I’m switching from next to sveltekit lol. It’s really easy to pick up, took me a day with their interactive tutorial.

[@kevinmitnick1301]

@@minnow1337 Hey Could you please share any course or tutorial that teaches full svelte , I found many of tutorials are half assed .. would really be thankful

[@minnow1337]

The official svelte documentation has an interactive REPL tutorial that you can go through pretty quick. For svelte-kit I would read the get started section in their official documentation. I would also look to the vite docs since svelte-kit is built on top of it. In my experience, reading documentation is always more concise, comprehensive and up to date than relying on video tutorials. Most of the time youtube tutorials are just programmers following the get started section in official documentation anyways.

[@maskman4821]

@@kevinmitnick1301 Huntabyte has the best Sveltekit tutorial 🦾

[@AlanDanielx]

Was waiting so long for this moment ... 🥳🥳🎉

[@javioverflow]

I'm failing to see how this is anything new when we already have Vue 3 & Nuxt 3 that has all these "groundbreaking" features. Nonetheless great video! I love how summarize it is!

[@brian_ball]

Jeff, idea: A video where you just recap all the videos you made this year - with brief descriptions of each - while pointing out their YT stats.

[@seyti945]

I love svelte and kit but I miss one small little thing: partial hydration… Everything would be perfect then (with the file names back to the former system)

[@AbrarAhmad-mz8vl]

Excellent video editing skills

[@November17th]

Awesome 😎

[@rahulxcr]

It's fun using Sveltekit.

[@aminameera9001]

can someone please tell me whether should i learn react vue or svelte(this is gonna be my first framework )IT realy frustrating to choose. Will I be able to understand the concepts of web dev if i start with svelte

[@andreasnulein782]

was waiting for this video ^^

[@JunkyZice]

Thank u sir, nice package of information 📦

[@ComisarioLobo]

This is great, thanks!.. Can you please elaborate how to achieve end to end type safety? For instance, in a T3 app we rely on TRPC, does this mean that sveltekit is enough in it self?

[@technoe02]

In the days of Nginx and containers there's no reason to cram 40 routes into your repos. Build single purpose pages and host them behind a reverse proxy for simple builds and deployments

[@pixiedev]

does svelt ssr works in vercel?

[@windar2390]

Best. Framework. Ever.

[@mohammedalkhateem]

How can I review it on a Nintendo Switch as well?

[@kalakxfif9473]

i would like to get into mobile app development, which cross-platform framework would you guys recommend me?

[@devilslie4074]

"Webdevelopmentally frustrated" LOL

[@bocdagla]

I feel like we're going back how php early worked on every front except that we're doing that in typescript or JS