Voozh

Use the pre-built prompt to get started faster

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

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.

👁 Add a platform

You can skip optional steps.

Create a Refine project with Appwrite support.

npm create refine-app@latest -- --preset refine-appwrite

Using the refine-appwrite preset eliminates the need for extra dependencies for a quick start.

If you want to integrate Appwrite into an existing Refine app, simply use this command:

npm install @refinedev/appwrite

Then follow this guide on the Refine documentation site.

Find your project's ID in the Settings page.

👁 Project settings screen

Navigate to src/utility/appwriteClient.ts and add your API credentials.

import { Account, Appwrite, Storage } from "@refinedev/appwrite";

const APPWRITE_URL = '<YOUR_API_ENDPOINT>'; // Replace with your Appwrite API Endpoint
const APPWRITE_PROJECT = "<PROJECT_ID>"; // Replace with your project ID

const appwriteClient = new Appwrite();

appwriteClient.setEndpoint(APPWRITE_URL).setProject(APPWRITE_PROJECT);
const account = new Account(appwriteClient);
const storage = new Storage(appwriteClient);

export { account, appwriteClient, storage };

Replace the code in src/App.tsx with the following.

import { Authenticated, Refine } from '@refinedev/core';
import { dataProvider, liveProvider } from '@refinedev/appwrite';
import {
 AuthPage,
 ErrorComponent,
 RefineThemes,
 ThemedLayoutV2,
 useNotificationProvider,
} from '@refinedev/antd';
import routerProvider, {
 CatchAllNavigate,
 NavigateToResource,
} from '@refinedev/react-router-v6';
import '@refinedev/antd/dist/reset.css';

import { App as AntdApp, ConfigProvider } from 'antd';
import { BrowserRouter, Outlet, Route, Routes } from 'react-router-dom';

import { appwriteClient } from './utility';
import { authProvider } from './authProvider';

const App: React.FC = () => {
 return (
 <BrowserRouter>
 <ConfigProvider theme={RefineThemes.Blue}>
 <AntdApp>
 <Refine
 dataProvider={dataProvider(appwriteClient, {
 databaseId: '<APPWRITE_DATABASE_ID>',
 })}
 liveProvider={liveProvider(appwriteClient, {
 databaseId: '<APPWRITE_DATABASE_ID>',
 })}
 authProvider={authProvider}
 routerProvider={routerProvider}
 notificationProvider={useNotificationProvider}
 >
 <Routes>
 <Route
 element={
 <Authenticated
 fallback={
 <CatchAllNavigate to="/login" />
 }
 >
 <ThemedLayoutV2>
 <Outlet />
 </ThemedLayoutV2>
 </Authenticated>
 }
 ></Route>

 <Route
 element={
 <Authenticated fallback={<Outlet />}>
 <NavigateToResource resource="<APPWRITE_TABLE_ID>" />
 </Authenticated>
 }
 >
 <Route path="/login" element={<AuthPage />} />
 <Route
 path="/register"
 element={<AuthPage type="register" />}
 />
 </Route>

 <Route
 element={
 <Authenticated>
 <ThemedLayoutV2>
 <Outlet />
 </ThemedLayoutV2>
 </Authenticated>
 }
 >
 <Route path="*" element={<ErrorComponent />} />
 </Route>
 </Routes>
 </Refine>
 </AntdApp>
 </ConfigProvider>
 </BrowserRouter>
 );
};

export default App;

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

URL: https://appwrite.io/docs/quick-starts/refine

⇱ Start with Refine - Docs - Appwrite

Cross-Origin Resource Sharing (CORS)

Recommended