Hasty Treat - What is SvelteKit?

I'm I'm I'm, like, very into it right now, and, there's a huge community behind it of people working on it. So if we wanna talk next generation tools, There's a lot of really cool stuff coming out around this, and I think SvelteKit being on it is only going to improve that. But it's written really cool because I've been building my own, But, you know, server side rendered platform with React that does pretty much most of the same stuff that SvelteKit does just for Yeah. My own stuff, And it's been a whole heck of a ton harder, and I would love if I could just use SvelteKit and rewrite my entire application and not see anybody for, like, a year. You know? But, that's not gonna happen. If I given the option, I would. I I think this platform is seriously good, So if you do underscore underscore layout for your file title,

Feature there's a whole bunch of features in here that are really nice. I think, like, this is what I think that this is what the future of

like SvelteKit,

and you go nuts with it. You don't have to

We did a Svelte show, what, like, a year and a half ago. And since then, I've only done one little thing in it, and, this is making me wanna Give it a another run and build something that's a little bit more,

and I, am very, very impressed.

nice. I'm I'm pretty excited about this. I

Building front end apps is gonna be like is you just pick up a framework

And between that and this project, I think that it's got that is in a dynamic import. So anytime you have a dynamic import in VIT, it does code splitting. So, basically, if you scoop up all of those files, it basically gives them to you in what could be a usable array which is a big one because Sapper and Svelte for a long time, I think kinda lagged behind the TypeScript game a little bit. Yeah. Anytime you write JavaScript in Svelte, you have to put it inside of a script tag.

Just like batteries included,

it it goes even further, the Next. Js, and and a lot of, like, these little like, that glob importing is such a nice Bring all that stuff yourself. You can if you want. Like right? They always give you the option to bring in loaders and plug ins like that, but Sorta out of the box, it just works really, really well. So

Pretty close. 28.

and then a bunch of, like, oh, position sticky still needs

There's still 28 vendor prefixes. The only ones I can think about are, like, the scroll bars or, So you don't have to it's not tile tied to any special host or anything like that.

how many things left, a on demand. So, like, do you have to, like, I am assuming you have to code your app a little bit differently knowing if it's going to be statically

All you just do is lang I think it's just lang TypeScript or it might even be lang t s. I don't have it in front of me.

years years, which is nice. Yeah. Yeah. I just I still remember going to CSS Three plays to copy and paste all of the vendor prefixes.

Still needs, vendor prefixes. It's funny. Like, I haven't written a vendor prefix in

But with and without. Oh, I don't know with with. You know, me and IE 11, I don't even think about it. I just it's it's out of my it's out of my mind. It's in your dust. It's in my dust. Yeah. Maybe, like, 3 years ago in my dust. No. Okay. So let's just say without route.

This is a feature of Vit which I have been Oh my god. Your dad. Your dad.

prefixes that still need to be auto prefixed? Woah. That's more than I would have thought. Oh, here we go. We go. I found the tweet. We should we should have done, like, a game. Guess how many. Chris Coyur. Oh, I have it right now. Guess how many Prefixes. Wait. Is Chris Coyur different than Chris Coyur?

Either way, that's it. You got TypeScript support there, And it is fantastic. It's really cool. Somewhat related, I saw I forget where I saw this, but the other day that there's still something like

Chris Coyur. Yeah. I don't know why I said it like that.

Anyways, he he tweeted, we're a lot closer to not having to bother with vendor prefixes, but there are still

little back back in the good old days.

I think Safari still has it. Yeah. Like, WebKit appearance on a button.

background image, clip path,

Placeholder shown,

35 or 70 different

How many if you drop IE? So guess Chris Coyer.

if you want to host it, you either have to host it as a node app Where you can put Jira on Linode or DigitalOcean

generated or Nope. Not really. No? Well, I mean, it depends, adapters for a bunch of different stuff too. So there's an adapter for begin.com, Properties whatever their their front matter from the markdown files, then load up that data, then pass it along as props, And then you have a blog listing page, and we did that in about 6 lines of JavaScript That can be run. It's sort of like the get initial props, I think, in Next. Js. Yeah. It but it's running client side and server side. They give you a lot of control here. So That's, like, the the the key is that I have that,

