Run Your First Dev Server | Build BookIt with Svelte 5

Your Development Workflow

Building BookIt means making hundreds of small changes — editing components, tweaking styles, adding features. The development server makes this process fast by showing your changes instantly in the browser, without manual refreshing.

What You’ll Learn

How to start and use the SvelteKit dev server
What Hot Module Replacement (HMR) is and why it matters
Terminal commands and keyboard shortcuts for development
How to set up your editor for the best experience

Start the Dev Server

If the server isn’t already running from Lesson 1.2, start it now:

cd bookit
npm run dev

You’ll see output like this:

  VITE v5.4.11  ready in 438 ms

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

Open http://localhost:5173 in your browser. Keep both your editor and browser visible — ideally side by side.

Hot Module Replacement

The dev server uses Hot Module Replacement (HMR). When you save a file, Vite detects the change and updates just that module in your browser — no full page reload required.

Let’s see it in action. Open src/routes/+page.svelte and change it to:

<!-- filename: src/routes/+page.svelte -->
<h1>Welcome to SvelteKit</h1>
<p>We're building BookIt!</p>

Save the file. Your browser updates instantly. No refresh button, no waiting.

Now add some style:

<!-- filename: src/routes/+page.svelte -->
<h1>Welcome to SvelteKit</h1>
<p>We're building BookIt!</p>

<style>
  h1 {
    color: #2563eb;
  }
</style>

Save again. The heading turns blue immediately.

This instant feedback loop is why modern development feels so different from the “edit, save, switch to browser, refresh, wait” cycle of the past.

Terminal Commands

While the dev server runs, you can press keys in the terminal for quick actions:

Key	Action
`h + enter`	Show help menu
`r + enter`	Restart the server
`u + enter`	Show server URL
`o + enter`	Open in browser
`c + enter`	Clear console
`q + enter`	Quit

The most useful is o + enter to quickly open your app if you closed the browser tab.

Multiple Terminals

You’ll often need the terminal for other tasks while the dev server runs — installing packages, running scripts, or using git. You have a few options:

Option 1: Multiple terminal tabs. Most terminals support tabs. Keep the dev server in one tab and use others for commands.

Option 2: VS Code’s integrated terminal. Press Ctrl+` (backtick) to open the terminal panel. Click the + icon to add more terminals.

Option 3: Run in background. On Mac/Linux, add & to run in background: npm run dev &. (Though you’ll lose the keyboard shortcuts.)

For this course, we recommend keeping the dev server visible so you can see any error messages.

Editor Setup

A good editor setup catches errors before you even save. Here’s the recommended configuration for VS Code:

Install the Svelte Extension

Search for “Svelte for VS Code” in the extensions panel, or install from the command line:

code --install-extension svelte.svelte-vscode

This extension provides:

Syntax highlighting for .svelte files
Autocomplete for Svelte-specific syntax
Error checking as you type
Go-to-definition for components and variables

Enable Format on Save

Open VS Code settings (Cmd+, on Mac, Ctrl+, on Windows) and search for “format on save”. Enable it.

Then search for “default formatter” and set it to Prettier for consistent formatting.

Recommended Settings

Add these to your VS Code settings for the best Svelte experience:

{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "[svelte]": {
    "editor.defaultFormatter": "svelte.svelte-vscode"
  },
  "svelte.enable-ts-plugin": true
}

When Things Go Wrong

Sometimes the dev server gets confused, especially after installing new packages or making big changes. Here’s how to fix common issues:

Changes Not Showing

First, check that you saved the file (look for the dot on the tab in VS Code). If saved, try:

Hard refresh the browser: Cmd+Shift+R (Mac) or Ctrl+Shift+R (Windows)
Restart the dev server: press r + enter in the terminal, or stop with Ctrl+C and run npm run dev again

Compilation Errors

If you see a red error overlay in the browser, read the message carefully. It usually points to the exact file and line number. Fix the error, save, and the overlay disappears.

Port Already in Use

If you see “Port 5173 is already in use”, either stop the other process or use a different port:

npm run dev -- --port 3000

The Development Loop

Here’s the workflow you’ll use throughout this course:

Edit a .svelte file in your editor
Save the file (Cmd+S or Ctrl+S)
See the change instantly in your browser
Repeat

No build step. No manual refresh. Just a tight loop between writing code and seeing results.

This is the environment we’ll use to build every feature of BookIt.

Summary

The SvelteKit dev server powered by Vite gives you instant feedback through Hot Module Replacement. Combined with the Svelte VS Code extension, you have a development environment that catches errors early and shows changes immediately.

Key takeaways:

npm run dev starts the development server
Changes appear instantly thanks to Hot Module Replacement
The Svelte VS Code extension provides syntax highlighting and error checking
Press r + enter in the terminal to restart the server if needed

Next Steps

Your development environment is ready. In the next lesson, Make Your First Change, we’ll transform the default homepage into BookIt’s welcome page — your first real contribution to the app.