Skip to content
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
200 changes: 86 additions & 114 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,9 +1,8 @@
# Appwrite Web SDK

![License](https://img.shields.io/github/license/appwrite/sdk-for-web.svg?style=flat-square)
![License](https://img.shields.io/badge/license-BSD--3--Clause-blue.svg?style=flat-square)
![Version](https://img.shields.io/badge/api%20version-2.5.0-blue.svg?style=flat-square)
[![Build Status](https://img.shields.io/travis/com/appwrite/sdk-generator?style=flat-square)](https://travis-ci.com/appwrite/sdk-generator)
[![Twitter Account](https://img.shields.io/twitter/follow/appwrite?color=00acee&label=twitter&style=flat-square)](https://twitter.com/appwrite)
[![X Account](https://img.shields.io/badge/follow-%40appwrite-000000?logo=x&style=flat-square)](https://x.com/appwrite)
[![Discord](https://img.shields.io/discord/564160730845151244?label=discord&style=flat-square)](https://appwrite.io/discord)

**This SDK targets Appwrite server version 2.5.x as shipped on Appwrite Cloud.** Self-hosted releases can lag behind Cloud — if you run an older self-hosted build, use a matching older SDK from [previous releases](https://github.com/appwrite/sdk-for-web/releases) when APIs differ.
Expand All @@ -14,191 +13,164 @@ Appwrite is an open-source backend as a service server that abstracts and simpli

## Installation

### NPM

To install via [NPM](https://www.npmjs.com/):
### npm

```bash
npm install appwrite --save
npm install appwrite
```

If you're using a bundler (like [Rollup](https://rollupjs.org/) or [webpack](https://webpack.js.org/)), you can import the Appwrite module when you need it:
Import the modules you need. The package ships ES modules, CommonJS and TypeScript types:

```js
import { Client, Account } from 'appwrite';
```

### CDN

To install with a CDN (content delivery network) add the following scripts to the bottom of your <body> tag, but before you use any Appwrite services:
Add the script before any code that uses the SDK. It exposes every export on the global `Appwrite` object:

```html
<script src="https://cdn.jsdelivr.net/npm/appwrite@29.0.0"></script>
<script>
const { Client, Account } = Appwrite;
</script>
```

## Getting Started

### Add your Web Platform
## Getting started

For you to init your SDK and interact with Appwrite services you need to add a web platform to your project. To add a new platform, go to your Appwrite console, choose the project you created in the step before and click the 'Add Platform' button.
### Add a Web platform

From the options, choose to add a **Web** platform and add your client app hostname. By adding your hostname to your project platform you are allowing cross-domain communication between your project and the Appwrite API.
In the Appwrite Console, open your project and under **Add a platform** choose **Web app**. Enter the hostname your app runs on: `localhost` for local development, and your production domain once you deploy. Appwrite only accepts browser requests from hostnames registered as platforms, so a missing hostname shows up as a CORS error.

### Init your SDK
### Initialize the client

Initialize your SDK with your Appwrite server API endpoint and project ID which can be found in your project settings page.
Copy your endpoint and project ID from your project's **Settings** page.

```js
// Init your Web SDK
const client = new Client();
import { Client } from 'appwrite';

client
.setEndpoint('http://localhost/v1') // Your Appwrite Endpoint
.setProject('455x34dfkj') // Your project ID
;
const client = new Client()
.setEndpoint('https://<REGION>.cloud.appwrite.io/v1')
.setProject('<PROJECT_ID>');
```

### Make Your First Request
For a self-hosted Appwrite, use `https://<HOSTNAME>/v1` as the endpoint.

Once your SDK object is set, access any of the Appwrite services and choose any request to send. Full documentation for any service method you would like to use can be found in your SDK documentation or in the [API References](https://appwrite.io/docs) section.
### Make your first request

Create a service from the client and call any of its methods. Every method takes a single object of named parameters and returns a promise. See the [API reference](https://appwrite.io/docs/references) for every service and method.

```js
import { Account, ID } from 'appwrite';

const account = new Account(client);

// Register User
account.create({
const user = await account.create({
userId: ID.unique(),
email: "email@example.com",
password: "password",
name: "Walter O'Brien"
})
.then(function (response) {
console.log(response);
}, function (error) {
console.log(error);
});
email: 'email@example.com',
password: 'password',
name: "Walter O'Brien",
});

console.log(user);
```

### Full Example
### Sign in with OAuth

```js
// Init your Web SDK
const client = new Client();
Enable the provider in the Console under **Auth > Settings**, then redirect the user to it. The `success` and `failure` URLs must be on a hostname you registered as a platform.

client
.setEndpoint('http://localhost/v1') // Your Appwrite Endpoint
.setProject('455x34dfkj')
;
```js
import { Account, OAuthProvider } from 'appwrite';

const account = new Account(client);

// Register User
account.create({
userId: ID.unique(),
email: "email@example.com",
password: "password",
name: "Walter O'Brien"
})
.then(function (response) {
console.log(response);
}, function (error) {
console.log(error);
});
account.createOAuth2Session({
provider: OAuthProvider.Github,
success: 'https://example.com/success',
failure: 'https://example.com/failure',
});
```

### Type Safety with Models
### Type safety with models

Methods that return rows, such as `listRows` and `getRow`, accept a type parameter for your own row shape:

The Appwrite Web SDK provides type safety when working with table rows through generic methods. Methods like `listRows`, `getRow`, and others accept a generic type parameter that allows you to specify your custom model type for full type safety.
```ts
import { TablesDB, type Models } from 'appwrite';

**TypeScript:**
```typescript
interface Book extends Models.Row {
name: string;
author: string;
releaseYear?: string;
category?: string;
genre?: string[];
isCheckedOut: boolean;
}

const tablesDB = new TablesDB(client);

try {
const result = await tablesDB.listRows<Book>({
databaseId: 'your-database-id',
tableId: 'your-table-id'
});

result.rows.forEach(book => {
console.log(`Book: ${book.name} by ${book.author}`); // Now you have full type safety
});
} catch (error) {
console.error('Appwrite error:', error);
const result = await tablesDB.listRows<Book>({
databaseId: '<DATABASE_ID>',
tableId: '<TABLE_ID>',
});

for (const book of result.rows) {
console.log(`${book.name} by ${book.author}`);
}
```

**JavaScript (with JSDoc for type hints):**
```javascript
/**
* @typedef {Object} Book
* @property {string} name
* @property {string} author
* @property {string} [releaseYear]
* @property {string} [category]
* @property {string[]} [genre]
* @property {boolean} isCheckedOut
*/
In JavaScript, the same types are available through JSDoc:

```js
import { TablesDB } from 'appwrite';

const tablesDB = new TablesDB(client);

try {
/** @type {Models.RowList<Book>} */
const result = await tablesDB.listRows({
databaseId: 'your-database-id',
tableId: 'your-table-id'
});
result.rows.forEach(book => {
console.log(`Book: ${book.name} by ${book.author}`); // Type hints available in IDE
});
} catch (error) {
console.error('Appwrite error:', error);
}
/**
* @typedef {import('appwrite').Models.Row & {
* name: string,
* author: string,
* isCheckedOut: boolean,
* }} Book
*/

/** @type {import('appwrite').Models.RowList<Book>} */
const result = await tablesDB.listRows({
Comment thread
hansi-codes[bot] marked this conversation as resolved.
databaseId: '<DATABASE_ID>',
tableId: '<TABLE_ID>',
});
```

**Tip**: You can use the `appwrite types` command to automatically generate TypeScript interfaces based on your Appwrite database schema. Learn more about [type generation](https://appwrite.io/docs/products/databases/type-generation).
The [Appwrite CLI](https://github.com/appwrite/sdk-for-cli) can generate these interfaces from your database schema with `appwrite types`. See [type generation](https://appwrite.io/docs/products/databases/tablesdb/type-generation).

### Error handling

### Error Handling
Failed requests throw an `AppwriteException` with `message`, `code`, `type` and `response` properties.

The Appwrite Web SDK raises an `AppwriteException` object with `message`, `code` and `response` properties. You can handle any errors by catching the exception and present the `message` to the user or handle it yourself based on the provided error information. Below is an example.
```js
import { AppwriteException } from 'appwrite';

```javascript
try {
const user = await account.create({
userId: ID.unique(),
email: "email@example.com",
password: "password",
name: "Walter O'Brien"
});
console.log('User created:', user);
const user = await account.get();
console.log(user);
} catch (error) {
console.error('Appwrite error:', error.message);
if (error instanceof AppwriteException) {
console.error(error.code, error.type, error.message);
}
}
```

### Learn more
The [response codes](https://appwrite.io/docs/apis/response-codes) page lists every error type.

You can use the following resources to learn more and get help
- 🚀 [Getting Started Tutorial](https://appwrite.io/docs/getting-started-for-web)
- 📜 [Appwrite Docs](https://appwrite.io/docs)
- 💬 [Discord Community](https://appwrite.io/discord)
- 🚂 [Appwrite Web Playground](https://github.com/appwrite/playground-for-web)
### Learn more

- [Web quick start](https://appwrite.io/docs/quick-starts/web)
- [Appwrite docs](https://appwrite.io/docs)
- [Discord community](https://appwrite.io/discord)
- [Web playground](https://github.com/appwrite/playground-for-web)

## Contribution

This library is auto-generated by Appwrite custom [SDK Generator](https://github.com/appwrite/sdk-generator). To learn more about how you can help us improve this SDK, please check the [contribution guide](https://github.com/appwrite/sdk-generator/blob/master/CONTRIBUTING.md) before sending a pull-request.
This library is auto-generated by the Appwrite [SDK Generator](https://github.com/appwrite/sdk-generator). To learn more about how you can help us improve this SDK, please check the [contribution guide](https://github.com/appwrite/sdk-generator/blob/main/CONTRIBUTING.md) before sending a pull-request.

## License

Expand Down