So that that means if you're not privy to what that means, it means if you have an about dot Svelte file in the root of your project, it creates a forward slash about page. If you have an about folder with a hello file, that creates an about forward slash hello and TypeScript support, recent ones, So now inside of Svelte, And bundler type of deal that you're getting from there uses ES build, so it's insanely fast. Okay. Lot of lot of jargon stuff that's not super important. But, basically, at the end of the day, you write your apps in Svelte, and you can spit them out into anything you want, and you can host it anywhere.

Oh, and that is serverless functions.

because there are these things called more involved. Yeah. What I'm telling you is that, like, besides the fact that I've been spending so much time, Not in Sveltekit land, but in Vitland.

Really cool thing about this is that it works anywhere, or any of these, Linux box servers,

and that's been a bit of a pain with, Next. Js. And I still love Jex. I use it for for everything. But

can run it as both static as well as They do all kinds of stuff. They have a really awesome editing experience, but what I'm gonna tell you about today is you as a developer,

Flare workers.

cloud funk what's the name of cloud?

the way they did that It's basically you create a file based on the data that's going to be returned.

It is it is very good. So out of the box, you get file based routing like Next. Js.

And then there is an adapter for Netlify,

and I I use some very plugins to do that. But let me tell you, React does not make it easy. They really do not help you with it, especially when you get into code splitting. Yeah. Like, that's, like, a big thing for me is that I've spent so long trying to get code splitting to play nice when you're not using a couple of things. All of the code splitting solutions that the React team and React recommends 5 stars. I'm giving it, 10 out of 10 on IMDb.

there is a lot of automatic magic stuff, but at the end of the day, you have full control. For instance, if you don't want spits out a node app. If you want a a static site like Gatsby, you just Change it to be,

So you have your folder or file system based routing.

And it's like, oh, there's no hydration going on. So I've recently

which is a service that Wes and I both really like. There is an adapter for Cloudflare workers. So if you want to push this directly to Cloudflare workers, you can do that. Same with Netlify Safari, or Vercel. There's adapters for both of those. So if you just wanna get quickly up and running or if you wanna, like, space route that should be very similar to anybody who's worked in JS, or, I just and it's in it's in our staging branch right now, in code that runs on the server or client without having to even second guess it. Can we please get that in nodes?

but, like, I've Tried to host it on Begin before, and it never really panned out. And it's really cool to have a framework that that you can literally go anywhere with it, And then you

the next You know, I I got, right now. So I hope I can give you a good outline about what the heck it is and why you might want to use it. And, Wes, If you have any questions along the way or little things that you want to call attention to, please interrupt me. Otherwise, I'll just I'll just talk about it. So Smellkit, what is it, Who's using it, why might you use it, and what's the status of it? So what is SvelteKit? Well, it's basically a platform the React team does not It's like you just can't use code splitting. But here, and, like, it makes me not feel good for being like, can we just get it? But at the same time, Can we just get it? Like, you know? Yeah.

version iteration of LevelUp tutorials To be server side rendered with Vit, And it worked, but it's not exactly the most fun thing in the whole world you can get around using with React lazy and stuff like that. Either way, With SvelteKit, Require It modifies the config file for you. It installs all the packages, and it gets you going. It's still obviously a little fresh, Yeah. You wanna add a GraphQL server to your SvelteKit project. All you do is you run npx svelte hyphen add GraphQL.

the idea is you don't you don't need to care about that. You don't need to care about any of those details, and it just just works, hashtag, your network tab, your error logs, your console, those type of things that you can see live as they happen. So you're not just looking at a log. What you're looking at is the user clicking the thing and then the network Going off and then the thing firing and the whole thing breaking and then your side turning into a dinosaur somehow. So you'll be able to solve all of those bugs and more If you head on over to logrocket.comforward/syntax, that you could just map over, and that's what we did in our own code.

