Svelte + Manifest = Giving Svelte a proper backend with 7 lines of code 🧡🦚

TL;DR: Using Manifest as backend for Svelte turns it into a full stack application with minimal coding. Check the source code on github

# manifest/backend.yml name: My TODO App ✅ entities: Todo: seedCount: 10 properties: - title - { name: completed, type: boolean } 

Svelte is an amazing framework with a very simple and elegant syntax.

However, a frontend is rarely enough to make a functional app: we often need a backend with some logic, a database and and a couple of API endpoints. This can often be time consuming and cumbersome.

In this post I will show what I think is the fastest and easiest way of giving a backend for Svelte: Manifest. It consists in a single YAML file (yes, YAML !) that generates a full backend.

We will create a todolist app with the following features:

• Adding a new todo stores it in the database with the completed property set to false
• Clicking on the todo checkbox marks it at complete or uncomplete
• Clicking on the "remove" button deletes the todo

This is what we are building:

Create the Svelte app

Svelte has a nice installation script:

npm create svelte@latest my-app 

In this example I choose the Skeleton project, in TypeScript and without any additional options.

We can now run the Svelte frontend with:

npm run dev 

Add the backend

We can directly add the Manifest backend from the root of our Svelte app:

npx add-manifest@latest 

This will create a manifest folder with a backend.yml on it. Replace the dummy content with this one.

# manifest/backend.yml name: My TODO App ✅ entities: Todo: seedCount: 10 properties: - title - { name: completed, type: boolean } 

We can now run our backend server:

npm run manifest 

You can now connect to your admin panel and see your OpenAPI documentation:

Connect the client and the server

Now we need to add the app logic and get the data from our backend. First of all intall the Manifest SDK:

npm i @mnfst/sdk 

To make it short we will put all the logic in the src/routes/+page.svelte file. On bigger projects it is recommended to have a better separation of concerns

We will create our 3 functions:

• getTodos: fetch all the todos
• addTodo: Adds an uncomplete todo to the DB,
• removeTodo: Removes a todo from the DB
• ToggleTodoCompletion: Toggles the completion status of an existing todo

Lets start by defining what a Todos is:

// Define the Todo type. type Todo = { id: number; title: string; completed: boolean }; let todos: Todo[] = []; 

And now we can create our functions:

import Manifest from "@mnfst/sdk"; // Initialize the Manifest SDK. const manifest = new Manifest(); // Fetch all todos from the database. async function getTodos() { todos = (await manifest.from("todos").find()).data as Todo[]; } // Add a new todo to the database. async function addTodo() { await manifest.from("todos").create({ title: newTodo, completed: false }); // Fetch all todos again to update the list getTodos(); } // Remove a todo from the database. async function removeTodo(id: number) { await manifest.from("todos").delete(id); todos = todos.filter((todo) => todo.id !== id); } // Toggle the completion status of a todo. async function toggleTodoCompletion(todo: Todo) { // Update the todo in the database. const updatedTodo = { ...todo, completed: !todo.completed }; todo = await manifest.from("todos").update(todo.id, todo); // Reassign the array to trigger update in the UI. todos = todos.map((t) => (t.id === updatedTodo.id ? updatedTodo : t)); } 

Putting everything together

Checkout the +page.svelte file on the demo repository to see the style and UI implementation. We managed to add simply a backend for this Svelte demo app ! Let me know your thoughts about this implementation ! What backend stack do you use for your backends usually ?

If you liked using Manifest, give us a ⭐ on Github to follow to projects and help us improving it. We also have some hacktoberfest issues 🎃 for contributors among you !