Docs
Skip to content

Quick start

Start with Web_

Build JavaScript or Typescript web apps with Appwrite. Add authentication, user management, file storage, and more. Read our guide to get started!

2 min read

Raw

Learn how to add Appwrite to your web apps.

1. Create project

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. Install Appwrite

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

Bash
npm install appwrite

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.

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

3. Initialize Appwrite

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

JavaScript
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


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

4. Using TypeScript

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. Extending TypeScript models

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({
    databaseId: ideasDatabaseId,
    tableId: ideasTableId,
    queries: [Query.orderDesc("$createdAt"), Query.limit(queryLimit)]
});
const ideas = response.rows as Idea[];

6. All set

The Appwrite SDK works with your favorite Web frameworks.

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

Next.js

Get started with Appwrite and Next.js

React

Get started with Appwrite and React

Vue.js

Get started with Appwrite and Vue.js

Nuxt

Get started with Appwrite and Nuxt

SvelteKit

Get started with Appwrite and SvelteKit

Angular

Get started with Appwrite and Angular

Learn to use Appwrite by building an idea tracker app.

React

Get started with Appwrite and React

Vue.js

Get started with Appwrite and Vue.js

Nuxt

Get started with Appwrite and Nuxt

SvelteKit

Get started with Appwrite and SvelteKit

7. Type safety with TypeScript

Type safety with TypeScript

For better type safety in TypeScript projects, define interfaces and use generics:

TypeScript
interface User {
    name: string;
    email: string;
    isVerified: boolean;
}


import { Client, TablesDB } from "appwrite";


const client = new Client()
    .setEndpoint('https://<REGION>.cloud.appwrite.io/v1')
    .setProject('<PROJECT_ID>');


const databases = new TablesDB(client);


// Type-safe database operations
try {
    const users = await databases.listRows<User>({
        databaseId: '[DATABASE_ID]',
        tableId: '[TABLE_ID]'
    });


    users.rows.forEach(user => {
        console.log(`User: ${user.name} (${user.email})`);
    });
} catch (error) {
    console.log(error);
}

Was this page helpful?

Share what worked or what we should fix. Once approved, our agents automatically apply suggested updates to the docs.