The site to rehydrate and you just want it to be just straight up only server side rendered with no client side rendering, adapter node to adapter static. There you go. You got a node app or you got a static app.

So it has the file based routing. It has API based routes, which are straight out of Sapper the way it feels. So Sapper was sort of the precursor to this, and

or you can Throw it on Vercel that works just out of the box with that, and then that is Oh, how we have changed. Anyway, sorry. That was a bit of an aside, but I thought it was interesting. Yeah. Just a little girl days,

CSD.

Sick.

Excited to learn about SvelteKit today.

What the heck SvelteKit I I if you have an API route and that API route is returning JSON, you know, like, mas scroll wires and then maybe, like, the the the Highlight color. Yeah. There's appearance, which is important for,

And, before we get started, I do wanna say I've been spending quite a bit of time in SvelteKit lately, specifically because I've been, Is it client side rendered, server side rendered, static I generated any of those things. I I have rocket boosters to Mars on it. It is very cool.

June. I can't even believe it's June. I know that's classic thing. You look at the month, and you're What is going on here? Yeah. This course is actually coming out May 31st, so it's coming out today, the day that we're recording this. So my brain is really, really involved in Svelte care It is all of the above and more as in you can get a SvelteKit app hosted just about anywhere, and you can build to just about anything using what's Called adapters, written

If you have a project where you need a CMS for it, I want you to try Sanity for the next one. Check it out. Sanity dot I o forward slash syntax. That is going to get you double the free usage tier. Thank you, Sanity, for sponsoring.

So Let's get into SvelteKit.

Monday. Monday. Monday.

That shows you, like, movies have actors

soft skill, web development, the hastiest, the craziest, the tastiest TS, web development treats coming in hot. Here is Wes, Barracuda,

Sanity is structured content CMS. They you guess how many offender prefixes are there right now both with and without

and you will get 14 days for free. Check it out. And if you've been to their site, Check out their new landing page. It's pretty, pretty sick. We are also sponsored by Sanity.

or a movie can have actors or other types of people in it, and it's just a really good example as to, like, how to Structure,

Open wide dev fans. Get ready to stuff your face with JavaScript, CSS, node modules, barbecue tips, get workflows, breakdancing,

and why you might want to use it? My name is Scott Talinski. I'm a full Stack developer from Denver, Colorado. And with me, as always, is the US balls.

Boss, and Scott

CMS.

Hey, everybody.

and right away, you're gonna get The actual CMS itself, you can go ahead and start scaffolding out all of your data types, your relationships. They have a really good movie example You npm install Sanity. You can go ahead and scaffold out a sample project right away, npm run dev,

You get full control over over that too. So, like, let's say in your inside of a loader, and we didn't have to write essentially any server side code whatsoever.

You also get, like, layout resets. So let's say you're, like, Three folders deep and you wanna layout, but you want that layout to be, you know, nested a couple layers back, you can do it. I believe it's just dot reset.

You also get some you get layouts.

data loader, your your, you know, your git initial props type of deal, You can return a status code and a redirect and everything from there, and it will just handle it all for you. One thing that I really like is it does Make you think about, like, HTML as a platform a little bit more. You're not dealing with so many platform specific things. I think even is

You would say, like, to dos.json.js, Sick. Sick. Okay.

And then you have a slot component So that acts as basically Cool. There's also a couple neat little small things with SvelteKit that I I thought I should call attention to, one of which is the globbing imports.

that file wraps around any anything that's in in that thing, But, I had good experiences with it. And if you if you, like, know Welcome to Syntex. In this SvelteKit hasty treat, we're gonna be talking all about SvelteKit, specifically

