Create a new SvelteKit project

Understand the Structure of a Svelte Component

Add a Route to a SvelteKit Application

Add an Error Page and Layouts to SvelteKit Routes 

Add TailwindCSS to a SvelteKit Project and Build a NavBar Component

Load Data on a SvelteKit Page with +page.js load Function 

Render Dynamic Pages in SvelteKit with Parameter Based Routing

Set Up Sanity CMS to Power a SvelteKit Blog

Query Sanity Content with GROQ to Return a List of Posts

Query a Sanity CMS from a SvelteKit Blog Frontend with +page.server.js

Load a Single SvelteKit Post Dynamically & Render Markdown with MDSvex

Parse and Infer Data Being Fetched in SvelteKit with Zod and JSDoc

Deploy Sanity and Sveltekit to Production

Build a Sanity CMS Powered SvelteKit Blog

The first step to starting a SvelteKit projects is initialize the app with commands from SvelteKit's website. 

```bash
npm create svelte@latest my-app
cd my-app
npm install
npm run dev -- --open
```

We'll then test our app is running by adding html to our `src/routes/index.svelte` route.

https://app.egghead.io/api/v1/lessons/svelte-create-a-new-sveltekit-project/subtitles

Ben Patton: [0:00] To get started, go to SvelteKit's website, kit.svelte.div. Scroll down to see the list of commands, and we're just going to run those commands. Run npm create Svelte. Yes, let's go with the skeleton project.
[0:27] We're going to say no to the next few questions. I'm going to see the into my SvelteKit blog. We're going to run npm install.

[0:38] All right. Now, open your app. Our app is open with SvelteKit. Now, we see that [inaudible] is running on localhost:4000, so this is actually already running our app. If we go to localhost:4,000, it's already up and running. To test this, go to src/routes/index.svelte. Just add a simple <p> tag. You can make it say whatever you want. We're going to say, "Egghead Demo." Save it and there it is.

[1:16] In review, we went to SvelteKit's website and got started by running these commands, opening our app, and going to our index route and adding this <p> tag to test it, and there it is.

Create a new SvelteKit project

Share this video with your friends

Course

Build a Sanity CMS Powered SvelteKit Blog