Development server and HMR in Svelte - Mini Project: Build & Apply

Development server and HMR

📖 Scenario: You are building a simple Svelte app that shows a greeting message. You want to set up a development server that automatically reloads your app when you make changes, using Hot Module Replacement (HMR).

🎯 Goal: Create a Svelte app with a development server that supports Hot Module Replacement (HMR) so that changes in your component update instantly in the browser without a full reload.

📋 What You'll Learn

Create a basic Svelte component with a greeting message

Set up a development server configuration with HMR enabled

Run the development server to see live updates on code changes

Ensure the app updates instantly without full page reload when editing

💡 Why This Matters

🌍 Real World

Developers use development servers with HMR to speed up building user interfaces by instantly seeing changes without refreshing the page.

💼 Career

Knowing how to set up and use HMR is essential for frontend developers to improve productivity and create smooth development workflows.

1

Create a basic Svelte component

Create a file named App.svelte with a <script> block that defines a variable greeting set to "Hello, Svelte!". Then add an <h1> element that displays the greeting variable.

Svelte

  // Define greeting variable here


{greeting}

Need a hint?

Use let greeting = "Hello, Svelte!"; inside the <script> block and display it inside <h1> tags.

2

Add development server configuration with HMR

Create a vite.config.js file that imports defineConfig from 'vite' and svelte from '@sveltejs/vite-plugin-svelte'. Export the default configuration using defineConfig with the svelte() plugin included to enable HMR.

Svelte

// Create vite.config.js with svelte plugin for HMR
// Your code here

Need a hint?

Use defineConfig to export the config and include svelte() in the plugins array.

3

Run the development server

Add a package.json script named dev that runs vite. This will start the development server with HMR enabled. Write the line "dev": "vite" inside the scripts section of package.json.

Svelte

{
  "scripts": {
    // Add dev script here
  }
}

Need a hint?

Inside package.json, add "dev": "vite" under scripts to run the dev server.

4

Verify HMR by editing the greeting

Open App.svelte and change the greeting variable value to "Hello, Hot Module Replacement!". Save the file and observe that the browser updates the heading instantly without a full page reload.

Svelte

  // Change greeting value here


{greeting}

Need a hint?

Update the greeting variable string and save to see live update in the browser.