Get a new SvelteKit project started with the CLI.

Start here:

pnpm create svelte getting-started-with-svelte-and-sveltekit

From the CLI pick the following options:

┌  Welcome to SvelteKit!
│
◇  Which Svelte app template?
│  Skeleton project
│
◇  Add type checking with TypeScript?
│  Yes, using TypeScript syntax
│
◇  Select additional options (use arrow keys/space bar)
│  ◼ Add ESLint for code linting
│  ◼ Add Prettier for code formatting
│  ◼ Add Playwright for browser testing
└  ◼ Add Vitest for unit testing

Or chose what you like 😊 just be aware that the workshop will be using the options mentioned here.

Once the project has been created follow the rest of the CLI instructions here’s the output:

┌  Welcome to SvelteKit!
│
◇  Which Svelte app template?
│  Skeleton project
│
◇  Add type checking with TypeScript?
│  Yes, using TypeScript syntax
│
◇  Select additional options (use arrow keys/space bar)
│  Add ESLint for code linting, Add Prettier for code formatting, Add Playwright for browser testing, Add Vitest for
unit testing
│
└  Your project is ready!

✔ Typescript
  Inside Svelte components, use <script lang="ts">

✔ ESLint
  <https://github.com/sveltejs/eslint-plugin-svelte3>

✔ Prettier
  <https://prettier.io/docs/en/options.html>
  <https://github.com/sveltejs/prettier-plugin-svelte#options>

✔ Playwright
  <https://playwright.dev>

✔ Vitest
  <https://vitest.dev>

Install community-maintained integrations:
  <https://github.com/svelte-add/svelte-add>

Next steps:
  1: cd getting-started-with-svelte-and-sveltekit
  2: npm install (or pnpm install, etc)
  3: git init && git add -A && git commit -m "Initial commit" (optional)
  4: npm run dev -- --open

Take note of the Install community-maintained integrations link! That will come in handy later...

Here’s the commands:

# change directory into the project
cd getting-started-with-svelte-and-sveltekit
# install dependencies
pnpm install # or npm or yarn whicever you prefer
# initial git commit
git init && git add -A && git commit -m "Initial commit"
# run the dev server
pnpm run dev --open

The final command npm run dev --open will open a browser tab in your default browser showing the SvelteKit skeleton project.

The optional flag you can pass to the CLI to open the browser --open will open a default browser tab, you can also use the --port flag to specify a port: