Create the BookIt Project | Build BookIt with Svelte 5

Time to Build

You understand what makes Svelte different. Now let’s create the project we’ll build throughout this course. By the end of this lesson, you’ll have a running SvelteKit application on your machine.

What You’ll Learn

How to use the sv CLI to scaffold a SvelteKit project
What options to choose during project setup
How to install dependencies and verify the setup works

Prerequisites

Before we start, make sure you have Node.js installed. Open your terminal and run:

node --version

You should see a version number like v20.11.0 or higher. SvelteKit requires Node.js 18.13 or later. If you need to install or update Node.js, visit nodejs.org.

You’ll also need a code editor. We recommend VS Code with the official Svelte extension for syntax highlighting and autocomplete.

Create the Project

Open your terminal, navigate to where you keep your projects, and run:

npx sv create bookit

The sv CLI will launch an interactive prompt. Here’s what to choose for BookIt:

┌  Welcome to the Svelte CLI! (v0.6.x)
│
◇  Which template would you like?
│  SvelteKit minimal
│
◇  Add type checking with TypeScript?
│  Yes, using TypeScript syntax
│
◆  Project created
│
◇  What would you like to add to your project?
│  prettier, eslint
│
◇  Which package manager do you want to install dependencies with?
│  npm (or pnpm/yarn if you prefer)
│
└  You're all set!

Let’s break down these choices:

SvelteKit minimal gives us a clean starting point without demo content. We’ll build everything from scratch, which is better for learning.

TypeScript syntax enables type checking. Even if you’re new to TypeScript, having it available helps catch errors early. You can write plain JavaScript and add types gradually.

Prettier and ESLint keep our code formatted consistently and catch common mistakes. These are standard tools in professional projects.

Install Dependencies

After the CLI finishes, navigate into your project and install the dependencies:

cd bookit
npm install

This downloads all the packages SvelteKit needs. It takes a minute the first time.

Verify It Works

Start the development server:

npm run dev

You should see output like:

  VITE v5.x.x  ready in 500 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  press h + enter to show help

Open http://localhost:5173 in your browser. You’ll see SvelteKit’s minimal welcome page — just a simple “Welcome to SvelteKit” message.

That page is about to become BookIt’s homepage.

What Just Happened?

When you ran sv create, the CLI generated a complete project structure with:

Configuration files for Vite (the build tool), TypeScript, ESLint, and Prettier
A src folder where all your application code lives
A static folder for assets like images and fonts
Package files that define your dependencies

We’ll explore this structure in detail in the next lesson. For now, the important thing is that you have a working SvelteKit application.

Keep the Server Running

Throughout this course, you’ll want to keep the dev server running while you work. It automatically reloads when you save changes, so you’ll see updates instantly in your browser.

If you need to stop the server, press Ctrl+C (or Cmd+C on Mac) in the terminal. Restart it anytime with npm run dev.

Common Issues

Port Already in Use

If you see an error about port 5173 being in use, another application is using that port. You can either stop that application or run SvelteKit on a different port:

npm run dev -- --port 3000

Node Version Too Old

If you get errors about unsupported syntax or missing features, check your Node version with node --version. Update to Node 18.13 or later if needed.

Permission Errors on Windows

If npx sv create fails with permission errors, try running your terminal as Administrator, or use a Node version manager like nvm-windows.

Summary

You’ve created the BookIt project using SvelteKit’s official CLI. The project is configured with TypeScript, Prettier, and ESLint — a solid foundation for professional development.

Key takeaways:

Use npx sv create to scaffold new SvelteKit projects
Choose “SvelteKit minimal” for a clean starting point
Run npm run dev to start the development server
The dev server auto-reloads when you save changes

Next Steps

Your project is running, but what’s actually in there? In the next lesson, Explore the Project Structure, we’ll open up the folders and files to understand how a SvelteKit project is organized.