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 Manifet backend from the root of our Svelte app:

npx add-manifest

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 !