This content originally appeared on DEV Community and was authored by Bruno Pérez
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 !
This content originally appeared on DEV Community and was authored by Bruno Pérez
Bruno Pérez | Sciencx (2024-10-07T15:50:00+00:00) Svelte + Manifest = Giving Svelte a proper backend with 7 lines of code 🧡🦚. Retrieved from https://www.scien.cx/2024/10/07/svelte-manifest-giving-svelte-a-proper-backend-with-7-lines-of-code-%f0%9f%a7%a1%f0%9f%a6%9a/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.