Learn how to setup your first Refine project powered by 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 optional steps.
Create Refine project
Create a Refine project with Appwrite support.
npm create refine-app@latest -- --preset refine-appwrite
Install 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.
Import Appwrite
Find your project's ID in the Settings page.
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 };
Create a login page
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_COLLECTION_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;
All set
Run your project with npm run dev -- --open --port 3000 and open Localhost on Port 3000 in your browser.