Development server and HMR in Svelte - Step-by-Step Execution

Concept Flow - Development server and HMR

Start Development Server

↓

Server Serves Files

↓

Browser Loads App

↓

Detect File Change

↓

Send Update via HMR

↓

Browser Applies Update

↓

App Updates Without Full Reload

↓

Repeat

The development server runs and serves your app. When you change code, it sends updates to the browser using HMR, so the app updates instantly without reloading.

Execution Sample

Svelte

npm run dev
// Server starts
// Edit src/App.svelte
// Save file
// Browser updates component instantly

Starts the Svelte development server with HMR enabled, so changes in code update the app live in the browser.

Execution Table

Step	Action	Server State	Browser State	Result
1	Run 'npm run dev'	Server starts, listens for changes	Browser loads app first time	App visible in browser
2	Edit src/App.svelte	Detects file change	Waiting for update	No visible change yet
3	Save file	Sends HMR update to browser	Receives update	Partial app update triggered
4	Apply update	Idle, waiting for next change	Component updates without full reload	UI updates instantly
5	No more changes	Idle	App stable	Waiting for next edit

💡 No exit; server and HMR run continuously during development

Variable Tracker

Variable	Start	After Step 2	After Step 3	After Step 4	Final
serverStatus	stopped	running	sending update	idle	idle
browserAppState	not loaded	loaded	receiving update	updated	stable
fileChangeDetected	false	true	true	false	false

Key Moments - 2 Insights

Why doesn't the browser do a full reload after I save a file?

Because the development server uses HMR to send only the changed parts, the browser updates the app without reloading the whole page, as shown in step 4 of the execution table.

What happens if I don't save the file after editing?

The server won't detect any change, so no update is sent. The browser stays the same, as seen between steps 1 and 2.

Visual Quiz - 3 Questions

Look at the execution table, what is the server state right after saving the file?

A Sending update

B Idle

C Stopped

D Detecting file change

💡 Hint

Check Step 3 in the execution table under 'Server State'

At which step does the browser apply the update without a full reload?

A Step 2

B Step 3

C Step 4

D Step 5

💡 Hint

Look at the 'Result' column in the execution table for Step 4

If the fileChangeDetected variable stays false, what happens?

A The browser updates automatically

B No updates are sent or applied

C The server sends updates anyway

D The server restarts

💡 Hint

Refer to variable_tracker row 'fileChangeDetected' and execution_table steps 1-2

Concept Snapshot

Run 'npm run dev' to start the Svelte development server.
The server watches your files for changes.
When you save, it sends updates via HMR.
The browser updates only changed parts, no full reload.
This makes development fast and smooth.

Full Transcript

Starting the Svelte development server runs a local server that serves your app and watches your files. When you edit and save a file, the server detects the change and sends a hot module replacement (HMR) update to the browser. The browser applies this update instantly, refreshing only the changed parts of the app without reloading the whole page. This process repeats as you continue editing, making development fast and interactive.