Integrate Appwrite APIs and SDK for Svelte

Appwrite announced 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.

What is Svelte?

Svelte 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?

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.

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

First, 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

WindowsCMD

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

Then, 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 /> component 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 in the first place. If you'd like to try and contribute to any of our open-source projects, you're more than welcome you join our supportive community of developers.

Previously published at https://medium.com/appwrite-io/appwrite-releases-a-native-svelte-sdk-for-its-open-source-baas-dcb2073655b1