mirror of
https://github.com/supabase/supabase.git
synced 2026-10-05 09:25:06 +03:00
Merge pull request #13454 from dthyresson/dt-fw-quickstart-rwjs
docs: Updated RedwoodJS Quick Start with Prisma
This commit is contained in:
9 files changed
+292
No files matched your search
@@ -60,6 +60,7 @@ export const gettingstarted = {
|
||||
items: [
|
||||
{ name: 'React', url: '/guides/getting-started/quickstarts/reactjs' },
|
||||
{ name: 'NextJS', url: '/guides/getting-started/quickstarts/nextjs' },
|
||||
{ name: 'RedwoodJS', url: '/guides/getting-started/quickstarts/redwoodjs' },
|
||||
{ name: 'Flutter', url: '/guides/getting-started/quickstarts/flutter' },
|
||||
{ name: 'SvelteKit', url: '/guides/getting-started/quickstarts/sveltekit' },
|
||||
{ name: 'SolidJS', url: '/guides/getting-started/quickstarts/solidjs' },
|
||||
|
||||
@@ -136,6 +136,13 @@ export const quickstarts = [
|
||||
'Learn how to create a Supabase project, add some sample data to your database, and query the data from a NextJS app.',
|
||||
icon: '/docs/img/icons/nextjs-icon',
|
||||
},
|
||||
{
|
||||
title: 'RedwoodJS',
|
||||
href: '/guides/getting-started/quickstarts/redwoodjs',
|
||||
description:
|
||||
'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.',
|
||||
icon: '/docs/img/icons/redwood-icon',
|
||||
},
|
||||
{
|
||||
title: 'Flutter',
|
||||
href: '/guides/getting-started/quickstarts/flutter',
|
||||
@@ -143,6 +150,27 @@ export const quickstarts = [
|
||||
'Learn how to create a Supabase project, add some sample data to your database, and query the data from a Flutter app.',
|
||||
icon: '/docs/img/icons/flutter-icon',
|
||||
},
|
||||
{
|
||||
title: 'SvelteKit',
|
||||
href: '/guides/getting-started/quickstarts/sveltekit',
|
||||
description:
|
||||
'Learn how to create a Supabase project, add some sample data to your database, and query the data from a SvelteKit app.',
|
||||
icon: '/docs/img/icons/svelte-icon',
|
||||
},
|
||||
{
|
||||
title: 'SolidJS',
|
||||
href: '/guides/getting-started/quickstarts/solidjs',
|
||||
description:
|
||||
'Learn how to create a Supabase project, add some sample data to your database, and query the data from a SolidJS app.',
|
||||
icon: '/docs/img/icons/solidjs-icon',
|
||||
},
|
||||
{
|
||||
title: 'Vue',
|
||||
href: '/guides/getting-started/quickstarts/solidjs',
|
||||
description:
|
||||
'Learn how to create a Supabase project, add some sample data to your database, and query the data from a Vue app.',
|
||||
icon: '/docs/img/icons/vuejs-icon',
|
||||
},
|
||||
]
|
||||
|
||||
export const webapps = [
|
||||
|
||||
@@ -0,0 +1,242 @@
|
||||
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 not 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
|
||||
@@ -72,6 +72,11 @@ export const meta = {
|
||||
<IconPanel title="NextJS" icon="/docs/img/icons/nextjs-icon" />
|
||||
</a>
|
||||
</Link>
|
||||
<Link href={`/guides/getting-started/quickstarts/redwoodjs`} passHref>
|
||||
<a className="no-underline">
|
||||
<IconPanel title="RedwoodJS" icon="/docs/img/icons/redwoodjs-icon" />
|
||||
</a>
|
||||
</Link>
|
||||
<Link href={`/guides/getting-started/quickstarts/flutter`} passHref>
|
||||
<a className="no-underline">
|
||||
<IconPanel title="Flutter" icon="/docs/img/icons/flutter-icon" />
|
||||
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 76 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 64 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 124 KiB |
Generated
+16
@@ -38857,6 +38857,8 @@
|
||||
},
|
||||
"packages/config/node_modules/@tailwindcss/forms": {
|
||||
"version": "0.5.3",
|
||||
"resolved": "https://registry.npmjs.org/@tailwindcss/forms/-/forms-0.5.3.tgz",
|
||||
"integrity": "sha512-y5mb86JUoiUgBjY/o6FJSFZSEttfb3Q5gllE4xoKjAAD+vBrnIhE4dViwUuow3va8mpH4s9jyUbUbrRGoRdc2Q==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"mini-svg-data-uri": "^1.2.3"
|
||||
@@ -38988,6 +38990,8 @@
|
||||
},
|
||||
"packages/ui/node_modules/typescript": {
|
||||
"version": "4.3.4",
|
||||
"resolved": "https://registry.npmjs.org/typescript/-/typescript-4.3.4.tgz",
|
||||
"integrity": "sha512-uauPG7XZn9F/mo+7MrsRjyvbxFpzemRjKEZXS4AK83oP2KKOJPvb+9cO/gmnv8arWZvhnjVOXz7B49m1l0e9Ew==",
|
||||
"dev": true,
|
||||
"license": "Apache-2.0",
|
||||
"bin": {
|
||||
@@ -39628,6 +39632,8 @@
|
||||
},
|
||||
"tests/node_modules/array-union": {
|
||||
"version": "2.1.0",
|
||||
"resolved": "https://registry.npmjs.org/array-union/-/array-union-2.1.0.tgz",
|
||||
"integrity": "sha512-HGyxoOTYUyCM6stUe6EJgnd4EoewAI7zMdfqO+kGjnlZmBDz/cR5pf8r/cR4Wq60sL/p0IkcjUEEPwS3GFrIyw==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
@@ -39707,6 +39713,8 @@
|
||||
},
|
||||
"tests/node_modules/globby": {
|
||||
"version": "11.1.0",
|
||||
"resolved": "https://registry.npmjs.org/globby/-/globby-11.1.0.tgz",
|
||||
"integrity": "sha512-jhIXaOzy1sb8IyocaruWSn1TjmnBVs8Ayhcy83rmxNJ8q2uWKCAj3CnJY+KpGSXCueAPc0i05kVvVKtP1t9S3g==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
@@ -49588,6 +49596,8 @@
|
||||
"dependencies": {
|
||||
"@tailwindcss/forms": {
|
||||
"version": "0.5.3",
|
||||
"resolved": "https://registry.npmjs.org/@tailwindcss/forms/-/forms-0.5.3.tgz",
|
||||
"integrity": "sha512-y5mb86JUoiUgBjY/o6FJSFZSEttfb3Q5gllE4xoKjAAD+vBrnIhE4dViwUuow3va8mpH4s9jyUbUbrRGoRdc2Q==",
|
||||
"requires": {
|
||||
"mini-svg-data-uri": "^1.2.3"
|
||||
}
|
||||
@@ -66549,6 +66559,8 @@
|
||||
},
|
||||
"array-union": {
|
||||
"version": "2.1.0",
|
||||
"resolved": "https://registry.npmjs.org/array-union/-/array-union-2.1.0.tgz",
|
||||
"integrity": "sha512-HGyxoOTYUyCM6stUe6EJgnd4EoewAI7zMdfqO+kGjnlZmBDz/cR5pf8r/cR4Wq60sL/p0IkcjUEEPwS3GFrIyw==",
|
||||
"dev": true
|
||||
},
|
||||
"chalk": {
|
||||
@@ -66608,6 +66620,8 @@
|
||||
},
|
||||
"globby": {
|
||||
"version": "11.1.0",
|
||||
"resolved": "https://registry.npmjs.org/globby/-/globby-11.1.0.tgz",
|
||||
"integrity": "sha512-jhIXaOzy1sb8IyocaruWSn1TjmnBVs8Ayhcy83rmxNJ8q2uWKCAj3CnJY+KpGSXCueAPc0i05kVvVKtP1t9S3g==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"array-union": "^2.1.0",
|
||||
@@ -67638,6 +67652,8 @@
|
||||
},
|
||||
"typescript": {
|
||||
"version": "4.3.4",
|
||||
"resolved": "https://registry.npmjs.org/typescript/-/typescript-4.3.4.tgz",
|
||||
"integrity": "sha512-uauPG7XZn9F/mo+7MrsRjyvbxFpzemRjKEZXS4AK83oP2KKOJPvb+9cO/gmnv8arWZvhnjVOXz7B49m1l0e9Ew==",
|
||||
"dev": true
|
||||
}
|
||||
}
|
||||
|
||||
Reference in new issue
Block a user