Build a Full-Stack SvelteKit Application

Create a simple todo app with Remult using a SvelteKit

In this tutorial, we are going to create a simple app to manage a task list. We'll use SvelteKit for the UI & the backend and Remult as our full-stack CRUD framework.

By the end of the tutorial, you should have a basic understanding of Remult and how to use it to accelerate and simplify full stack app development.

You want to have a look at the end result ?

You can degit the final result and read the README.md file in the project to check it out.

npx degit remult/remult/examples/sveltekit-todo remult-sveltekit-todo
cd remult-sveltekit-todo

Prerequisites

This tutorial assumes you are familiar with SvelteKit.

Before you begin, make sure you have Node.js and git installed.

Setup for the Tutorial

This tutorial requires setting up a Sveltekit project, and a few lines of code to add Remult.

Step-by-step Setup

Create a Sveltekit project

Create the new Sveltekit project.

npm create svelte@latest remult-sveltekit-todo

The command prompts you for information about features to include in the initial app project. Here are the answers used in this tutorial:

1. Which Svelte app template?: ... Skeleton Project
2. Add type checking with TypeScript? ... Yes, using TypeScript syntax
3. Select additional options: ... You may want to include Prettier and ESLint but the options in this step are purely optional.

Once completed, change to the app directory:

cd remult-sveltekit-todo

Install required packages and Remult

npm i remult --save-dev

Bootstrap Remult

1. Open your IDE.

2. Create a remult api route like this:

src/routes/api/[...remult]/+server.ts

import { remultSveltekit } from 'remult/remult-sveltekit'

export const _api = remultSveltekit({})

export const { GET, POST, PUT, DELETE } = _api

Side node 1: we export _api as we will need it later.

Side node 2: We need an underscore as it's a special SvelteKit file. You can also create remultSveltekit() in another file and name it as you want.

Final tweaks

Our full stack starter project is almost ready.

Remult makes use of decorators to enhance regular Typescript classes into entities. Add the following entry to the compilerOptions section of the tsconfig.json file to enable the use of decorators.

tsconfig.json

{
  "compilerOptions": {
    "experimentalDecorators": true
  }
}

Run the app

Open a terminal and start the vite dev server.

npm run dev

The default "Sveltekit" app main screen should be available at the default Vite dev server address http://localhost:5173.

Setup completed

At this point, our starter project is up and running. We are now ready to move to the next step of the tutorial and start creating the task list app.