Create a SvelteKit Project

To create a new SvelteKit project, run the following command:

npm create svelte@latest remult-sveltekit-todo

During the setup, answer the prompts as follows:

1. Which Svelte app template?: Skeleton Project
2. Add type checking with TypeScript?: Yes, using TypeScript syntax
3. Select additional options: You can optionally include Prettier and ESLint, but these are not required for this tutorial.

Once the setup is complete, navigate into the project directory:

cd remult-sveltekit-todo

Install Required Packages and Remult

Install Remult and any necessary dependencies by running:

npm install remult --save-dev

Bootstrap Remult

To set up Remult in your SvelteKit project:

1. Create an API File

   In the src/server/ directory, create an api.ts file to handle Remult API requests:

   import { remultSveltekit } from 'remult/remult-sveltekit'
   
   export const api = remultSveltekit({})

2. Create a SvelteKit Route

   Now, create a route for Remult:

   import { api } from '../../../server/api'
   
   export const { GET, POST, PUT, DELETE } = api

Final Tweaks

Remult uses TypeScript decorators to enhance classes into entities. To enable decorators in your SvelteKit project, modify the tsconfig.json file by adding the following to the compilerOptions section:

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

Run the App

To start the development server, run the following command:

npm run dev

Your SvelteKit app will be available at http://localhost:5173.

Setup Completed

Your SvelteKit project with Remult is now up and running.