Learn how to add Appwrite to your web apps.
Create project
Head to the Appwrite Console.
![Create project screen](/images/docs/quick-starts/dark/create-project.png)
![Create project screen](/images/docs/quick-starts/create-project.png)
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](/images/docs/quick-starts/dark/add-platform.png)
![Add a platform](/images/docs/quick-starts/add-platform.png)
You can skip optional steps.
Create project
You can install the Appwrite Web SDK using a package manager.
npm install appwrite@14.0.1
You can also add the Appwrite Web SDK using CDN with a script tag.
<script src="https://cdn.jsdelivr.net/npm/appwrite@14.0.1"></script>
Import Appwrite
import { Client, Account } from 'appwrite';
export const client = new Client();
client
.setEndpoint('https://cloud.appwrite.io/v1')
.setProject('<YOUR_PROJECT_ID>'); // Replace with your project ID
export const account = new Account(client);
export { ID } from 'appwrite';
Using TypeScript
If you prefer TypeScript, you can import TypeScript models from the Appwrite SDK.
// appwrite.ts
import { Client, Databases, Account } from "appwrite";
// Import type models for Appwrite
import { type Models } from 'appwrite';
const client: Client = new Client();
client
.setEndpoint('https://cloud.appwrite.io/v1')
.setProject('<YOUR_PROJECT_ID>'); // Replace with your project ID
export const account: Account = new Account(client);
export const database: Databases = new Databases(client);
// You then use the imported type definitions like this
const authUser: Models.Session = await account.createEmailPasswordSession(email, password);
Extending TypeScript models
Sometimes you'll need to extend TypeScript models with your own type definitions.
For example, when you fetch a list of documents from a collection, you can define the expected structure of the documents like this.
interface Idea extends Models.Document {
title: string;
description: string;
userId: string;
}
When you fetch documents, you can use this new Idea interface like this.
const response = await database.listDocuments(
ideasDatabaseId,
ideasCollectionId,
[Query.orderDesc("$createdAt"), Query.limit(queryLimit)]
);
const ideas = response.documents as Idea[];
All set
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.