▶ Introduction I've been a fan of Svelte for a long time now and started every project I came up with in 2020 with the . While working on these ideas, I discovered a self-hosted Firebase alternative called Appwrite. sveltejs/template ❓ What is Appwrite? Appwrite is an open-source backend-as-a-service server that abstracts and simplifies complex and repetitive development tasks behind a very simple to use REST API. Appwrite aims to help you develop your apps faster and in a more secure way. If you haven't heard of Appwrite before, you should really ! 👀 check it out If you ask yourself, why you should use Appwrite over something like Firebase, I've written down my reasons . here ⬅ Back to the topic Hooked by the concept, I started contributing to Appwrite, became part of its community, and in 2021 I became a fulltime Core Member. Using the Javascript SDK worked right away, but didn't really fit the component driven approach of Svelte. So I sat down, inspired by , and worked out a collection of components which feel at home in Svelte projects. This resulted in the project . sveltefire svelte-appwrite 🔎 Comparison Enough talking, let's start with a code comparison between and : appwrite svelte-appwrite Short isn't always better, except in this case. Let's take a look at the shorter variant, the one: svelte-appwrite Hello {user.name}! Logout Login < > script { Appwrite, User, AuthEmail } ; config = { : , : ,
  }; email = ; password = ; import from "svelte-appwrite" const endpoint "http://localhost/v1" project "5ffc6c043586d" let "" let "" </ > script < { }> Appwrite ...config < > User let:user let:actions < > p </ > p < = > button on:click {actions.logout} </ > button < = > div slot "error" < = > AuthEmail let:authorize on:success {actions.reload} < = = /> input type "text" bind:value {email} < = = /> input type "text" bind:value {password} < = )}> button on:click {authorize(email, password </ > button </ > AuthEmail </ > div </ > User </ > Appwrite This small snippet handles Initialization and Authentication via E-Mail with an Appwrite project for you with just a few lines. 🧬 Let's break it down <Appwrite {...config}> The component initializes the SDK for your Appwrite project and must wrap every component. You can simply spread a configuration like this: <Appwrite /> svelte-appwrite config = { : , : , : }; const endpoint "http://localhost/v1" project "5f4938898667e" locale "de" <User let:user let:actions> The component requests the currently logged in user and provides you 2 : <User/> let:directives let:user let:actions The directive provides you with the currently logged-in user and with following set of functions: user actions reload() logout() logoutFrom(session: string) logoutAll() By default, everything inside the component is only shown when a user is logged in. By using the we can show content when a user is not logged in. <User /> error slot Hello {user.name}! {user.email} You are not logged in! Loading... < > User let:user < > h1 </ > h1 < > div </ > div < = > div slot "error" </ > div < = > div slot "loading" </ > div </ > User <AuthEmail let:authorize on:success> The last component we used lets users authenticate via e-mail with the provided method. This component can also emit and events. authorize(email, password) success failure Login < = > AuthEmail let:authorize on:success {actions.reload} < = = > input type "text" bind:value {email} < = = > input type "text" bind:value {password} < = > button on:click {authorize(email,password)} </ > button </ > AuthEmail As you can see in the example above, the event points to the function from . This way, when a successful login happens, the component will fetch the user from Appwrite and renders the default slot. on:success reload() <User /> You can find more components here . 👆 Conclusion Of course, there are many more components that cover all the functionalities (except teams, that's coming) of Appwrite. This library allows you to kickstart ideas in no time with Svelte. If you have any feedback you'd like to share with me, I'd be glad to read your comments! To support this claim, a tutorial series will be published in the coming weeks, in which I will present all aspects of this library and Appwrite itself by building an Instagram clone. Links Source Code npm Package Also published at: https://dev.to/torstendittmann/svelte-for-appwrite-4fkg

Fetch

Instagram

Read My Stories

Too Long; Didn't Read

In your car, at home, or at work — Bosch technology shapes many areas of life.

Introduction to Appwrite and the Svelte SDK

Too Long; Didn't Read

Companies Mentioned

Torsten Dittmann

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

Introduction to Appwrite and the Svelte SDK

Too Long; Didn't Read

Companies Mentioned

Torsten Dittmann

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

RELATED STORIES