Layout to dot reset, and that will do it. So, you get Uh-huh. Really nice control over there. You get some fancy file title stuff. So if you do a bracket Now LogRocket is the perfect place to see all of your errors and exceptions taking place in a visual context. And what I mean is They actually give you a scrubbable video replay that includes all of the tools that you know and love, like your Slug like a slug inside of brackets that's Svelte, then that is going to be a parameterized really nicely tucked behind the scenes so you don't even realize you're using it. But me as somebody who's really dove pretty heavy into that land, it's really nice to feel comfortable it doesn't really matter. And and by the way, I did get around the the code Code splitting thing in React, we had to use a package called React. I think it's called, like, SSR pre pass from Formidable, low are they called loaders? Only with Svelte, it Compiles away the framework instead of loading the framework like a library,

Svelte Kidd feels like the right blend of magic and the platform.

The I I'm curious what what the actual issue is in node. I think it's just a security hole, and it's Complex. I think it's that. I think they're I think it's doable, but there's a lot of man hours. I've seen people talking about it. I'll see if I can find something about why it's what the problem actually is. But, yeah, I I know seriously. Right? Can we just get, like, a because the having to add either NodeFETCH or isomorphic FETCH or any of those, every single Project, anytime you do any of that stuff is a giant PIA, and sometimes they don't play super nice. So I hear you.

and that file is returning JSON.

the only thing they hold your hand on there, there is, like, an isomorphic fetch included as in, like, You can write fetch calls just works.

that the components will basically insert themselves into. Oh, that's cool.

I I've seen threads about why it's difficult,

CSR, SSR, SSG,

Extending SvelteKit in certain ways because

WTF in here.

I have no idea. I'll just cover our bases there. So Vit. Js, it includes all of the Vit goodness stuff, some of which is, either Babble or Webpack. And if you're not using Babble and Webpack,

hot module reloading Sapper or any of that stuff. So you get some little fancy file title stuff. There's, like, some error error page stuff like that as well where it automatically detects an error page.

little bit of a background knowledge on the underlying Yeah. This episode is sponsored by 2 amazing sponsors, Sanity and LogRocket.

It is built with Vit or Vit or Vit, however you want to Say it. I've been told I've been saying it correctly as Vit, but I've also been told that that I'm a moron for saying Vit. So you know what? like a server side route that you can do anything server side on and return JSON from, And then you can hit that route very easily from the front end to get the data. That is if you need a server side route because you can do a whole bunch In these get initial props loaders that I kinda mentioned earlier. What about, like, a a data layer? Is this something that is opinionated about how you do your data like Gatsby, Or is it just like, no. You go ahead and figure out how you wanna how to load your your data like Next. Js? Yeah. No included data layer. More like Next. Js there. So Okay. No GraphQL, Well, no no anything like that built in, but there is

Build system that's behind there that is the basically, it's the development server

and and that allows for some really neat stuff because you have a special dot Svelte file extension.

Freeform, but at the same time has those same capabilities.

And I'm not gonna go into the specifics of what what's up with Svelte. We have a whole episode on that. We can talk about it. But it's basically the platform for building Svelte apps. You could kind of think of it as like a Next JS type of deal, but it's more flexible than that. So it's not just a Next JS type of deal. It's a little bit more, the things the lessons that are learned from creating something like So KID and and Next. Js are just gonna continue to evolve, and people wanna talk about next generation platforms. Well, they're here. They are these are really, really stinking cool. So That's all we got for now, and, we will catch you on Wednesday's episode of Syntax where who knows what we're talking about because I don't have the episode calendar in front of me, but we're gonna be talking about something cool. We're gonna be talking about let's see. Oh, CSS container queries with Miriam Suzanne, Which, let me tell you, that was a like, that that's a dream guest for me, so I'm so happy we had her on and, happy about that one. So, check it out on Wednesday.

Svelte is a front end framework analogous to maybe, you know, view or react.

It's cool. It's very cool. So that that's, like, really neat. And then there's also this, like, little Svelte add plug in that somebody made. I don't think this is first party, but This is like a plug in that you can use to script to add config to your config as in But it's a feature that I absolutely love, and you can just use this directly inside of SvelteKit without any any hiccups.

really makes it super easy.

and then pass those along and load up that data, load up their for building apps with Svelte.

Then I can use all of those Those markdown files to say, oh, give me the 5 most import dot meta dot

