Skip to content

Commit 199f924

Browse files
necatiozmennecatiozmen
committed
docs: add refine quick start
1 parent 1e13cd3 commit 199f924

File tree

3 files changed

+248
-0
lines changed

3 files changed

+248
-0
lines changed

‎apps/docs/pages/guides/getting-started/quickstarts/refine.mdx

+248
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,248 @@
1+
import Layout from '~/layouts/DefaultGuideLayout'
2+
import StepHikeCompact from '~/components/StepHikeCompact'
3+
4+
export const meta = {
5+
title: 'Use Supabase with refine',
6+
subtitle:
7+
'Learn how to create a Supabase project, add some sample data to your database, and query the data from a refine app.',
8+
breadcrumb: 'Framework Quickstarts',
9+
}
10+
11+
<StepHikeCompact>
12+
13+
<StepHikeCompact.Step step={1}>
14+
<StepHikeCompact.Details title="Set up a Supabase project with sample data">
15+
16+
[Create a new project](https://app.supabase.com) in the Supabase Dashboard.
17+
18+
After your project is ready, create a table in your Supabase database using the [SQL Editor](https://app.supabase.com/project/_/sql) in the Dashboard. Use the following SQL statement to create a `countries` table with some sample data.
19+
20+
</StepHikeCompact.Details>
21+
22+
<StepHikeCompact.Code>
23+
24+
```sql SQL_EDITOR
25+
-- Create the table
26+
CREATE TABLE countries (
27+
id SERIAL PRIMARY KEY,
28+
name VARCHAR(255) NOT NULL
29+
);
30+
-- Insert some sample data into the table
31+
INSERT INTO countries (name) VALUES ('United States');
32+
INSERT INTO countries (name) VALUES ('Canada');
33+
INSERT INTO countries (name) VALUES ('Mexico');
34+
````
35+
36+
</StepHikeCompact.Code>
37+
38+
</StepHikeCompact.Step>
39+
40+
<StepHikeCompact.Step step={2}>
41+
42+
<StepHikeCompact.Details title="Create a refine app">
43+
44+
Create a refine app using the [create refine-app](https://refine.dev/docs/getting-started/quickstart/).
45+
46+
The `refine-supabase` preset adds `@refinedev/supabase` supplementary package that supports Supabase in a refine app. `@refinedev/supabase` out-of-the-box includes the Supabase dependency: [supabase-js](https://github.com/supabase/supabase-js).
47+
48+
</StepHikeCompact.Details>
49+
50+
<StepHikeCompact.Code>
51+
52+
```bash Terminal
53+
npm create refine-app@latest -- --preset refine-supabase my-app
54+
```
55+
56+
</StepHikeCompact.Code>
57+
58+
</StepHikeCompact.Step>
59+
60+
<StepHikeCompact.Step step={3}>
61+
<StepHikeCompact.Details title="Open your refine app in VS Code">
62+
63+
You will develop your app, connect to the Supabase backend and run the refine app in VS Code.
64+
65+
</StepHikeCompact.Details>
66+
67+
<StepHikeCompact.Code>
68+
69+
```bash Terminal
70+
cd my-app
71+
code .
72+
```
73+
74+
</StepHikeCompact.Code>
75+
76+
</StepHikeCompact.Step>
77+
78+
<StepHikeCompact.Step step={4}>
79+
<StepHikeCompact.Details title="Start the app">
80+
81+
Start the app, go to http://localhost:5173 in a browser, and you should be greeted with the refine Welcome page.
82+
83+
</StepHikeCompact.Details>
84+
85+
<StepHikeCompact.Code>
86+
87+
```bash Terminal
88+
npm run dev
89+
```
90+
91+
<StepHikeCompact.Code>
92+
![refine welcome page](/docs/img/refine-qs-welcome-page.png)
93+
</StepHikeCompact.Code>
94+
95+
</StepHikeCompact.Code>
96+
97+
</StepHikeCompact.Step>
98+
99+
<StepHikeCompact.Step step={5}>
100+
<StepHikeCompact.Details title="Update `supabaseClient`">
101+
102+
You now have to update the `supabaseClient` with the `SUPABASE_URL` and `SUPABASE_KEY` of your Supabase API. The `supabaseClient` is used in auth provider and data provider methods that allow the refine app to connect to your Supabase backend.
103+
104+
</StepHikeCompact.Details>
105+
106+
<StepHikeCompact.Code>
107+
108+
```ts src/utility/supabaseClient.ts
109+
import { createClient } from "@refinedev/supabase";
110+
111+
const SUPABASE_URL = YOUR_SUPABASE_URL;
112+
const SUPABASE_KEY = YOUR_SUPABASE_KEY
113+
114+
export const supabaseClient = createClient(SUPABASE_URL, SUPABASE_KEY, {
115+
db: {
116+
schema: "public",
117+
},
118+
auth: {
119+
persistSession: true,
120+
},
121+
});
122+
```
123+
124+
</StepHikeCompact.Code>
125+
126+
</StepHikeCompact.Step>
127+
128+
<StepHikeCompact.Step step={6}>
129+
<StepHikeCompact.Details title="Add countries resource and pages">
130+
131+
You have to then configure resources and define pages for `countries` resource.
132+
133+
Use the following command to automatically add resources and generate code for pages for `countries` using refine Inferencer.
134+
135+
This defines pages for `list`, `create`, `show` and `edit` actions inside the `src/pages/countries/` directory with `<HeadlessInferencer />` component.
136+
137+
The `<HeadlessInferencer />` component depends on `@refinedev/react-table` and `@refinedev/react-hook-form` packages. In order to avoid errors, you should install them as dependencies with `npm install @refinedev/react-table @refinedev/react-hook-form`.
138+
139+
<Admonition type="note">
140+
The `<HeadlessInferencer />` is an refine Inferencer component that automatically generates necessary code for the `list`, `create`, `show` and `edit` pages.
141+
142+
More on [how the Inferencer works is available in the docs here](https://refine.dev/docs/packages/documentation/inferencer/).
143+
</Admonition>
144+
145+
146+
</StepHikeCompact.Details>
147+
148+
<StepHikeCompact.Code>
149+
150+
```bash Terminal
151+
npm run refine create-resource countries
152+
```
153+
</StepHikeCompact.Code>
154+
155+
</StepHikeCompact.Step>
156+
157+
<StepHikeCompact.Step step={7}>
158+
<StepHikeCompact.Details title="Add routes for countries pages">
159+
160+
Add routes for the `list`, `create`, `show`, and `edit` pages.
161+
162+
<Admonition type="important">
163+
You should remove the `index` route for the Welcome page presented with the `<Welcome />` component.
164+
</Admonition>
165+
166+
</StepHikeCompact.Details>
167+
168+
<StepHikeCompact.Code>
169+
```tsx src/App.tsx
170+
import { Refine, WelcomePage } from "@refinedev/core";
171+
import { RefineKbar, RefineKbarProvider } from "@refinedev/kbar";
172+
import routerBindings, {
173+
DocumentTitleHandler,
174+
NavigateToResource,
175+
UnsavedChangesNotifier,
176+
} from "@refinedev/react-router-v6";
177+
import { dataProvider, liveProvider } from "@refinedev/supabase";
178+
import { BrowserRouter, Route, Routes } from "react-router-dom";
179+
180+
import "./App.css";
181+
import authProvider from "./authProvider";
182+
import { supabaseClient } from "./utility";
183+
import { CountriesCreate, CountriesEdit, CountriesList, CountriesShow } from "./pages/countries";
184+
185+
function App() {
186+
return (
187+
<BrowserRouter>
188+
<RefineKbarProvider>
189+
<Refine
190+
dataProvider={dataProvider(supabaseClient)}
191+
liveProvider={liveProvider(supabaseClient)}
192+
authProvider={authProvider}
193+
routerProvider={routerBindings}
194+
options={{
195+
syncWithLocation: true,
196+
warnWhenUnsavedChanges: true,
197+
}}
198+
resources={[{
199+
name: "countries",
200+
list: "/countries",
201+
create: "/countries/create",
202+
edit: "/countries/edit/:id",
203+
show: "/countries/show/:id"
204+
}]}>
205+
<Routes>
206+
<Route index
207+
element={<NavigateToResource resource="countries" />}
208+
/>
209+
<Route path="/countries">
210+
<Route index element={<CountriesList />} />
211+
<Route path="create" element={<CountriesCreate />} />
212+
<Route path="edit/:id" element={<CountriesEdit />} />
213+
<Route path="show/:id" element={<CountriesShow />} />
214+
</Route>
215+
</Routes>
216+
<RefineKbar />
217+
<UnsavedChangesNotifier />
218+
<DocumentTitleHandler />
219+
</Refine>
220+
</RefineKbarProvider>
221+
</BrowserRouter>
222+
);
223+
}
224+
225+
export default App;
226+
```
227+
</StepHikeCompact.Code>
228+
229+
</StepHikeCompact.Step>
230+
231+
<StepHikeCompact.Step step={8}>
232+
<StepHikeCompact.Details title="View countries pages">
233+
234+
Now you should be able to see the countries pages along the `/countries` routes. You may now edit and add new countries using the Inferencer generated UI.
235+
236+
The Inferencer auto-generated code gives you a good starting point on which to keep building your `list`, `create`, `show` and `edit` pages. They can be obtained by clicking the `Show the auto generated code` buttons in their respective pages.
237+
</StepHikeCompact.Details>
238+
239+
<StepHikeCompact.Code>
240+
![refine List Page](/docs/img/refine-qs-countries-ui.png)
241+
</StepHikeCompact.Code>
242+
243+
</StepHikeCompact.Step>
244+
</StepHikeCompact>
245+
246+
export const Page = ({ children }) => <Layout meta={meta} children={children} hideToc={true} />
247+
248+
export default Page

‎apps/docs/public/img/refine-qs-countries-ui.png

6.28 KB
Loading

‎apps/docs/public/img/refine-qs-welcome-page.png

73.2 KB
Loading

0 commit comments

Comments
 (0)