mirror of
https://github.com/supabase/supabase.git
synced 2026-10-05 09:25:06 +03:00
243 lines
7.9 KiB
Plaintext
243 lines
7.9 KiB
Plaintext
import Layout from '~/layouts/DefaultGuideLayout'
|
|
import StepHikeCompact from '~/components/StepHikeCompact'
|
|
|
|
export const meta = {
|
|
title: 'Use Supabase with RedwoodJS',
|
|
subtitle:
|
|
'Learn how to create a Supabase project, add some sample data to your database using Prisma migration and seeds, and query the data from a RedwoodJS app.',
|
|
breadcrumb: 'Framework Quickstarts',
|
|
}
|
|
|
|
<StepHikeCompact>
|
|
|
|
<StepHikeCompact.Step step={1}>
|
|
<StepHikeCompact.Details title="Setup your new Supabase Project">
|
|
[Create a new project](https://app.supabase.com) in the Supabase Dashboard.
|
|
|
|
<Admonition type="important">
|
|
Be sure to make note of the Database Password you used as you will need this later to connect to your database.
|
|
</Admonition>
|
|
</StepHikeCompact.Details>
|
|
|
|
<StepHikeCompact.Code>
|
|
|
|
</StepHikeCompact.Code>
|
|
|
|
</StepHikeCompact.Step>
|
|
|
|
<StepHikeCompact.Step step={2}>
|
|
<StepHikeCompact.Details title="Gather Database Connection Strings">
|
|
After your project is ready, gather the following information about your [database connections](https://app.supabase.com/project/_/settings/database):
|
|
|
|
* Connection String (port 5432)
|
|
* Connection Pooling / Connection String (port 6543)
|
|
|
|
You will need these to setup environment variables in Step 5.
|
|
|
|
<Admonition type="tip">
|
|
You can copy and paste these connection strings from the Supabase Dashboard when needed in later steps.
|
|
</Admonition>
|
|
</StepHikeCompact.Details>
|
|
|
|
<StepHikeCompact.Code>
|
|
|
|
</StepHikeCompact.Code>
|
|
|
|
</StepHikeCompact.Step>
|
|
|
|
<StepHikeCompact.Step step={3}>
|
|
<StepHikeCompact.Details title="Create a RedwoodJS app">
|
|
Create a RedwoodJS app with TypeScript.
|
|
|
|
<Admonition type="note">
|
|
The [`yarn` package manager](https://yarnpkg.com) is required to create a RedwoodJS app. You will use it to run RedwoodJS commands later.
|
|
|
|
While TypeScript is recommended, If you want a JavaScript app, omit the `--ts` flag.
|
|
</Admonition>
|
|
</StepHikeCompact.Details>
|
|
|
|
<StepHikeCompact.Code>
|
|
```bash Terminal
|
|
yarn create redwood-app my-app --ts
|
|
```
|
|
</StepHikeCompact.Code>
|
|
|
|
</StepHikeCompact.Step>
|
|
|
|
<StepHikeCompact.Step step={4}>
|
|
<StepHikeCompact.Details title="Open your RedwoodJS app in VS Code">
|
|
You'll develop your app, manage database migrations, and run your app in VS Code.
|
|
</StepHikeCompact.Details>
|
|
|
|
<StepHikeCompact.Code>
|
|
```bash Terminal
|
|
cd my-app
|
|
code .
|
|
```
|
|
</StepHikeCompact.Code>
|
|
|
|
</StepHikeCompact.Step>
|
|
|
|
<StepHikeCompact.Step step={5}>
|
|
<StepHikeCompact.Details title="Configure Environment Variables">
|
|
In your `.env` file, add the following environment variables for your database connection:
|
|
|
|
* The `DIRECT_URL` should use the `Connection String` from your Supabase project. Hint: the port is `5432`.
|
|
|
|
* The `DATABASE_URL` should use the `Connection Pooling / Connection String` from your Supabase project. Hint: the port is `6432`.
|
|
|
|
<Admonition type="note">
|
|
Be sure to append `?pgbouncer=true` to the end of the `DATABASE_URL` connection string.
|
|
Also, replace `[YOUR-PASSWORD]` and `[YOUR-PROJECT-REF]` with the password you used when creating your Supabase project and the project reference from the URL in your browser.
|
|
</Admonition>
|
|
</StepHikeCompact.Details>
|
|
|
|
<StepHikeCompact.Code>
|
|
```bash terminal
|
|
# .env
|
|
# PostgreSQL connection string used for migrations
|
|
DIRECT_URL="postgres://postgres:[YOUR-PASSWORD]@db.[YOUR-PROJECT-REF].supabase.co:5432/postgres"
|
|
# PostgreSQL connection string with pgBouncer config — used by Prisma Client
|
|
DATABASE_URL="postgres://postgres:[YOUR-PASSWORD]@db.[YOUR-PROJECT-REF].supabase.co:6543/postgres?pgbouncer=true"
|
|
|
|
```
|
|
</StepHikeCompact.Code>
|
|
|
|
</StepHikeCompact.Step>
|
|
|
|
<StepHikeCompact.Step step={6}>
|
|
<StepHikeCompact.Details title="Update your Prisma Schema">
|
|
By default, RedwoodJS ships with a SQLite database, but we want to use PostgreSQL.
|
|
|
|
Update your Prisma schema file `api/db/schema.prisma` to use your Supabase PostgreSQL database connection environment variables you setup in Step 5.
|
|
</StepHikeCompact.Details>
|
|
|
|
<StepHikeCompact.Code>
|
|
```file="api/prisma/schema.prisma" title="api/prisma/schema.prisma"
|
|
// api/db/schema.prisma
|
|
|
|
datasource db {
|
|
provider = "postgresql"
|
|
url = env("DATABASE_URL")
|
|
directUrl = env("DIRECT_URL")
|
|
}
|
|
```
|
|
</StepHikeCompact.Code>
|
|
|
|
</StepHikeCompact.Step>
|
|
|
|
<StepHikeCompact.Step step={7}>
|
|
<StepHikeCompact.Details title="Create the Country model and apply a schema migration">
|
|
Create the Country model in `api/db/schema.prisma` and then run `yarn rw prisma migrate dev` from your terminal to apply the migration.
|
|
</StepHikeCompact.Details>
|
|
|
|
<StepHikeCompact.Code>
|
|
```js
|
|
// api/db/schema.prisma
|
|
|
|
model Country {
|
|
id Int @id @default(autoincrement())
|
|
name String @unique
|
|
}
|
|
```
|
|
</StepHikeCompact.Code>
|
|
|
|
</StepHikeCompact.Step>
|
|
|
|
<StepHikeCompact.Step step={8}>
|
|
<StepHikeCompact.Details title="Update seed script">
|
|
Let's seed the database with a few countries.
|
|
|
|
Update the file `scripts/seeds.ts` to contain the following code:
|
|
</StepHikeCompact.Details>
|
|
|
|
<StepHikeCompact.Code>
|
|
|
|
```ts
|
|
// scripts/seed.ts
|
|
|
|
import type { Prisma } from '@prisma/client'
|
|
import { db } from 'api/src/lib/db'
|
|
|
|
export default async () => {
|
|
try {
|
|
const data: Prisma.CountryCreateArgs['data'][] = [
|
|
{ name: 'United States' },
|
|
{ name: 'Canada' },
|
|
{ name: 'Mexico' },
|
|
]
|
|
|
|
console.log('Seeding countries ...')
|
|
|
|
const countries = await db.country.createMany({ data })
|
|
|
|
console.log('Done.', countries)
|
|
} catch (error) {
|
|
console.error(error)
|
|
}
|
|
}
|
|
```
|
|
</StepHikeCompact.Code>
|
|
|
|
</StepHikeCompact.Step>
|
|
|
|
<StepHikeCompact.Step step={9}>
|
|
<StepHikeCompact.Details title="Seed your database">
|
|
Run the seed database command to populate the `Country` table with the countries you just created.
|
|
|
|
<Admonition type="tip">
|
|
The reset database command `yarn rw prisma db reset` will recreate the tables and will also run the seed script.
|
|
</Admonition>
|
|
</StepHikeCompact.Details>
|
|
|
|
<StepHikeCompact.Code>
|
|
```bash Terminal
|
|
yarn rw prisma db seed
|
|
```
|
|
</StepHikeCompact.Code>
|
|
|
|
</StepHikeCompact.Step>
|
|
|
|
<StepHikeCompact.Step step={10}>
|
|
<StepHikeCompact.Details title="Scaffold the Country UI">
|
|
Now, we'll use RedwoodJS generators to scaffold a CRUD UI for the `Country` model.
|
|
</StepHikeCompact.Details>
|
|
|
|
<StepHikeCompact.Code>
|
|
```bash Terminal
|
|
yarn rw g scaffold country
|
|
```
|
|
</StepHikeCompact.Code>
|
|
|
|
</StepHikeCompact.Step>
|
|
|
|
<StepHikeCompact.Step step={11}>
|
|
<StepHikeCompact.Details title="Start the app">
|
|
Start the app via `yarn rw dev`. A browser will open to the RedwoodJS Splash page.
|
|
</StepHikeCompact.Details>
|
|
|
|
<StepHikeCompact.Code>
|
|
|
|
|
|
</StepHikeCompact.Code>
|
|
|
|
</StepHikeCompact.Step>
|
|
|
|
<StepHikeCompact.Step step={12}>
|
|
<StepHikeCompact.Details title="View Countries UI">
|
|
Click on `/countries` to visit http://localhost:8910/countries where should see the list of countries.
|
|
|
|
You may now edit, delete, and add new countries using the scaffolded UI.
|
|
</StepHikeCompact.Details>
|
|
|
|
<StepHikeCompact.Code>
|
|
|
|
</StepHikeCompact.Code>
|
|
|
|
</StepHikeCompact.Step>
|
|
</StepHikeCompact>
|
|
|
|
export const Page = ({ children }) => <Layout meta={meta} children={children} hideToc={true} />
|
|
|
|
export default Page
|