The magical disappearing UI framework

 - The web's JavaScript bloat crisis, solved. Svelte turns your templates into tiny, framework-less vanilla JavaScript.
 - Simple and familiar. Build apps out of composable, easy-to-write blocks using languages you already know.
 - Super fast, rock solid. Compile-time static analysis ensures the browser does no more work than it needs to.

svelte

SvelteKit is an application framework that builds on top of Svelte that provides you the app level functionality you need. It does the boring stuff that you don't want to so you can execute on the projects you want. 

As you build with SvelteKit, you'll find it continues the philosphy of Svelte by adhering to Web Standards and APIs. It builds on top of Web APIs so when you're develop SvelteKit sites you are also learning skills that will transfer to any web-based project

In this course, you will build a modern SvelteKit blog powered by Sanity CMS. You'll start from scratch and build out a site that dynamically generates pages that you create inside Sanity. 

As you build your blog, you will learn how to:

- Style Svelte components with TailwindCSS
- Add error pages to different routes
- Query your CMS in the front end
- Parse and validate your data with Zod and JSDoc
- Deploy both Sanity and your app to the web

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.

Create a new SvelteKit project

In svelte, you define components in a file. 

This is a special file extension that allows you to add your script, style and template all in one place. You’ll see how a counter component will hold state in Svelte as well as interact and style that component through the different parts of the file.

We'll implement the classic counter example that will show you how to update component state.

You can do a deep dive on Svelte with Tomasz Łakomy’s [Up and running with Svelte 3](https://egghead.io/courses/getting-started-with-svelte-3-05a8541a)

Understand the Structure of a Svelte Component

A route is very simple to create in SvelteKit. Using 'file-based routing' you simply add a .svelte file (posts.svelte) in the routes folder. Then we can navigate to where our app is running. In this case, we go to localhost:4000/posts. 

The index.svelte file can be thought of as the home route which evaluates to localhost:4000. 

We will see more types of routes as we go along. 



Add a Route to a SvelteKit Application

SvelteKit gives us unique files for adding layouts. Using the `+layout.svelte` file name, we can set layouts for all levels of routes. We can also set `+error.svelte` in each route so that we can handle any errors for these routes. 

We'll do that in this lesson by adding a `<h1>Header</h1>` and `<h4>Footer</h4> ` that wraps a `<slot />` to see it rendered on different pages. Notice that we will need to utilize `<slot />` to render the routes content onto the page as well. This gives us finegrain control of where content goes in our layout.

Add an Error Page and Layouts to SvelteKit Routes 

We will go through and add tailwind to our project and create a simple navbar. Tailwind is an incredibly easy to learn 'utility-first' css framework. 

Tailwind has a great CLI to help initialize the set up for use so that we don't have to create every config file by hand.

When you run `npx tailwindcss init tailsind.config.cjs -p` you'll have the proper postcss and tailwind config files create. 

We will then add the tailwind base styles to our global css and point tailwind to all the files we want it to process.

From there we'll get some practice in by building out a `<Navbar />` component that will have some basic styles applied.

Add TailwindCSS to a SvelteKit Project and Build a NavBar Component

We have some dummy data that we will use to get a grasp on data loading patterns in SvelteKit. Each route gets its on `+page.svelte` but we can also provide a route with a `+page.js` file that allows us to load data and expose it to our page.

You'll learn how this `+page.js` exports a load function that exposes a data object to the page you are loading data to. During this process, we'll use JSDoc to type our page data for some nice types.

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

Dynamic routing is a critical part of most applications. For our blog, we want to have pages load dynamically given a post or article slug. Continuing with our dummy data, we will use the slug to navigate dynamically to a new page and only display information for that singular item from our data.

These dynamic pages include an accompanying `+page.js` file that we can load data from. In this file we will check that the current page slug equals the post from our data store and display that posts data on the page.

Render Dynamic Pages in SvelteKit with Parameter Based Routing

Instead of writing all of our posts as files in our code editor, we can get the benefit of a CMS to help us store our content. We will use Sanity to write our posts in markdown. Then we can use Sanity's javascript client in our project get our content data from our CMS.

Set Up Sanity CMS to Power a SvelteKit Blog

In this lesson, we use Sanity's Vision feature that provides us with a playground editor to use Sanity's GROQ query language to interact and get specific data from our CMS.

GROQ affords us the ability to query our CMS data in the specific format that we want. 

If you want a deeper dive into the GROQ query language, check out this [free course](https://egghead.io/courses/introduction-to-groq-query-language-6e9c6fc0) on egghead from John Lindquist

Query Sanity Content with GROQ to Return a List of Posts

We will install the `@sanity/client` package and use the GROQ query language to query all of our posts from our CMS. 

To do this in SvelteKit we need to make a few adjustments to how we load data. We now need a async `load` function that runs on the server because sanity needs to access our environment variables. To do this we'll convert our `+page.js` to `+page.server.js` and make our function `async`.

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

We will combine our knowledge of Dynamic routing to pass a dynamic parameter to a function that will query a single post from our Sanity CMS. When we fetch our blog post data this is a great place to do some processing of the content that we get back. If you didn't process your blog post markdown, it would come back as a string which doesn't look too great on the page.

To make our markdown pretty we will install and use the `MDSvex` library to use it's compile function and render our markdown.
  
We'll see that `MDSvex` gives us a Promise from `compile` because it's an async function so we'll use the Svelte `await` block to conditionally show the post body when it is ready, otherwise we'll show a loading state.

Load a Single SvelteKit Post Dynamically & Render Markdown with MDSvex

Up to this point in our app, the only help we are getting from typescript is from SvelteKit's built in types. But these types don't infer our data structure so we need to add types using JSDoc and zod. 

One of the benefits of zod is that it can be used for schema validation in javascript by using the built in parse helper function. You can also infer type definitions from zod schemas using the infer helper. 

We can then use those types that we infer from zod schemas in our JSDoc comments to get type safety where we need. 

If you want a deeper dive into typescript and zod, Matt Pocock has created to great free resources at [Total Typescript](https://www.totaltypescript.com/tutorials)

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

We are now ready to deploy. We can first deploy our CMS by running the command `npm run deploy`. Make sure you are in that project's terminal when you deploy.

Next we need to set up a github repository for our app. Then we can push our code to the repository.

Finally, we can go to Vercel. Create an account if you do not have one and link it to your github. If you are creating an account you will need to make sure that you give Vercel permission to read your repositories or a selected repository. 

Then in your Vercel dashboard click 'New Project' and choose your newly created project for your SvelteKit blog. 

Add your environment variables (you can copy and paste them)

Then deploy 🎉

After deployment go to the url it provides and now you have a deployed blog. 

To make sure all works as expected go ahead and log in to Sanity. Choose your project. It will be named whatever name you gave it when creating your Sanity project. Then click "Open Sanity Studio".

Now navigate to Posts and click the create new post icon. Go ahead and create a second post. Click "Publish" and then navigate back to your posts page on your blog site and now we have posts uploading to our site as we write them. 

Note: If you are already on the the /posts page on your blog site when you go back to it, you will need to refresh the page.

Build a Sanity CMS Powered SvelteKit Blog

Ben Patton

You might also like these resources:

Up and running with Svelte 3

Course Content

You might also like these resources:

Up and running with Svelte 3