Use Supabase with Refine

<$Partial path="quickstart_db_setup.mdx" />

3. Create a Refine app

Create a Refine app using the create refine-app.

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.

npm create refine-app@latest -- --preset refine-supabase my-app

4. Install Supabase's Agent Skills (optional)

Supabase's Agent Skills is a curated set of instructions that give your AI agent procedural knowledge about working with Supabase.

Install them so your AI coding agent can produce more accurate, reliable code using current Supabase patterns, such as authentication, server-side rendering, and database migrations, rather than relying solely on training data.

To install, run the following command in the root of your project:

npx skills add supabase/agent-skills

5. Update supabaseClient with environment variables

Create a .env file and populate it with your Supabase URL and publishable key, which you can get from the helper below, or from the project Connect panel.

VITE_SUPABASE_URL=<SUBSTITUTE_SUPABASE_URL>
VITE_SUPABASE_PUBLISHABLE_KEY=<SUBSTITUTE_SUPABASE_PUBLISHABLE_KEY>

Update src/utility/supabaseClient.ts to read the URL and publishable key from these environment variables. The supabaseClient is used in auth provider and data provider methods that allow the Refine app to connect to your Supabase backend.

import { createClient } from '@refinedev/supabase'

const SUPABASE_URL = import.meta.env.VITE_SUPABASE_URL
const SUPABASE_KEY = import.meta.env.VITE_SUPABASE_PUBLISHABLE_KEY

export const supabaseClient = createClient(SUPABASE_URL, SUPABASE_KEY, {
  db: {
    schema: 'public',
  },
  auth: {
    persistSession: true,
  },
})

<$Partial path="api_settings.mdx" variables={{ "framework": "refine", "tab": "frameworks" }} />

6. Add instruments resource and pages

Use the following code to automatically add resources and generate code for the pages to show the instruments data using Refine Inferencer.

This defines pages for list, create, show and edit actions inside the src/pages/instruments/ directory with a <HeadlessInferencer /> component.

The <HeadlessInferencer /> component depends on @refinedev/react-table and @refinedev/react-hook-form packages. To avoid errors, you should install them as dependencies with npm install @refinedev/react-table @refinedev/react-hook-form.

The <HeadlessInferencer /> is a Refine Inferencer component that automatically generates necessary code for the list, create, show and edit pages.

Read more on how the Inferencer works is in the Refine docs.

npm run refine create-resource instruments

7. Add routes for instruments pages

Add routes for the list, create, show, and edit pages.

Remove the index route for the Welcome page presented with the <Welcome /> component.

import { Refine } from '@refinedev/core'
import { RefineKbar, RefineKbarProvider } from '@refinedev/kbar'
import routerProvider, {
  DocumentTitleHandler,
  NavigateToResource,
  UnsavedChangesNotifier,
} from '@refinedev/react-router'
import { dataProvider, liveProvider } from '@refinedev/supabase'
import { BrowserRouter, Route, Routes } from 'react-router-dom'

import './App.css'

import authProvider from './authProvider'
import {
  InstrumentsCreate,
  InstrumentsEdit,
  InstrumentsList,
  InstrumentsShow,
} from './pages/instruments'
import { supabaseClient } from './utility'

function App() {
  return (
    <BrowserRouter>
      <RefineKbarProvider>
        <Refine
          dataProvider={dataProvider(supabaseClient)}
          liveProvider={liveProvider(supabaseClient)}
          authProvider={authProvider}
          routerProvider={routerProvider}
          options={{
            syncWithLocation: true,
            warnWhenUnsavedChanges: true,
          }}
          resources={[
            {
              name: 'instruments',
              list: '/instruments',
              create: '/instruments/create',
              edit: '/instruments/edit/:id',
              show: '/instruments/show/:id',
            },
          ]}
        >
          <Routes>
            <Route index element={<NavigateToResource resource="instruments" />} />
            <Route path="/instruments">
              <Route index element={<InstrumentsList />} />
              <Route path="create" element={<InstrumentsCreate />} />
              <Route path="edit/:id" element={<InstrumentsEdit />} />
              <Route path="show/:id" element={<InstrumentsShow />} />
            </Route>
          </Routes>
          <RefineKbar />
          <UnsavedChangesNotifier />
          <DocumentTitleHandler />
        </Refine>
      </RefineKbarProvider>
    </BrowserRouter>
  )
}

export default App

8. Start the app

Run the development server, go to http://localhost:5173/instruments in a browser, and you should see the instruments pages along the /instruments routes. You can edit and add new instruments using the Inferencer-generated UI.

npm run dev

The Inferencer auto-generated code gives you a good starting point on which to keep building your list, create, show and edit pages. You can get these by clicking the Show the auto-generated code buttons in their respective pages.

Next steps

• Set up Auth for your app
• Insert more data into your database
• Upload and serve static files using Storage