With the release of SvelteKit 1.0, I decided to make a series of blog posts to get you up and running and teach you the basics of SvelteKit. At the same time, I’ll get a refresher for myself, so win-win! If you haven’t read my previous post on why I think Svelte is awesome, I’ll link it for you here.

What is SvelteKit?

SvelteKit is an app framework (or 'metaframework', depending on who you ask) for Svelte, similar to Next.js for React. It uses Vite under the hood and has built-in solutions for routing, rendering and more!

Although the setup is relatively easy, I still want to take you through it and share some handy tips while doing so. Let's get started.

Setup SvelteKit

To start, open up your favorite terminal and navigate to your projects folder, mine is called `/dev`, and run 

npm create svelte@latest blog-post

npm create svelte@latest blog-post

Where “blog-post” is the name for your project.
Enter “y” to proceed and choose the options you would like to use. My usual go-to are as follows:

1. Skeleton project
2. Yes, using TypeScript syntax
3. Yes, for using ESLint
4. Yes, for using Prettier
5. No, to using Playwright
6. No, to using Vitest

Enter code YOUR_PROJECT_NAME in your terminal to open up the project in VS Code.

Setup GitHub

Open up the terminal in VS Code (Cmd + J for mac or Ctrl + J for Windows) and perform the steps listed by the create script.

1. npm install

2. git init && git add -A && git commit -m "Initial commit"

3. npm run dev -- --open

Your app should now open in your browser.

Pro tip

I hate the long command to serve and open the browser, so I made a shortcut. Just add the following line to your .zshrc file.

alias rs="npm run dev -- --open"

This creates an alias, so you can use rs to launch your app instead. I called it "rs" for "Run Svelte" but you can name it however you want.

Setup Tailwind CSS

To install Tailwind CSS you can follow the official guide.

Configure VSCode

To enable syntax highlighting in .svelte files, install the official Svelte for VS Code plugin.

Svelte for VS Code

After that open settings.json and add the following:

"[svelte]": {
   "editor.defaultFormatter": "svelte.svelte-vscode"
 },

Next create a new file in .vscode/ called extensions.json and add the following:

{
 "recommendations": ["svelte.svelte-vscode"],
 "unwantedRecommendations": []
}

This will recommend the Svelte for VS Code plugin to anyone that opens the project. You colleagues will have almost zero setup with this trick.

Conclusion

That’s it! You now have a solid start for your next project. Keep your eyes open for the next post where we’ll build a simple form.