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.

Practice

1. What is the main purpose of the development server in a Svelte project?

easy

A. To compile the app into a production build

B. To minify the app's JavaScript files

C. To deploy the app to a web server

D. To show your app live and update it as you code

Solution

1. Step 1: Understand the role of the development server

   The development server runs your app locally and shows live updates as you make changes.

2. Step 2: Differentiate from production tasks

   Compiling for production, deploying, and minifying are separate steps done after development.

3. Final Answer:

   To show your app live and update it as you code -> Option D

4. Quick Check:

   Development server = live updates [OK]

Hint: Development server = live preview while coding [OK]

Common Mistakes:

• Confusing development server with production build
• Thinking it deploys the app
• Assuming it minifies code automatically

2. Which command starts the Svelte development server with Hot Module Replacement (HMR)?

easy

A. npm run build

B. npm run dev

C. npm start

D. npm run serve

Solution

1. Step 1: Identify the standard Svelte dev command

   In Svelte projects, npm run dev starts the development server with HMR enabled.

2. Step 2: Understand other commands

   npm run build creates production files; npm start and npm run serve are not standard for Svelte dev server.

3. Final Answer:

   npm run dev -> Option B

4. Quick Check:

   Start dev server = npm run dev [OK]

Hint: Use npm run dev to start Svelte dev server with HMR [OK]

Common Mistakes:

• Using npm run build instead of dev
• Confusing npm start with npm run dev
• Trying npm run serve which is not default

3. Given this Svelte component running with HMR, what happens when you change the text inside the <p> tag and save the file?

medium

A. Nothing happens until you manually refresh the browser

B. The entire page reloads and the app state resets

C. Only the changed text updates instantly without full reload

D. The app crashes due to hot reload errors

Solution

1. Step 1: Understand Hot Module Replacement (HMR) behavior

   HMR updates only the changed parts of the app instantly without reloading the whole page.

2. Step 2: Apply to text change in <p> tag

   Changing text inside the paragraph triggers HMR to update that text immediately, preserving app state.

3. Final Answer:

   Only the changed text updates instantly without full reload -> Option C

4. Quick Check:

   HMR updates changed parts instantly [OK]

Hint: HMR updates only changed parts, no full reload [OK]

Common Mistakes:

• Thinking full page reload happens on every change
• Believing manual refresh is needed
• Assuming app crashes on text change

4. You run npm run dev but the browser does not update when you change your Svelte files. What is the most likely cause?

medium

A. The development server is not running or crashed

B. You forgot to save the file after editing

C. You used npm run build instead of npm run dev

D. Your browser cache is disabled

Solution

1. Step 1: Check if development server is active

   If the dev server is not running or crashed, no updates or HMR can happen.

2. Step 2: Evaluate other options

   Not saving files prevents changes but usually obvious; using build command doesn't start dev server; browser cache disabled does not stop updates.

3. Final Answer:

   The development server is not running or crashed -> Option A

4. Quick Check:

   Dev server running = updates work [OK]

Hint: Check if dev server is running when no updates appear [OK]

Common Mistakes:

• Assuming browser cache blocks updates
• Not saving files before expecting changes
• Confusing build command with dev server

5. You want to keep your app state while updating styles during development. Which feature of the Svelte development server helps you achieve this?

hard

A. Hot Module Replacement (HMR)

B. Full page reload on every change

C. Production build optimization

D. Manual browser refresh

Solution

1. Step 1: Understand state preservation during updates

   HMR updates only changed modules without reloading the whole page, preserving app state like variables and UI state.

2. Step 2: Contrast with other options

   Full reload resets state; production build is unrelated to live updates; manual refresh loses state.

3. Final Answer:

   Hot Module Replacement (HMR) -> Option A

4. Quick Check:

   Keep state during updates = HMR [OK]

Hint: HMR preserves app state during live updates [OK]

Common Mistakes:

• Thinking full reload keeps state
• Confusing production build with dev features
• Relying on manual refresh to keep state