-
Notifications
You must be signed in to change notification settings - Fork 226
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #350 from necatiozmen/feat-refine-tutorial
doc: add Refine tutorial
- Loading branch information
Showing
39 changed files
with
1,090 additions
and
60 deletions.
There are no files selected for viewing
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Binary file not shown.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file not shown.
Binary file not shown.
Binary file not shown.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,179 @@ | ||
| --- | ||
| layout: article | ||
| title: Start with Refine | ||
| description: Build Refine apps with Appwrite and learn how to use our powerful backend to add authentication, user management, file storage, and more. | ||
| difficulty: beginner | ||
| readtime: 3 | ||
| back: /docs/quick-starts | ||
| --- | ||
|
|
||
| Learn how to setup your first Refine project powered by Appwrite. | ||
| {% section #step-1 step=1 title="Create project" %} | ||
| Head to the [Appwrite Console](https://cloud.appwrite.io/console). | ||
|
|
||
| {% only_dark %} | ||
|  | ||
| {% /only_dark %} | ||
| {% only_light %} | ||
|  | ||
| {% /only_light %} | ||
|
|
||
| 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`. | ||
|
|
||
| {% only_dark %} | ||
|  | ||
| {% /only_dark %} | ||
| {% only_light %} | ||
|  | ||
| {% /only_light %} | ||
|
|
||
| You can skip optional steps. | ||
|
|
||
| {% /section %} | ||
| {% section #step-2 step=2 title="Create Refine project" %} | ||
| Create a Refine project with Appwrite support. | ||
|
|
||
| ```sh | ||
| npm create refine-app@latest -- --preset refine-appwrite | ||
| ``` | ||
| {% /section %} | ||
| {% section #step-3 step=3 title="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: | ||
| ```sh | ||
| npm install @refinedev/appwrite | ||
| ``` | ||
| Then follow [this](https://refine.dev/docs/packages/documentation/data-providers/appwrite) guide. | ||
|
|
||
|
|
||
| {% /section %} | ||
| {% section #step-4 step=4 title="Import Appwrite" %} | ||
| Find your project's ID in the **Settings** page. | ||
|
|
||
| {% only_dark %} | ||
|  | ||
| {% /only_dark %} | ||
| {% only_light %} | ||
|  | ||
| {% /only_light %} | ||
| Navigate to `src/utility/appwriteClient.ts` and add your API credentials. | ||
|
|
||
|
|
||
| ```ts | ||
| import { Account, Appwrite, Storage } from "@refinedev/appwrite"; | ||
|
|
||
| const APPWRITE_URL = '<YOUR_API_ENDPOINT>'; // Replace with your Appwrite API Endpoint | ||
| const APPWRITE_PROJECT = "<YOUR_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 }; | ||
|
|
||
| ``` | ||
| {% /section %} | ||
| {% section #step-5 step=5 title="Create a login page" %} | ||
|
|
||
| Replace the code in `src/App.tsx` with the following. | ||
|
|
||
| ```js | ||
| 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; | ||
| ``` | ||
| {% /section %} | ||
|
|
||
| {% section #step-6 step=6 title="All set" %} | ||
| Run your project with `npm run dev -- --open --port 3000` and open [Localhost on Port 3000](http://localhost:3000) in your browser. | ||
| {% /section %} |
Oops, something went wrong.