Appwrite Releases a Native Svelte SDK for Its Open-Source BaaS
Tags: svelte, javascript, web, serverless
Published: 2021-01-20 12:32:01

We are extremely happy to announce the release of the [Appwrite SDK for Svelte](https://github.com/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](https://svelte.dev/), 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](https://reactjs.org/) and [Vue](https://vuejs.org/) in that it enables you to build web apps. It was created by [Rich Harris](https://twitter.com/rich_harris) and maintained by Harris and the Svelte core team.

## What Is Appwrite?

In case you’re new to [Appwrite](https://github.com/appwrite/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

```bash
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

```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

```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](https://svelte.dev/).
Add `svelte-appwrite` to your svelte project via [npm](https://www.npmjs.com/package/svelte-appwrite) 

`npm install svelte-appwrite`

or yarn

`yarn add svelte-appwrite`

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

```svelte
<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`.

```svelte
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.

```svelte
<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](https://github.com/appwrite/sdk-for-svelte).

## Credits
A huge thanks and appreciation to [Torsten Dittmann](https://github.com/TorstenDittmann), 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](https://github.com/appwrite), you're more then welcome you join our [supportive community of developers](https://appwrite.io/discord).