SvelteKit Crash Course - SSR, API Routes, Stores, Tailwind CSS, and More!

In this video, we'll create a Pokedex using the PokeAPI. We'll also use Tailwind CSS and its new Just-In-Time compiler (JIT).

00:00 - Intro
01:00 - What We'll Build (Pokedex)
02:00 - What is Svelte and SvelteKit
03:00 - Project Setup and Svelte Kit Intro
10:00 - svelte:head
12:00 - Svelte Layout File
14:30 - Svelte Stores
20:00 - Reactivity and Consuming Store Data
24:45 - Tailwind CSS Setup
33:00 - Displaying Pokemon
39:00 - Adding Search and Svelte Binding
45:50 - Dynamic (SSR) Pages for Each Pokemon
54:10 - API Endpoints
57:36 - Svelte Animations

_____________________________________________

Newsletter 🗞
Interested in exclusive content and discounts? 🤯 Sign up for the newsletter!
_____________________________________________

Connect with me 😀
_____________________________________________

COURSES 💻

[bigdusche]

By far the best tutorial i have had this whole year. Coming from Vue and React, Svelte is a breath of fresh air.

[szabolcsjobbagy]

THERE ARE SOME CHANGES IN SVELTEKIT FROM AUGUST 2022,
these are different:


ROUTING ->

06:00
- In the "routes" folder the PAGES' FILE NAME is not "index.svelte" any more, the name should be "+page.svelte" (it should start with the plus sign)

08:45
- If you want to ADD A NEW ROUTE (e.g. "about"), you should CREATE A NEW FOLDER ("about" folder) INSIDE the "routes" folder,
and then a "+page.svelte" file inside that folder

45:50
- It's the same with "[id]" routes: Create an "[id]" FOLDER, and then create a "+page.svelte" file inside that folder

12:00
- The LAYOUT file's name is not "__layout.svelte" any more, but it should be "+layout.svelte" (it should also start with the plus sign)



TAILWIND CONFIG FILE ->

28:00
- In the "tailwind.config.cjs" file the "purge:" is not used any more, we should use "content:" instead



DATA PRELOADING (SERVER SIDE RENDERING) ->

48:00
- The "load" function should be in a separate JavaScript file (+page.js) in the same folder as the +page.svelte,
and the +page.js will send the fetched object as a prop to the +page.svelte:

+page.js:

export async function load({ fetch, params }) {
const id = params.id
const url =
const res = await fetch(url)
const pokeman = await res.json()

console.log(pokeman)
return { pokeman }
}

+page.svelte:

<script>
export let data;
</script>

<h1>{data.pokeman.name}</h1>




I also recommend to install "Tailwind CSS IntelliSense" EXTENSION for VS CODE already in the beginning,
it will help you a lot when creating the Tailwind classes.

And also install "vscode-icons" EXTENSION for VS CODE,
so you can see your folders and files in the explorer much better!


To deploy the final Sveltekit app,
I recommend Vercel, Netlify or Cloudflare Pages,
for other hosting sites you need to setup an adapter.

I hope I could help you with saving time, you don't need to find these changes at different sources.

[denizorsel]

Hey James,
1-link for tailwindcss setup is no longer active.
2- in the dynamic link section 48:18 it is no longer required to mention page in the load function. Instead just use params . Otherwise it will throw a tantrum.

Thank you for the effort. It is a great tutorial!

[MichaelJohann]

James this is just perfect. Fast paced, no bullshit bingo, multiple aspects in under 1 hour. Thank you so much.

[kenjones]

This is REALLY GREAT, James! Now that I've seen this, I wouldn't be mad if you made an "advance tutorial" 🙂. Just random ideas, maybe you could show things like deploying/hosting, custom animations, form handling & validation, authentication, Mapbox integration (like a store locator). Of course no pressure, I just love your content homie!

[developedbyed]

By far the best svelte tutorial online

[MaxProgramming]

The super-duper fast hot reload is the reason why Vite is used in SvelteKit

[Minde]

I just have to thank you, my struggles with front-end might finally end here.

[simonswiss]

"I watched a ton of videos from the Tailwind Labs YouTube channel" made me smile ✨ Great video James, only halfway through but learning lots of stuff about SvelteKit 👍

[cindykee]

I really like the pace that you use in your tutorials - perfect level of not dragging along, but still explaining what you are doing and the reasons why. Great balance!

This is also the best explanation I have seen so far of how to write your own API's and when it would make sense to use them versus hitting an endpoint directly from your load methods.
Thank you!

[DaveLaneNZ]

Been banging my head against Svelte for a couple weeks worth of evenings, and this video pretty much clears up all my misconceptions! Thanks heaps from NZ!

[damianicely]

Best Svelte Kit tutorial by far... and I've tried almost all of them! Would be cool to see a follow up with some database queries or crud.

[puniayash]

Exactly what I needed right now! Amazing video!

[maskman]

This is definitely the best sveltekit crash course 👏👏👏

[denniszenanywhere]

Coming from another profession and realizing how it’s 10 times harder to get a job in web development, I no longer feel pressured to join the react bandwagon and just work on svelte while still keeping my original profession. Focused now on choosing the righ tech stack and this is it for me. Thanks. Can you do a simple marketing site? Would like to see how it works with speed and Seo.

[skryonline]

Year by year, it is getting better and better to be a developer! What a pleasure to use my favourite tools on the daily basis!

[emiremiroglu]

I really love the way Svelte handle routing.

[Valiant]

Excellent tutorial. I keep liking Svelte more and more.

[robert]

i was saved by this tutorial, using SvelteKit for the first time and trying to connect to my Firebase Realtime DB :) now it works, thank you very much! ^

[RadekRoza]

Agree, one of the best tutorial for last years that I saw! Very clear and readable. Thanks James!