Development server and HMR in Svelte - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is a development server in Svelte?

A development server runs your Svelte app locally, letting you see changes instantly in the browser as you code. It helps you test and develop without building the full app every time.

beginner

What does HMR stand for and what does it do?

HMR means Hot Module Replacement. It updates only the changed parts of your Svelte app in the browser without a full page reload, keeping your app state intact and speeding up development.

intermediate

How does HMR improve the developer experience?

HMR saves time by instantly showing changes without reloading the whole page. This keeps your app's current state, so you don’t lose data or have to navigate back to where you were.

beginner

Which command starts the Svelte development server with HMR enabled?

Running npm run dev or pnpm run dev starts the Svelte development server with HMR enabled by default.

intermediate

Why is a full page reload slower than HMR during development?

A full page reload restarts the entire app and reloads all resources, losing app state and taking more time. HMR updates only changed modules, making updates faster and smoother.

What happens when you save a file while the Svelte development server with HMR is running?

A Only the changed part updates in the browser without full reload

B The entire browser page reloads

C Nothing happens until you refresh manually

D The app crashes

HMR updates only the changed modules instantly without reloading the whole page.

Which command typically starts the Svelte development server?

A npm test

B npm start

C npm build

D npm run dev

The command npm run dev starts the development server with HMR enabled.

Why is HMR useful during development?

A It disables the development server

B It reloads the whole page faster

C It updates only changed code without losing app state

D It compiles code to production

HMR updates only the changed code and keeps the app state, speeding up development.

What does the development server provide?

A A local environment to test your app with live updates

B A way to deploy your app to the internet

C A tool to minify your code

D A database for your app

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

If HMR is not working, what might happen when you save changes?

A The app updates instantly without reload

B The app reloads the entire page

C The app ignores changes

D The app crashes

Without HMR, saving changes causes a full page reload to show updates.

Explain what a development server does in Svelte and why it is helpful.

Think about how you see your app change as you write code.

Describe Hot Module Replacement (HMR) and how it improves your workflow.

Imagine changing a small part of your app without losing your place.