Server routes (+server.js) in Svelte - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to export a GET handler in a SvelteKit server route.

Svelte

export const GET = async (event) => {
  return new Response('Hello from server route!');
};

// This is a [1] export

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

Adefault

Bnamed

Canonymous

Dclass

Attempts:

3 left

💡 Hint

Common Mistakes

Using default export instead of named export

Trying to export a class instead of a function

In SvelteKit server routes, handlers like GET are exported as named exports.

2fill in blank

medium

Complete the code to read a URL parameter named 'id' from the event in a GET handler.

Svelte

export const GET = async (event) => {
  const id = event.url.searchParams.get('[1]');
  return new Response(`ID is ${id}`);
};

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

Aname

Bvalue

Cparam

Did

Attempts:

3 left

💡 Hint

Common Mistakes

Using the wrong parameter name

Trying to access event.params instead of event.url.searchParams

The URL parameter name to get is 'id', so we use event.url.searchParams.get('id').

3fill in blank

hard

Fix the error in the POST handler to parse JSON body from the request.

Svelte

export const POST = async (event) => {
  const data = await event.request.[1]();
  return new Response(JSON.stringify(data));
};

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

Atext

BformData

Cjson

Dblob

Attempts:

3 left

💡 Hint

Common Mistakes

Using text() and then forgetting to parse JSON

Using formData() when the body is JSON

To parse JSON from the request body, use event.request.json().

4fill in blank

hard

Fill both blanks to create a server route that returns JSON with status 200.

Svelte

export const GET = async (event) => {
  return new Response(JSON.stringify({ message: 'OK' }), {
    [1]: 200,
    [2]: { 'Content-Type': 'application/json' }
  });
};

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

Astatus

BstatusCode

Cheaders

Dbody

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'statusCode' instead of 'status'

Using 'body' instead of 'headers'

The Response constructor uses 'status' for HTTP status code and 'headers' for HTTP headers.

5fill in blank

hard

Fill all three blanks to create a POST handler that reads JSON, modifies it, and returns updated JSON.

Svelte

export const POST = async (event) => {
  const data = await event.request.[1]();
  data.updated = true;
  return new Response(JSON.stringify([2]), {
    [3]: { 'Content-Type': 'application/json' }
  });
};

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

Ajson

Bdata

Cheaders

Dtext

Attempts:

3 left

💡 Hint

Common Mistakes

Returning unmodified data

Forgetting to set Content-Type header

Using text() instead of json() to parse body

Use event.request.json() to parse JSON, return the modified data object, and set headers for JSON content.