paint-brush
Integrate Appwrite APIs and SDK for Svelteby@eldadfux
148 reads

Integrate Appwrite APIs and SDK for Svelte

by Eldad Fux
Eldad Fux HackerNoon profile picture

Eldad Fux

@eldadfux

Entrepreneur, Software Architect, open source enthusiastic and the creator of...

January 23rd, 2021
Read on Terminal Reader
Read this story in a terminal
Print this story
Read this story w/o Javascript
Read this story w/o Javascript
tldt arrow

Too Long; Didn't Read

Appwrite announces the release of the Appwrite SDK for Svelte. This SDK joins other SDKs to integrate Appwrite with your web, mobile, and desktop apps.

People Mentioned

Mention Thumbnail

Torsten Dittmann

@torstendittmann

Company Mentioned

Mention Thumbnail
Harris
featured image - Integrate Appwrite APIs and SDK for Svelte
Eldad Fux HackerNoon profile picture
Eldad Fux

Eldad Fux

@eldadfux

Entrepreneur, Software Architect, open source enthusiastic and the creator of http://appwrite.io

About @eldadfux
LEARN MORE ABOUT @ELDADFUX'S
EXPERTISE AND PLACE ON THE INTERNET.

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

L O A D I N G
. . . comments & more!

About Author

Eldad Fux HackerNoon profile picture
Eldad Fux@eldadfux
Entrepreneur, Software Architect, open source enthusiastic and the creator of http://appwrite.io

TOPICS

THIS ARTICLE WAS FEATURED IN...

Permanent on Arweave
Read on Terminal Reader
Read this story in a terminal
 Terminal
Read this story w/o Javascript
Read this story w/o Javascript
 Lite
Also published here
Coffee-web
Iandroid
Unni
Hashnode
Learnrepo

Mentioned in this story

companies
profiles
X REMOVE AD