Start with React_

Build React apps with Appwrite and learn how to use our powerful backend to add authentication, user management, file storage, and more.

1 min read

Raw

Learn how to setup your first React project powered by Appwrite.

1. 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.

Cross-Origin Resource Sharing (CORS)

Adding localhost as a platform lets your local app talk to Appwrite. For production, add your live domain to avoid CORS errors.

Learn more in our CORS error guide.

You can skip optional steps.

2. Create React project

Create a Vite project.

Bash

npm create vite@latest my-app -- --template react && cd my-app

3. Install Appwrite

Install the JavaScript Appwrite SDK.

Bash

npm install appwrite

4. Import Appwrite

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.

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';

5. Create a login page

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({
                userId: ID.unique(),
                email,
                password,
                name
            });
            login(email, password);
          }}
        >
          Register
        </button>

        <button
          type="button"
          onClick={async () => {
            await account.deleteSession({
                sessionId: 'current'
            });
            setLoggedInUser(null);
          }}
        >
          Logout
        </button>
      </form>
    </div>
  );
};

export default App;

6. All set

Run your project with npm run dev -- --open --port 3000 and open Localhost on Port 3000 in your browser.

Was this page helpful?

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