vasceannie/supabase
1
0
Fork 0
Code Issues Pull Requests Actions 8 Packages Projects Releases Wiki Activity

First draft of RWJS quick start complete with all steps

Browse Source
This commit is contained in:
David Thyresson
2023-04-05 07:31:01 -04:00
parent d46c7a5797
commit be10f05848
5 changed files with 215 additions and 75 deletions
Download Patch File Download Diff File Expand all files Collapse all files

290
apps/docs/pages/guides/getting-started/quickstarts/redwoodjs.mdx
View File

@@ -11,108 +11,78 @@ export const meta = {
<StepHikeCompact>
<StepHikeCompact.Step step={1}>
<StepHikeCompact.Details title="Setup your new Supabase Project">
<StepHikeCompact.Details title="Create a React app">
[Create a new project](https://app.supabase.com) in the Supabase Dashboard.
Create a RedwoodJS app with TypeScript.
<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>
```bash Terminal
npm create redwood-app my-app --ts
```
</StepHikeCompact.Code>
</StepHikeCompact.Step>
<StepHikeCompact.Step step={3}>
<StepHikeCompact.Details title="Install the Supabase client library">
The fastest way to get started is to use the `supabase-js` client library which provides a convenient interface for working with Supabase from a React app.
Navigate to the React app and install `supabase-js`.
</StepHikeCompact.Details>
<StepHikeCompact.Code>
```bash Terminal
cd my-app && npm install @supabase/supabase-js
```
![New Project](/docs/img/redwoodjs-qs-new-project.png)
</StepHikeCompact.Code>
</StepHikeCompact.Step>
<StepHikeCompact.Step step={2}>
<StepHikeCompact.Details title="Set up a Supabase project with sample data">
<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):
[Create a new project](https://app.supabase.com) in the Supabase Dashboard.
* Connection String (port 5432)
* Connection Pooling / Connection String (port 6543)
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.
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>
![New Project](/docs/img/redwoodjs-qs-connection-strings-pool.png)
</StepHikeCompact.Code>
```sql SQL_EDITOR
-- Create the table
CREATE TABLE countries (
id SERIAL PRIMARY KEY,
name VARCHAR(255) NOT NULL
);
-- Insert some sample data into the table
INSERT INTO countries (name) VALUES ('United States');
INSERT INTO countries (name) VALUES ('Canada');
INSERT INTO countries (name) VALUES ('Mexico');
````
</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="Query data from the app">
In `App.jsx`, create a Supabase client using your [Project URL and public API (anon) key](https://app.supabase.com/project/_/settings/api).
<StepHikeCompact.Details title="Open your RedwoodJS app in VS Code">
Add a `getCountries` function to fetch the data and display the query result to the page.
You'll develop your app, manage database migrations, and run your app in VS Code.
</StepHikeCompact.Details>
<StepHikeCompact.Code>
```js src/App.jsx
import { useEffect, useState } from "react";
import { createClient } from "@supabase/supabase-js";
const supabase = createClient("https://<project>.supabase.co", "<your-anon-key>");
function App() {
const [countries, setCountries] = useState([]);
useEffect(() => {
getCountries();
}, []);
async function getCountries() {
const { data } = await supabase.from("countries").select();
setCountries(data);
}
return (
<ul>
{countries.map((country) => (
<li key={country.name}>{country.name}</li>
))}
</ul>
);
}
export default App;
```bash Terminal
cd my-app
code .
```
</StepHikeCompact.Code>
@@ -120,21 +90,191 @@ export const meta = {
</StepHikeCompact.Step>
<StepHikeCompact.Step step={5}>
<StepHikeCompact.Details title="Start the app">
<StepHikeCompact.Details title="Configure Environment Variables">
Start the app, go to http://localhost:5173 in a browser, and open the browser console and you should see the list of countries.
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={5}>
<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={6}>
<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={7}>
<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={8}>
<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
npm run dev
yarn rw prisma db seed
```
</StepHikeCompact.Code>
</StepHikeCompact.Step>
<StepHikeCompact.Step step={9}>
<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={10}>
<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>
![RedwoodJS Splash Page](/docs/img/redwoodjs-qs-splash.png)
</StepHikeCompact.Code>
</StepHikeCompact.Step>
<StepHikeCompact.Step step={11}>
<StepHikeCompact.Details title="Start the app">
Click on `/countries` to visit http://localhost:8910/countries where should see the list of countries.
You can edit, delete, and add new countries.
</StepHikeCompact.Details>
<StepHikeCompact.Code>
![RedwoodJS Splash Page](/docs/img/redwoodjs-qs-countries-ui.png)
</StepHikeCompact.Code>
</StepHikeCompact.Step>
</StepHikeCompact>
export const Page = ({ children }) => <Layout meta={meta} children={children} hideToc={true} />

BIN
apps/docs/public/img/redwoodjs-qs-connection-strings-pool.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 76 KiB

BIN
apps/docs/public/img/redwoodjs-qs-countries-ui.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 12 KiB

BIN
apps/docs/public/img/redwoodjs-qs-new-project.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 64 KiB

BIN
apps/docs/public/img/redwoodjs-qs-splash.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 124 KiB