Creating a new SvelteKit project
In this section, you’ll use the default method for creating a new SvelteKit project, which uses the npm create command. (For reference, you can also check the official documentation at https://kit.svelte.dev/docs/creating-a-project.)
The project we are building is called Birthdays and the npm package name is birthdays. It will be introduced properly in Chapter 2, Introducing the Red-Green-Refactor Workflow.
SvelteKit 1.0
These instructions were valid at the time of writing, for SvelteKit 1.0. It’s likely things will improve in time, so you may find some of the later instructions will become unnecessary or may no longer work. Check the book’s GitHub repository for the most up-to-date instructions.
For now, we’ll concentrate on the mechanics of building a new project:
- Start by opening a Terminal window in your usual work location (for me, this is
~/workon my Mac). Then type the following commands:mkdir birthdays cd birthdays npm create svelte@latest
If this is the first Svelte project you’ve created, you’ll be presented with the following message from npm:
Need to install the following packages: create-svelte@2.1.0 Ok to proceed? (y)
- Answer
yto that. You’ll see a bunch more questions, which we’ll go through individually:create-svelte version 2.1.0 Welcome to SvelteKit! ? Where should we create your project? (leave blank to use current directory) ›
- Since you’re already in the
birthdaysdirectory, just leave this blank, and hit Enter. Next, you’ll be asked about which app template you’d like to use:? Which Svelte app template? › - Use arrow-keys. Return to submit. SvelteKit demo app ❯ Skeleton project - Barebones scaffolding for your new SvelteKit app Library skeleton project
- Choose
Skeleton project. Next, you’ll be asked about TypeScript:? Add type checking with TypeScript? › - Use arrow-keys. Return to submit. Yes, using JavaScript with JSDoc comments Yes, using TypeScript syntax ❯ No
- For this question, I’ve chosen
No. That’s because this book is about testing techniques, not typing techniques. That’s not to say that this book doesn’t apply to TypeScript projects – it most certainly does – just that typing is not the topic at hand.
If you want to use TypeScript
If you’re a seasoned TypeScript developer, please feel free to choose that option instead. The code samples in the book won’t need too much modification except for the additional type definitions, which you’ll need to provide.
- Finally, you’ll be asked about extra package dependencies:
? Add ESLint for code linting? › No / Yes ? Add Prettier for code formatting? › No / Yes ? Add Playwright for browser testing? › No / Yes ✔ Add Vitest for unit testing? … No / Yes
- Choose
Yesas the answer to all these questions. Although we won’t mention ESLint in this book, it’s always good to have. And we’ll need Playwright and Vitest.
You’ll then see a summary of all your choices, followed by a Next steps list:
Your project is ready! ✔ 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-adders Next steps: 1: npm install (or pnpm install, etc) 2: git init && git add -A && git commit -m "Initial commit" (optional) 3: npm run dev -- --open
We’ll perform these next steps but before we do that, we’ll run some extra verification steps. It’s always good to check your work.
Type npm install into the Terminal and confirm that everything is installed correctly. Then, go ahead and commit your changes. (If you’ve forked the GitHub repository, you won’t need to use the git init command.)
Committing early and often
It’s a good idea to be checking in your work very often. While you’re learning the TDD approach to testing, it can be helpful to check in after every single test. This might seem like a lot but it will help you backtrack in case you get stuck.
Then, run npm run dev – –open. It should open your web browser and show you a "Welcome to SvelteKit" message.
You can then close the browser and hit Ctrl + C in the Terminal to stop the web server.
Next, let’s verify the Playwright and Vitest dependencies.
Installing and running Playwright
Although we won’t use Playwright in this chapter, it’s a good idea to get it installed and verify that it’s working.
Start by running npm test at the command line:
work/birthdays % npm test > birthdays@0.0.1 test > playwright test Running 1 test using 1 worker [WebServer] [WebServer] [WebServer] Generated an empty chunk: "hooks". [WebServer] ✘ 1 test.js:3:1 › index page has expected h1 (7ms) 1) test.js:3:1 › index page has expected h1 ============================================= browserType.launch: Executable doesn't exist at /Users/daniel/Library/Caches/ms-playwright/chromium-1041/chrome-mac/Chromium.app/Contents/MacOS/Chromium ... 1 failed test.js:3:1 › index page has expected h1 ============================================
If you’ve never installed Playwright before, you’ll see a message like the preceding one.
Playwright has its own environment setup to do, such as installing Chromium onto your machine. You can install it with the following command:
npx playwright install
Then, trying npm test again should give you the following output, showing that the one example test that’s included is passing:
> birthdays@0.0.1 test > playwright test Running 1 test using 1 worker [WebServer] [WebServer] [WebServer] Generated an empty chunk: "hooks". [WebServer] ✓ 1 test.js:3:1 › index page has expected h1 (307ms) 1 passed (4s)
This test, index page has expected h1, is a test for the "Welcome to SvelteKit" message you saw earlier when you launched the application in the browser.
Running Vitest
Running npm run test:unit is the default way to run Vitest tests. Try it now:
work/birthdays % npm run test:unit > birthdays@0.0.1 test:unit > vitest DEV v0.25.8 /Users/daniel/work/birthdays ✓ src/index.test.js (1) Test Files 1 passed (1) Tests 1 passed (1) Start at 15:56:18 Duration 737ms (transform 321ms, setup 0ms, collect 16ms, tests 2ms) PASS Waiting for file changes... press h to show help, press q to quit
This automatically puts you in watch mode, which means any changes to the filesystem will cause tests to re-run. Press q to quit this mode. I personally don’t use watch mode and we won’t be using it in this book. See the Creating a shell alias section for a little discussion on why this is.
In the next section, we’ll make the ergonomics of the project a little easier for us.
