Тёмный

Learn How To Build Modern Web Apps With SvelteKit 

Joy of Code
Подписаться 30 тыс.
Просмотров 87 тыс.
50% 1

SvelteKit is the Swiss army knife of web frameworks for building resilient apps that run anywhere where JavaScript runs.
👉️ Support
▶️ RU-vid Membership
youtube.com/@joyofcodedev/join
🔴 Patreon
/ joyofcode
👉️ Links:
Learn SvelteKit Playlist:
• Learn SvelteKit
Learn Svelte Playlist:
• Learn Svelte
Posts:
1. joyofcode.xyz/what-is-sveltekit
2. joyofcode.xyz/sveltekit-proje...
3. joyofcode.xyz/sveltekit-routing
4. joyofcode.xyz/sveltekit-loadi...
5. joyofcode.xyz/working-with-fo...
6. joyofcode.xyz/sveltekit-advan...
7. joyofcode.xyz/sveltekit-hooks
8. joyofcode.xyz/sveltekit-deplo...
👉️ Uses:
🔗 joyofcode.xyz/uses
👉️ Socials:
🐦️ / joyofcodedev
💬 / discord
🔖 Timestamps
0:00 Intro
2:15 What Is SvelteKit?
5:00 SvelteKit Blurs The Line Between Frontend And Backend
8:29 Convention Over Configuration
11:17 Best Of Both Worlds: Server-Side Rendering With Client-Side Navigation
16:57 SvelteKit Uses The Web Platform
19:18 SvelteKit Apps Are More Resilient Using Progressive Enhancement
21:02 SvelteKit Runs Where javaScript Runs
22:12 SvelteKit For Component Libraries
22:45 SvelteKit Is Made For Everyone
23:14 SvelteKit Project Setup
24:06 Creating A SvelteKit Project From Scratch
34:12 Using The SvelteKit CLI
45:24 SvelteKit Routing
47:14 Project Setup
48:44 Pages
59:17 Layout
1:03:44 The Power of Nested Routes
1:12:51 Dynamic Routes
1:14:55 Advanced Routing
1:14:58 Multiple Route Parameters
1:16:43 Optional Parameters
1:18:04 Rest Parameters
1:20:18 Matching Parameters
1:23:41 Loading Data
1:23:48 Project Setup
1:24:28 Database Setup
1:38:49 API Endpoints
1:59:28 Showing Page Data Using Client-Side Rendering
2:05:14 Showing Page Data Using Server-Side Rendering
2:13:17 Sometimes You Only Want To Run Code On The Server
2:20:05 Your Layout Files Can Also Load Data
2:29:42 Making Your Data Available Everywhere
2:33:09 Using Data From The URL
2:40:28 Using Parent Layout Data
2:45:09 How Load Functions Work
2:51:19 Working With Forms
2:51:25 Project Setup
2:52:14 Creating A Fake Database
2:55:27 Reintroduction To Forms
2:59:25 Working With Forms Using API Endpoints
3:16:52 Working With Forms The SvelteKit Way Using Form Actions
3:26:31 Progressive Form Enhancement
3:30:44 Customize The Enhance Action To Show A Loading UI
3:37:09 Form Validation In SvelteKit
3:48:27 Advanced Enhance Action Customization
3:53:39 Advanced Layouts
3:53:45 Project Setup
3:54:10 Sometimes You Want Routes With Different Layouts
3:56:18 Using Group Layouts To Group Related Routes
4:03:19 Breaking Out Of Layouts
4:04:28 Layout Reset
4:06:28 SvelteKit Hooks
4:06:34 What Are Hooks?
4:07:44 Creating Routes
4:11:58 Authentication
4:16:39 Transforming HTML
4:19:24 Measuring Page Load Speed
4:21:58 Error Logging
4:23:46 Modifying A Fetch Response
4:25:12 Parsing Form Data
4:28:45 Using Multiple Hooks Together
4:29:53 SvelteKit Deployment
4:30:54 Web Hosting Types
4:36:11 Deploying A SvelteKit Project
4:48:09 Optimizing Your Site
4:59:58 Outro
#joyofcode #svelte #sveltekit

Опубликовано:

 

1 авг 2024

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 174   
@JoyofCodeDev
@JoyofCodeDev Год назад
🔴 Patreon: www.patreon.com/joyofcode 💬 Discord: joyofcode.xyz/invite
@kyouma7067
@kyouma7067 Год назад
Commenting for algorithm, this quality content needs to be seen
@gustihenry749
@gustihenry749 Год назад
Using your sveltekit code snippets/tutorials on your website for reference has been a life saver
@waffle-codes-js
@waffle-codes-js Год назад
Oh sick. Been working with sveltekit a lot recently, excited to give it a watch and pick up anything I have missed :)
@Loui3Hunna
@Loui3Hunna Год назад
Thanks so much for this series and everything you do for teaching the community! You are a true svelte ambassador
@garywaddell6309
@garywaddell6309 11 месяцев назад
OMG I am only 2 hours into this course and I can't believe how good it is. By far the best Svelte course I have seen, can't believe its available for free too. Well done Joy of Code!
@JoyofCodeDev
@JoyofCodeDev 11 месяцев назад
I'm glad you love it.
@7heMech
@7heMech Год назад
For people following the course now, I have to note that pnpx is depreciated, when you encounter it being used in the tutorial you can just replace it with: pnpm dlx
@rumble1925
@rumble1925 11 месяцев назад
Ah gotta love the frontend churn
@Aldraz
@Aldraz 11 месяцев назад
Honestly it still works well, so why not just use it? I doubt it has a different fuction. Either way, they should just keep pnpx, because pnpm dlx or pnpm exec is dumb and too long.
@7heMech
@7heMech 11 месяцев назад
​@@AldrazI didn't have pnpm installed, so I installed it while following the tutorial, and pnpx isn't installed by default with pnpm now. (because it's depreciated) It took me a while to figure it out so I just decided to leave a comment providing a solution which doesn't require you to download more stuff/create aliases.
@Aldraz
@Aldraz 11 месяцев назад
@@7heMech Interesting, because I updated pnpm to the last version and it still works. I didn't know it was somehow separated from that package.
@mathiasodlund
@mathiasodlund Год назад
I will keep watching your tutorials, I've been here from the start of the channel and will continue to support you. I work as a Software Developer using primarily Vue, though, I wish companies would integrate Sveltekit in the future (would switch jobs immediately)
@codewithguillaume
@codewithguillaume Год назад
MY FRIEND this course is just amazing ! Congratulations !
@kyrregjerstad
@kyrregjerstad Год назад
This is awesome, you and huntabyte really got the best sveltekit content!
@black-purple-dev
@black-purple-dev Год назад
You can even say the only svetekit serious content.
@onz9950
@onz9950 Год назад
You're missing lihautan's channel and others !
@bilza2023
@bilza2023 10 месяцев назад
Is lihautan's amost the maintainers of Svelte ????
@NuclearInsanity
@NuclearInsanity Год назад
Just starting learning Sveltekit and you've made me so much more confident and understanding of how it works. Really love that you show the cumbersome route of solving a problem followed by how svelte kit makes things better. Really highlights how great it makes things for developers! Thanks a million!
@JoyofCodeDev
@JoyofCodeDev Год назад
I'm so glad to hear that! 😄
@AlphaKanalBiH
@AlphaKanalBiH Год назад
Just fantastic work, cheers!
@nickstaresinic4031
@nickstaresinic4031 10 месяцев назад
Very informative, very thorough, and very well presented, too. Good job, Matija.
@olafurbjarkibogason7148
@olafurbjarkibogason7148 Год назад
Thank you for all your hard work, it is deeply appreciated.
@JoyofCodeDev
@JoyofCodeDev Год назад
Thank you! 🙏
@jaguar3957
@jaguar3957 11 месяцев назад
By far the best sveltekit course on youtube 👌❤
@talmann
@talmann Год назад
yeah! that's what I was looking for!! thank you sooomuch
@user-jz5vh7sl1d
@user-jz5vh7sl1d Год назад
in love with your course, thank you a lot
@tassilohansen5541
@tassilohansen5541 Год назад
Thanks for kickstarting my career as SvelteKit professional (C)
@Mat12143
@Mat12143 Год назад
You inspired me to get started playing around with Svelte and i want to thank u a lot your content is soo well explained.
@JoyofCodeDev
@JoyofCodeDev Год назад
I appreciate it! 😄
@andrijaoreskovic386
@andrijaoreskovic386 6 месяцев назад
One of the best tutorials in general not just for sveltekit!
@djillian47
@djillian47 3 месяца назад
This address every question i'd have on sveltekit and more.Really great content. Thank you so much for that.
@gitlit5489
@gitlit5489 Год назад
Wow! This is insane thank you ❤
@daniel-nagy
@daniel-nagy Год назад
Svaka čast! 👏
@sistana
@sistana Год назад
Thanks, thanks, thanks. How I wish the world was full of people like you, how I wish I could spread my little knowledge like that my dear friend. Thank you for your teachings
@JoyofCodeDev
@JoyofCodeDev Год назад
You could write a post! 😄
@cv3787
@cv3787 8 месяцев назад
Thanks for the video! Best channel to learn about Sveltekit!
@AakashGoplani
@AakashGoplani Год назад
How awesome is this course 💯
@sebastiandromundo4133
@sebastiandromundo4133 Год назад
This is a gem, thank you
@Linkplay9
@Linkplay9 Год назад
Damn dude! Thanks for releasing this for free ❤
@chmouelkessous164
@chmouelkessous164 Год назад
this tutorial is just awsome thanks for that !🤟
@user-fw4hw3cc8k
@user-fw4hw3cc8k Год назад
Dude! Amazing content! Thanks!
@ElTebe
@ElTebe Год назад
Freakin awesome work, congrats & thanks!!
@adammalec9315
@adammalec9315 Год назад
Joy of course! Thanks a lot for sharing the knowledge
@JoyofCodeDev
@JoyofCodeDev Год назад
You're welcome! 😄
@pablozuta2402
@pablozuta2402 Год назад
Top quality content as always 🚀
@guynatumanya
@guynatumanya Год назад
Now this is a Tutorial 5 hours of 🎉🎉 Thank you
@21Guitars_
@21Guitars_ 7 месяцев назад
Best svelte kit video I've seen so far!
@akmalraj121
@akmalraj121 11 месяцев назад
Awesome content as always !
@darbhasailu
@darbhasailu Год назад
Oh my GOD this is what i needed today thanks so much
@lukatoseus
@lukatoseus Год назад
Awesome, thanks !!
@MrRe-sj2iv
@MrRe-sj2iv Год назад
Great work 🎉
@gadgetboyplaysmc
@gadgetboyplaysmc 11 месяцев назад
really like the "optimization" part here
@dimusss
@dimusss Год назад
Thank you for the great tutorial! It's so awesome 🎉
@JoyofCodeDev
@JoyofCodeDev Год назад
Glad you enjoy it. 😄
@onepointproduction9092
@onepointproduction9092 Год назад
Superbbbbb.... big thanks
@yendar9262
@yendar9262 Год назад
Thank you!
@user-xu7jz4li7e
@user-xu7jz4li7e Год назад
nice! Been waiting for this.
@Manuel-DaSilva
@Manuel-DaSilva Год назад
Excellent!
@JeremyBlack1
@JeremyBlack1 Год назад
Fantastic! Great speed and illustration of key concepts right down to deployment. One area that could use more detail, maybe in another video, is the github, supabase, integration. Or is there another good place to see that which shows local development and then production deployment. Thanks again for amazing content!!!
@JoyofCodeDev
@JoyofCodeDev Год назад
You could have a development and production database and use an environment variable to switch between them based on your environment.
@KumananMurugesan
@KumananMurugesan Год назад
Thank you very much for a wonderful tutorial.
@JoyofCodeDev
@JoyofCodeDev Год назад
You're welcome! ❤️
@budsyremo
@budsyremo 8 месяцев назад
Awesome tutorial.
@precisionchoker
@precisionchoker Год назад
مجهود رائع 🎉
@prashlovessamosa
@prashlovessamosa Год назад
Thank you Sir
@mayanksharma6927
@mayanksharma6927 Год назад
Cool desktop setup 🔥
@voodoochilee6713
@voodoochilee6713 Год назад
Thanks!
@swyxTV
@swyxTV Год назад
wooo sveltekit!
@twd2
@twd2 Год назад
Big efforts ❤
@maxmakhrov7867
@maxmakhrov7867 Год назад
Thanks for that! Tons of tips and interesting info
@JoyofCodeDev
@JoyofCodeDev Год назад
You're welcome! 😄
@namthanhnguyen2554
@namthanhnguyen2554 Год назад
Thank you
@miraclenerdkidchiki6249
@miraclenerdkidchiki6249 Год назад
I was adamant about svelte and svelte kit cuz it didn't feel like JavaScript......but after coming to the conclusion that it was probably the future,i am ready to learn
@explosivecl
@explosivecl 11 месяцев назад
Great video, liked and subbed 👍
@shaftymaze
@shaftymaze 11 месяцев назад
Commenting because this channel should have a million subs. Quality.
@JoyofCodeDev
@JoyofCodeDev 11 месяцев назад
Thank you! 😄
@sammy_vee
@sammy_vee Год назад
This is really help me a lot thank you!
@JoyofCodeDev
@JoyofCodeDev Год назад
I'm glad to hear that! 😄
@user-by8dr9zg4p
@user-by8dr9zg4p Год назад
Thank you very much.
@JoyofCodeDev
@JoyofCodeDev Год назад
You're welcome! 😄
@tandaramandaraba
@tandaramandaraba 5 месяцев назад
if you carefully check this tutorial i think you can be master of svelte haha :D thank you man!
@Jack-vv7zb
@Jack-vv7zb Год назад
you are brilliant
@jamiewalker1745
@jamiewalker1745 Год назад
Amazing! Can't wait for a spare..... 5 hours to play along! 😂
@fazex4185
@fazex4185 Год назад
Thank you very much
@JoyofCodeDev
@JoyofCodeDev Год назад
You're welcome! 🙂
@user-nw8we9ul5p
@user-nw8we9ul5p Год назад
You are literally awesome.
@JoyofCodeDev
@JoyofCodeDev Год назад
Thank you! 😄
@AlexanderDemin
@AlexanderDemin Год назад
Great course!
@JoyofCodeDev
@JoyofCodeDev Год назад
Thank you! 😄
@Ondry96CZ
@Ondry96CZ Год назад
Awesome, love this 🎉 I am sending all bananas for you 😄
@JoyofCodeDev
@JoyofCodeDev Год назад
Thank you! 🍌
@riendlyf
@riendlyf Год назад
Awesome
@WyzrdCat
@WyzrdCat Год назад
I don't get why this video doesn't have hundreds of thousands of views if not a million plus
@dejangegic
@dejangegic 10 месяцев назад
That tiling window manager looks really good
@JoyofCodeDev
@JoyofCodeDev 10 месяцев назад
It's Pop Shell.
@nidhish6966
@nidhish6966 11 месяцев назад
5:25 CORS is not fun stuff 😅😅. I have been using svelte kit for 3 days and I can already see why its so good. Thanks for the brief tutorial !
@JoyofCodeDev
@JoyofCodeDev 11 месяцев назад
Thank you! 😄
@gramaphenia
@gramaphenia 11 месяцев назад
Good morning, teacher. First and foremost, I must thank you for the great dedication present in this video. The content is excellent. I don't want to take up too much of your time. I just want to let you know that, as a self-taught student, I find your work invaluable. I'm reaching out to briefly mention that while working with this video at the 2:20:00 mark and in the +page.svelte file, an error appeared when using the word 'post' in the 'hgroup' and 'div'. I'm mentioning this because it might be of interest to you. The only way to solve this issue was by removing the three 'post' occurrences, and that way, all the content I was expecting rendered on the screen, and my errors disappeared. Well, I hope I'm not bothering you with my comment. Once again, I'm deeply grateful, as other methods were giving me quite a hard time. I hope you have a good week.
@JoyofCodeDev
@JoyofCodeDev 11 месяцев назад
I appreciate you for taking the time to provide feedback. 🙏
@AakashGoplani
@AakashGoplani Год назад
Can you please add one video dedicated for debugging SSR flow in SvelteKit? Thanks!
@ExiT93oRg
@ExiT93oRg 11 месяцев назад
I'm using Angular, but thiiiis man... this is a m a z i n g 🚀 Why? => SIMPLE => CLEAN => INTUITIVE PS: Keep up your interesting presentation because you are cracking these learning videos ⭐
@minikame2272
@minikame2272 Год назад
In the time it must have taken to craft this video, SK went and did away with the need to manually import ./$types !! It's now built straight into the VSC extension.
@JoyofCodeDev
@JoyofCodeDev Год назад
I started the SvelteKit series over 3 months ago! 😄
@aidsadsl999
@aidsadsl999 Год назад
thanks for this amazing tutorial. I'm wonder if there is a way to create SPA for my website?
@JoyofCodeDev
@JoyofCodeDev Год назад
There is: kit.svelte.dev/docs/single-page-apps.
@dgtemp
@dgtemp 10 месяцев назад
2:22:15 How did message data and post data combined together into the type PageData? Shouldn't you need a LayoutData type to get the message string?
@MrRe-sj2iv
@MrRe-sj2iv Год назад
Could you please make one video for i18n? I've use typesafe-i18n but somewhat not satisfied.
@jricardoprog
@jricardoprog Год назад
Parsing formData on all urls can be a loophole for attacks and parsing all data as well. It is open to attacks focused on slowing down the system, increasing memory consumption... I believe that parsing only what matters and where necessary would be correct. Does anyone know any form parse lib that does this, receives the expected keys, reads the data without loading it into memory and parses only what is enabled?
@antepenava841
@antepenava841 Год назад
amazing! great work, just one question did I miss it maybe or you didnt cover query params?
@JoyofCodeDev
@JoyofCodeDev Год назад
There's an example using query params.
@bitterheat3415
@bitterheat3415 Год назад
What VSCode extensions were you using during this video?
@mr.nefario
@mr.nefario Год назад
Interesting. Did you decide to check by this video if it's still worth to write this kind of long tutorial things? Inspired by the last video.
@JoyofCodeDev
@JoyofCodeDev Год назад
It's easier to discover and I already made the series which serves both audiences.
@greendsnow
@greendsnow Год назад
Now that's something! Thank you! How about mobile development with Svelte? That area is never covered anywhere. Svelte Native is a black box. Svelte with Capacitor is a complete mystery. Also PWA with Svelte... How does it work?
@SoreBrain
@SoreBrain Год назад
I would like to see something like svelte + electron too
@foitzer4839
@foitzer4839 26 дней назад
1:33:00 what happens if slugify gets the same title? It adds something to be different like "same-title1"?
@forno_nicolas
@forno_nicolas Год назад
Vercel is awesome
@redemption330
@redemption330 8 месяцев назад
"What does X do? X gon give it to ya" got me rolling ngl 😂
@muadzrosli
@muadzrosli Год назад
Hi. May I know the theme you were using for vscode? Love the colors
@JoyofCodeDev
@JoyofCodeDev Год назад
joyofcode.xyz/uses
@thedevnoteyt
@thedevnoteyt Год назад
Thanks for this awesome course. One question, do I need to have a basic idea of Svelte for this course ?
@JoyofCodeDev
@JoyofCodeDev Год назад
Yeah! 😄
@dev.mufeedcm
@dev.mufeedcm Год назад
did u learn svelte 😄
@thedevnoteyt
@thedevnoteyt Год назад
@@dev.mufeedcm still learning :)
@d42
@d42 4 месяца назад
great work. are you working on something similar for the new sveltekit version?
@JoyofCodeDev
@JoyofCodeDev 4 месяца назад
SvelteKit is not changed.
@Ricardoromero4444
@Ricardoromero4444 Год назад
Please do a follow-up using TRPC!
@SoreBrain
@SoreBrain Год назад
Joy of code seems to be the kinda svelte guy that would say sveltekit doesn't need trpc but I would like to see a follow up too. Would probably catch the attention of t3 Fans.
@adrianfgutierrez2836
@adrianfgutierrez2836 Год назад
Nice job 😮. Exist a git repo of this code?
@JoyofCodeDev
@JoyofCodeDev Год назад
Not every section has it but each one has a post you can find in the description.
@kickbuttowsk2i
@kickbuttowsk2i Год назад
🎉🎉🎉
@Frensthescandinavian
@Frensthescandinavian Год назад
thank you!!!🤩
@budsyremo
@budsyremo 8 месяцев назад
I noticed something : At 2:08:22 const response = await fetch('/api/posts'); const posts : Post[] = await response.json(); So do we need to have await for a response too since we have already received the result ?
@kyoumei
@kyoumei 6 месяцев назад
The json() method returns a promise, so you need to await it. Otherwise, you'll get a promise of Posts which you can't really do much with synchronously
@esdev
@esdev 8 месяцев назад
what shortcut use to generate or JSON.stringify() in one go?
@JoyofCodeDev
@JoyofCodeDev 8 месяцев назад
I made a video on it: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-MjcG-l56i6g.html.
@esiwk7
@esiwk7 Год назад
한국어. 자막이있다면 너무좋았을거에요. 감사합니다
@nykowow
@nykowow 3 месяца назад
You created an api with svelte, does that mean I don't need a backend server because I can do everything with svelte except the database?
@JoyofCodeDev
@JoyofCodeDev 3 месяца назад
It depends what you're doing.
@franku3510
@franku3510 Год назад
5 = roman numeral V , 1 = I , 7 = T, 3 = E therefore 5173 = VITE
@novakoder
@novakoder 11 месяцев назад
Sorry, about the section of form enhancement around 3:35:00 you say that you can do checks before the form submits, and use "check if username is available before submitting" example. Can I ask how can you perform this type of action if it needs to be performed by the server, checking the database? Using an API call? I think that using enhance, I will display the error after I did the check in the server file, am I wrong?
@JoyofCodeDev
@JoyofCodeDev 10 месяцев назад
You do it inside the form action.
@novakoder
@novakoder 10 месяцев назад
@@JoyofCodeDev Let's say I'm using PocketBase as database, I can't (or usually I don't) use it in the +page.svelte but in the +page.server.ts. You will do it with an api fetch or something similar?
Далее
Spice Up Your Site With SvelteKit Page Transitions
17:45
Rich Harris on frameworks, the web, and the edge
34:10
Просмотров 109 тыс.
кажется, началось
00:45
Просмотров 447 тыс.
would you eat this? #shorts
00:23
Просмотров 1,8 млн
Understand How Data Flows Through SvelteKit
25:59
Просмотров 18 тыс.
How To Not Suck At Design For Developers
14:23
Просмотров 81 тыс.
React VS Svelte...10 Examples
8:35
Просмотров 539 тыс.
You don't need a frontend framework
15:45
Просмотров 117 тыс.
Svelte Is Good For Beginners
9:28
Просмотров 75 тыс.
The Svelte 5 Guide: Runes And Universal Reactivity
21:41
Svelte 5 is Bigger Than You Think
9:35
Просмотров 17 тыс.
кажется, началось
00:45
Просмотров 447 тыс.