Appwrite Releases a Native Svelte SDK for Its Open-Source BaaS

We are extremely happy to announce the release of the Appwrite SDK for Svelte. This SDK joins other SDKs, such as the Web and Flutter front-end SDKs that allow you to easily integrate Appwrite with your web, mobile and desktop apps.

With the new Appwrite SDK for Svelte you can easily start using the Appwrite APIs in a native, and dedicated SDK for a Svelte application.

What is Svelte?

In case you’re new to Svelte, it is a front-end, open-source JavaScript framework for making interactive webpages. The general concept behind Svelte is similar to pre-existing frameworks like React and Vue in that it enables you to build web apps. It was created by Rich Harris and maintained by Harris and the Svelte core team.

What Is Appwrite?

In case you’re new to Appwrite, Appwrite is a new open-source, end-to-end, backend server for front-end and mobile developers that allows you to build apps much faster. Its goal is to abstract and simplify common development tasks behind REST APIs and tools, helping you to build advanced apps faster.

Getting Started

Install Appwrite

The easiest way to start running your Appwrite server is by running our Docker installer tool from your terminal. Before running the installation command, make sure you have Docker CLI installed on your host machine.

Unix

docker run -it --rm \
    --volume /var/run/docker.sock:/var/run/docker.sock \
    --volume "$(pwd)"/appwrite:/install/appwrite:rw \
    -e version=0.6.2 \
    appwrite/install

Windows

CMD

docker run -it --rm ^
    --volume //var/run/docker.sock:/var/run/docker.sock ^
    --volume "%cd%"/appwrite:/install/appwrite:rw ^
    -e version=0.6.2 ^
    appwrite/install

PowerShell

docker run -it --rm ,
    --volume /var/run/docker.sock:/var/run/docker.sock ,
    --volume ${pwd}/appwrite:/install/appwrite:rw ,
    -e version=0.6.2 ,
    appwrite/install

Grab the Svelte SDK

If you don't know Svelte yet, you can find it here.
Add svelte-appwrite to your svelte project via npm

npm install svelte-appwrite

or yarn

yarn add svelte-appwrite

Now you can initialize the Appwrite client in your SDK like this:

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

    const config = {
        endpoint: "http://localhost/v1",
        project: "[YOUR_PROJECT_ID]"
    };
</script>

<Appwrite {...config}>
</Appwrite>

In this example we want to give a user the option to login via E-Mail. For this we simply import the User and AuthEmail svelte components from svelte-appwrite.

import { User, AuthEmail } from "svelte-appwrite";

These we can use in the svelte template like this:

Make sure that every svelte-appwrite component must be inside the <Appwrite /> componente to be functional.

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

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

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

    <div slot="error">
        <AuthEmail let:authorize let:error on:success>
            <input type="text" bind:value={email}>
            <input type="text" bind:value={password}>
            <button on:click={authorize(email,password)}>Login</button>
            <div slot="error">
                {error}
            </div>
        </AuthEmail>
    </div>
</User>

Everything inside the <User /> component will only be shown to logged in users. If a user is not logged in, it will be shown the contents of the <div slot="error" /> component.

With svelte-appwrite, the Appwrite client SDK can be used in the Svelte way. The rest of the components can be found here.

Credits

A huge thanks and appreciation to Torsten Dittmann, who has made this SDK possible from the first place. If you'd like to try and contribute to any of our open-source projects, you're more then welcome you join our supportive community of developers.