Set up Appwrite_

Create project

Head to the Appwrite Console.

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.

You can skip the optional steps.

Environment variables

To connect to Appwrite in our app, we'll need to use sensitive information. We keep the secrets by using environment variables for the endpoint and project id. Your project id is located in the Settings page in the Appwrite console.

Add a .env file to the root directory and add the following code to it, replacing PROJECT_ID with your project id.

VITE_APPWRITE_ENDPOINT=https://<REGION>.cloud.appwrite.io/v1
VITE_APPWRITE_PROJECT=PROJECT_ID

Initialize Appwrite SDK

Create a new file appwrite.js for the Appwrite related code. Only one instance of the Client() class should be created per app. Add the following code to it.

// appwrite.ts

import { Client, TablesDB, Account } from "appwrite";

const url: string = import.meta.env.VITE_APPWRITE_ENDPOINT;
const project: string = import.meta.env.VITE_APPWRITE_PROJECT;

const client: Client = new Client();

client.setEndpoint(url).setProject(project);

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