Development server and HMR in Svelte

Introduction

A development server helps you see your app live as you build it. HMR (Hot Module Replacement) updates parts of your app instantly without reloading the whole page.

When you want to see changes immediately while coding your Svelte app.

When you want to keep your app state while updating code during development.

When you want faster feedback without manually refreshing the browser.

When you are debugging and want to test small changes quickly.

Syntax

Svelte

npm run dev

This command starts the development server with HMR enabled by default in SvelteKit or Vite projects.

You usually run this in your project folder terminal to start live reloading.

Examples

Starts the development server and enables HMR so your app updates instantly as you save files.

Svelte

npm run dev

Starts Vite development server allowing access from other devices on the network, also with HMR.

Svelte

vite --host

Sample Program

This simple Svelte component shows a button that increases a count when clicked. When you run npm run dev, the development server shows this button. If you change the text or logic, HMR updates the page instantly without full reload.

Svelte

<script>
  let count = 0;
</script>

<button on:click={() => count++} aria-label="Increment count">
  Count: {count}
</button>

Important Notes

HMR keeps your app state, so you don't lose data when you change code.

Use the browser's developer tools console to see errors or logs while running the dev server.

Development server is only for coding time; for production, build your app with npm run build.

Summary

Development server shows your app live and updates it as you code.

HMR updates only changed parts instantly without full page reload.

Run npm run dev to start the server with HMR in Svelte projects.