SvelteKit forward slash adapter node, And then you just pass an adapter to the adapter property in the config file, working on a tutorial course for what is, It's very good, and, you also get post CSS out of the box, so you don't have to do anything to get that auto prefix or stuff going. You just drop in some plug ins.

There's also, then you're basically, m for a Full archive of all of our shows. And don't forget to subscribe in your podcast player or drop a review if you like this show.

an adapter is really just a node plug in, and it basically, how it works is if you want to export a Node JS app and just have it spit out a straight up server side rendered Node. Js app, then you import adapter from So you write your code in in a Svelte way. You get the, out of the box. Here's some features that come out of the box. This whole thing's gonna sound like an advertisement for SvelteKit because I'm gonna tell you right now, I really love it. I'm giving it, you know, a plus. I'm giving it, Yeah. They're called loading. It's like a loader function

or you can do the double asterisk and then then double forward slash, whatever. It's gonna Scoop all of the the recursively all of those throughout the next directories. Either way, it returns a module host it in FTP, p drag and drop on a bluehost or something. You can just output it as a static site, and you get your public folder, whatever that is. That's awesome. That that's one

with

And what's cool about that is you can just use that with absolutely no concern whatsoever inside of SvelteKit, And you can scoop up. And there's also Glob eager Taking full advantage of on the new level of Tuts, We're like, it's not trying to take over everything. There's not like a all you do is say hydrate false.

Glob, and then you pass in basically a glob, which is kind of like a regex, but it's not really, where you'd say forward slash your directory forward slash, You know, asterisk dot j s, and it's gonna find it's gonna scoop up all of the JavaScript files in that directory,

So the the basic the syntax is you use the import dot meta, which is like a new thing in e s m, import dot meta,

platform that I've been working on. We got file based routing in our code setup Using these glob imports and a code splits on the glob imports, and this is a feature of Vit, if you don't want them to be promises and you just want those to be imports. You can use Glob eager, and it doesn't do code splitting and just imports them all at once. Between Glob and Glob eager in SvelteKit, those are, like, 2 of my favorite Features of it. So, like, having those available to you in this is just, For instance, like, we were building a markdown blog in The level up tutorials course that I'm working on? Yeah. So we're we're building a markdown blog. And if I wanna have a post listing page, I can say scoop up every single markdown file inside of this folder, and then it gives them to me as an array.

And you hover over it, you can see that network request fire off. Code splitting to reduce your bundle sizes is automatic.

Svelte wait to do everything that's getting in the way. You're more or less using HTML and JavaScript, but the Svelte stuff that does come in here is is it's It's always a nice addition, so to say. So out of the box, also, you get code splitting and preloading. It it just you just say prefetch on the route,

I was I was talking to my dad this weekend, and he's like, hey. Did you hear about container queries? I was like, oh. Yeah. We had Oh, Oh, I had Miriam on the podcast, and he's like, oh, man.

Alright. That's it for today.

Head on over to syntax.f So to say, Yeah.

Cool. Alright. That's it. Thanks for tuning in. Catch you on Wednesday. Peace. Peace.

Anything else to add there? Well, Sveltekit is in beta at the time of recording this. It's I I don't know when it's going to be out of beta, but in my experience, for the most part, everything was rock solid. I didn't have too many issues here or there, maybe some little things. But Give it a try. Fire it up. Make something with it. See what how you feel about it. And, yeah, that that's pretty much it. Check it out. I think this is really going to be the future of platforms. We got some taste of some of this stuff with Next. Js. Next. Js does a great job by all means, and I I think IE 11. Oh, without IE 11?

just, like, absolutely nothing,

the post CSS tailwind setup going in, like, 5 seconds, IE 11, I wanna say listen. Because you dropped the 30, and I'm gonna say that let's just go 35.

I am glad to see another, like,

what you're doing with it, I found it to be really, really super nice To be able to modify those config files. Wow. That seems awesome.

if you wanted to just add Tailwind to your project or you wanted to add post CSS or we used it for MD specs, which is like an MDX

Svelte version or