Appwrite announced the release of the . 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. Appwrite SDK for Svelte What is 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 and in that it enables you to build web apps. It was created by and maintained by Harris and the Svelte core team. Svelte React Vue Rich Harris What Is 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. Appwrite 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 /appwrite:/install/appwrite:rw \
    -e version=0.6.2 \
    appwrite/install " " $(pwd) Windows CMD docker run -it --rm ^
    --volume //var/run/docker.sock:/var/run/docker.sock ^
    --volume " "/appwrite:/install/appwrite:rw ^
    -e version= . . ^
    appwrite/install %cd% 0 6 2 PowerShell docker run -it --rm ,
    --volume /var/run/docker.sock:/var/run/docker.sock ,
    --volume ${pwd}/appwrite:/install/appwrite:rw ,
    -e version= . ,
    appwrite/install 0.6 2 Then, grab the Svelte SDK If you don't know Svelte yet, you can find it . Add to your svelte project via : here svelte-appwrite 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 } ; config = from "svelte-appwrite" const {
		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 { , AuthEmail } "svelte-appwrite"; import User from 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 } Hello ; email = ; password = ; from "svelte-appwrite" let "" let "" </ > script < > User let:user < > h1 {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 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. <User /> With , the Appwrite client SDK can be used in the way. The rest of the components can be found . svelte-appwrite Svelte here Credits A huge thanks and appreciation to , who has made this SDK possible in the first place. If you'd like to try and contribute to any of our , you're more than welcome you join our . Torsten Dittmann open-source projects supportive community of developers Previously published at https://medium.com/appwrite-io/appwrite-releases-a-native-svelte-sdk-for-its-open-source-baas-dcb2073655b1

Harris

Integrate Appwrite APIs and SDK for Svelte

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

7 Years In Tech Leadership: What I've Learned

10 Resources That’ll Make You Better At Dashboard Creation

10+ Ridiculously Cool Admin Themes And Templates

10 Reasons Why Front End Development Is a Great Career Choice

10 Reasons To Use TailwindCSS In Your Next Project

Top 10 JavaScript Charting Libraries for Every Data Visualization Need

7 Years In Tech Leadership: What I've Learned

10 Resources That’ll Make You Better At Dashboard Creation

10+ Ridiculously Cool Admin Themes And Templates

10 Reasons Why Front End Development Is a Great Career Choice

10 Reasons To Use TailwindCSS In Your Next Project

Top 10 JavaScript Charting Libraries for Every Data Visualization Need

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps