Skip to content

Start with Web

Learn how to add Appwrite to your web apps.

1

Head to the Appwrite Console.

Create project screen

Create project screen

If this is your first time using Appwrite, create an account and create your first project.

Then, under Add a platform, add a Web app. The Hostname should be localhost or the domain on which you're hosting your web app.

Add a platform

Add a platform

You can skip optional steps.

2

You can install the Appwrite Web SDK using a package manager.

Shell
npm install appwrite@18.1.1

You can also add the Appwrite Web SDK using CDN by adding a script tag to your HTML file. The SDK will be available globally through the Appwrite namespace.

HTML
<script src="https://cdn.jsdelivr.net/npm/appwrite@17.0.0"></script>
3

If you installed via npm, you can import Client and Account from the Appwrite SDK.

Web
import { Client, Account } from 'appwrite';

export const client = new Client();

client
    .setEndpoint('https://<REGION>.cloud.appwrite.io/v1')
    .setProject('<PROJECT_ID>'); // Replace with your project ID

export const account = new Account(client);
export { ID } from 'appwrite';

If you're using CDN, the library loads directly in your browser as a global object, so you access it through Appwrite instead of imports.

JavaScript
const client = new Appwrite.Client()

client
    .setEndpoint('https://cloud.appwrite.io/v1')
    .setProject('<PROJECT_ID>') // Replace with your project ID

export const account = new Appwrite.Account(client)
export const tablesDB = new Appwrite.TablesDB(client)
4

If you prefer TypeScript, you can import TypeScript models from the Appwrite SDK.

TypeScript
// appwrite.ts

import { Client, TablesDB, Account } from "appwrite";
// Import type models for Appwrite
import { type Models } from 'appwrite';

const client: Client = new Client();

client
    .setEndpoint('https://<REGION>.cloud.appwrite.io/v1')
    .setProject('<PROJECT_ID>'); // Replace with your project ID

export const account: Account = new Account(client);
export const tablesDB: TablesDB = new TablesDB(client);

// You then use the imported type definitions like this
const authUser: Models.Session = await account.createEmailPasswordSession({
  email,
  password
});
5

Sometimes you'll need to extend TypeScript models with your own type definitions.

For example, when you fetch a list of rows from a table, you can define the expected structure of the rows like this.

TypeScript
interface Idea extends Models.Row {
    title: string;
    description: string;
    userId: string;
}

When you fetch rows, you can use this new Idea interface like this.

TypeScript
const response = await tablesDB.listRows(
    ideasDatabaseId,
    ideasTableId,
    [Query.orderDesc("$createdAt"), Query.limit(queryLimit)]
);
const ideas = response.rows as Idea[];
6

The Appwrite SDK works with your favorite Web frameworks.

Learn to use Appwrite by adding authentication to a simple web app.

Learn to use Appwrite by building an idea tracker app.