Development server and HMR in Svelte - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to start the Svelte development server.

Svelte

npm run [1]

Drag options to blanks, or click blank then click option'

Astart

Btest

Cdev

Dbuild

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'build' instead of 'dev' to start the server.

Typing 'start' which is for production start, not development.

Running npm run dev starts the Svelte development server with hot module replacement.

2fill in blank

medium

Complete the code to import the Svelte component for hot reloading.

Svelte

import [1] from './App.svelte';

Drag options to blanks, or click blank then click option'

AApp

BComponent

CMain

DPage

Attempts:

3 left

💡 Hint

Common Mistakes

Using a generic name like 'Component' instead of 'App'.

Using 'Main' or 'Page' which are not the default component names.

The main Svelte component is usually named App and imported from App.svelte.

3fill in blank

hard

Fix the error in the code to enable hot module replacement in Svelte.

Svelte

const app = new [1]({ target: document.body });

Drag options to blanks, or click blank then click option'

AComponent

BMain

CApplication

DApp

Attempts:

3 left

💡 Hint

Common Mistakes

Using a wrong component name that is not imported.

Using a generic name like 'Component' which causes runtime errors.

The instance must be created from the imported App component to enable HMR.

4fill in blank

hard

Fill both blanks to create a Svelte app instance with hot module replacement support.

Svelte

const app = new [1]({ target: [2] });

Drag options to blanks, or click blank then click option'

AApp

Bdocument.body

Cdocument.getElementById('app')

DComponent

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'Component' instead of 'App' for the component name.

Using an invalid target like a string instead of a DOM element.

The app instance is created from App and attached to document.body for rendering.

5fill in blank

hard

Fill all three blanks to set up a Svelte app with hot module replacement and export it.

Svelte

import [1] from './App.svelte';

const app = new [2]({ target: [3] });

export default app;

Drag options to blanks, or click blank then click option'

AApp

Bdocument.body

Ddocument.getElementById('root')

Attempts:

3 left

💡 Hint

Common Mistakes

Mixing up the order of component and target in the code.

Using a wrong DOM element for mounting.

Import and instantiate the App component, mount it to document.body, and export the app instance.