Follow

Follow
How to set up a Svelte Kit project with VS-Code

How to set up a Svelte Kit project with VS-Code

Tiia's photo
Tiia
·Apr 4, 2022·

2 min read

Are you planning on using Svelte Kit as your new base for a project, but you have no idea how to set up the project properly? Then this article is perfect for you because I give you my installation routine for when I start a new project.

If you want to know what Svelte Kit is, check out their website. You will find an interactive tutorial that teaches you the basics about this framework.

Set up your first project in Svelte Kit

⇒ Create a folder in which you want to store your local data.

⇒ Open Visual Studio Code into the folder you just created

Open Folder

⇒ Open a terminal and enter the following line:

npm init svelte@next .

⇒ Yes, proceed.

image.png

⇒ Leave blank because you are already in the right folder

image.png

⇒ Use the arrow key and chose “Skeleton Project”

image.png

⇒ If you want to use Typescript is personal preference. I usually chose yes, because you can then either use vanilla JavaScript OR Typescript.

image.png

⇒ Here I chose yes as well

image.png

⇒ This is also going to be installed

image.png

⇒ Add playwright as well

image.png

⇒ run this code in your terminal

npm install

It will create your project with all of its dependencies.

⇒ after a minute or two, this is how it will look:

image.png

Your file structure should look like this (version April 2022):

📁.svelte-kit

📁node_modules

📁src

📁static

📁tests

💾.eslintrc.cjs

💾.gitignore

💾.nmprc

💾.prettierrc

💾.package-lock.json

💾 package.json

💾playwright.config.js

💾README.md

💾svelte.config.js

💾tsconfig.json

Folders and files with a ``` .


⇒ If you want to use **Tailwind**, you can set it up at this point with

npx svelte-add@latest tailwindcss

or

npx svelte-add@latest tailwindcss --daisyui

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1649069857870/Zc6jUTUol.png)

and then another

npm install


to install the new dependencies. This step is optional and only needed if you choose to use Tailwind. 

⇒ run

npm run dev -- --open



and the **development server** will be started. Your browser will automatically open the preview of your project. Changes you do to your project can be found as soon as you save a file. 

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1649041733008/bexx01MRl.png)

## Starting the server again later 

Every time you come back to your project from now on, you can simply use

npm run dev



From there on you can start making your website in Svelte Kit and check your progress at http://localhost:3000/

---

### Important Links to check out: 

- [Svelte Kit](https://kit.svelte.dev/)
- [Typescript](https://www.typescriptlang.org/)
- [Tailwind](https://tailwindcss.com/)

---

### Find us on: 

- https://twitter.com/codingchannel
- https://www.tiktok.com/@thecodingchannel
- https://github.com/thecodingchannel
 
Share this