Learn how to setup your first React project powered by Appwrite.
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 optional steps.
Create a Vite project.
Shell
npm create vite@latest my-app -- --template react && cd my-app
Install the JavaScript Appwrite SDK.
Shell
npm install appwrite@18.1.1
Find your project's ID in the Settings page.
Create a new file src/lib/appwrite.js and add the following code to it, replace <PROJECT_ID> with your project ID.
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';
Add the following code to src/App.jsx.
JavaScript
import React, { useState } from 'react';
import { account, ID } from './lib/appwrite';
const App = () => {
const [loggedInUser, setLoggedInUser] = useState(null);
const [email, setEmail] = useState('');
const [password, setPassword] = useState('');
const [name, setName] = useState('');
async function login(email, password) {
await account.createEmailPasswordSession(email, password);
setLoggedInUser(await account.get());
}
return (
<div>
<p>
{loggedInUser ? `Logged in as ${loggedInUser.name}` : 'Not logged in'}
</p>
<form>
<input type="email" placeholder="Email" value={email} onChange={e => setEmail(e.target.value)} />
<input type="password" placeholder="Password" value={password} onChange={e => setPassword(e.target.value)} />
<input type="text" placeholder="Name" value={name} onChange={e => setName(e.target.value)} />
<button type="button" onClick={() => login(email, password)}>
Login
</button>
<button
type="button"
onClick={async () => {
await account.create(ID.unique(), email, password, name);
login(email, password);
}}
>
Register
</button>
<button
type="button"
onClick={async () => {
await account.deleteSession('current');
setLoggedInUser(null);
}}
>
Logout
</button>
</form>
</div>
);
};
export default App;
Run your project with npm run dev -- --open --port 3000 and open Localhost on Port 3000 in your browser.