DEV Community

Cover image for Svelte for Appwrite
Torsten Dittmann
Torsten Dittmann

Posted on

Svelte for Appwrite

▶ 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 sveltejs/template. While working on these ideas, I discovered a self-hosted Firebase alternative called Appwrite.

❓ What is Appwrite?

68747470733a2f2f61707077726974652e696f2f696d616765732f6769746875622e706e67

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 sveltefire, and worked out a collection of components which feel at home in Svelte projects. This resulted in the project svelte-appwrite.

🔎 Comparison

Enough talking, let's start with a code comparison between appwrite and svelte-appwrite:

picture

Short isn't always better, except in this case. Let's take a look at the shorter variant, the svelte-appwrite one:

<script>
    import { Appwrite, User, AuthEmail } from "svelte-appwrite";

    const config = {
        endpoint: "http://localhost/v1",
        project: "5ffc6c043586d",
    };

    let email = "";
    let password = "";
</script>

<Appwrite {...config}>
    <User let:user let:actions>
        <p>Hello {user.name}!</p>
        <button on:click={actions.logout}>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)}>
                    Login
                </button>
            </AuthEmail>
        </div>
    </User>
</Appwrite>
Enter fullscreen mode Exit fullscreen mode

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 <Appwrite /> component initializes the SDK for your Appwrite project and must wrap every svelte-appwrite component. You can simply spread a configuration like this:

const config = {
    endpoint: "http://localhost/v1",
    project: "5f4938898667e",
    locale: "de"
};
Enter fullscreen mode Exit fullscreen mode

<User let:user let:actions>

The <User/> component requests the currently logged in user and provides you 2 let:directives:

  • let:user
  • let:actions

The user directive provides you with the currently logged-in user and actions with following set of functions:

  • reload()
  • logout()
  • logoutFrom(session: string)
  • logoutAll()

By default, everything inside the <User /> component is only shown when a user is logged in. By using the error slot we can show content when a user is not logged in.

<User let:user>
  <h1>Hello {user.name}!</h1>
  <div>{user.email}</div>

  <div slot="error">
    You are not logged in!
  </div>
  <div slot="loading">
    Loading...
  </div>
</User>
Enter fullscreen mode Exit fullscreen mode

<AuthEmail let:authorize on:success>

The last component we used lets users authenticate via e-mail with the provided authorize(email, password) method. This component can also emit success and failure events.

<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)}>Login</button>
</AuthEmail>
Enter fullscreen mode Exit fullscreen mode

As you can see in the example above, the on:success event points to the reload() function from <User />. This way, when a successful login happens, the component will fetch the user from Appwrite and renders the default slot.

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

Top comments (3)

Collapse
 
oncode profile image
Manuel Sommerhalder

looks really nice for dev experience. appwrite seems promising too, but I'm missing realtime functionalities and offline capabilities for the database. hope they will be added sometime.

Collapse
 
eldadfux profile image
Eldad A. Fux

Hey Manuel, this is Eldad from Appwrite 👋 realtime features are already a work in progress, you can learn more here: github.com/appwrite/appwrite/pull/692 - got lots of cool plans on that department. We'll also be sharing some more tutorials about how to accomplish offline support.

Collapse
 
oncode profile image
Manuel Sommerhalder

Thanks for your response. Looks awesome, will definitely check it out in the future!