diff --git a/apps/docs/pages/guides/getting-started/quickstarts/redwoodjs.mdx b/apps/docs/pages/guides/getting-started/quickstarts/redwoodjs.mdx
index 24a80dd5ac..be515300dc 100644
--- a/apps/docs/pages/guides/getting-started/quickstarts/redwoodjs.mdx
+++ b/apps/docs/pages/guides/getting-started/quickstarts/redwoodjs.mdx
@@ -11,108 +11,78 @@ export const meta = {
+
-
+ [Create a new project](https://app.supabase.com) in the Supabase Dashboard.
- Create a RedwoodJS app with TypeScript.
+
+ Be sure to make note of the Database Password you used as you will need this later to connect to your database.
+
-
- ```bash Terminal
- npm create redwood-app my-app --ts
- ```
-
-
-
-
-
-
-
-
- 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`.
-
-
-
-
-
- ```bash Terminal
- cd my-app && npm install @supabase/supabase-js
- ```
-
+ 
-
+
+ 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.
+
+
+ You can copy and paste these connection strings from the Supabase Dashboard when needed in later steps.
+
+ 
+
- ```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');
- ````
+
+
+
+
+
+ Create a RedwoodJS app with TypeScript.
+
+
+ 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.
+
+
+
+
+ ```bash Terminal
+ yarn create redwood-app my-app --ts
+ ```
-
- In `App.jsx`, create a Supabase client using your [Project URL and public API (anon) key](https://app.supabase.com/project/_/settings/api).
+
- 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.
+
-
- ```js src/App.jsx
- import { useEffect, useState } from "react";
- import { createClient } from "@supabase/supabase-js";
-
- const supabase = createClient("https://.supabase.co", "");
-
- function App() {
- const [countries, setCountries] = useState([]);
-
- useEffect(() => {
- getCountries();
- }, []);
-
- async function getCountries() {
- const { data } = await supabase.from("countries").select();
- setCountries(data);
- }
-
- return (
-
- {countries.map((country) => (
- - {country.name}
- ))}
-
- );
- }
-
- export default App;
+ ```bash Terminal
+ cd my-app
+ code .
```
@@ -120,21 +90,191 @@ export const meta = {
-
+
- 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`.
+
+
+ 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.
+
+
+
+
+
+ ```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"
+
+ ```
+
+
+
+
+
+
+
+ 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.
+
+
+
+ ```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")
+ }
+ ```
+
+
+
+
+
+
+
+
+ Create the Country model in `api/db/schema.prisma` and then run `yarn rw prisma migrate dev` from your terminal to apply the migration.
+
+
+
+
+
+ ```js
+ // api/db/schema.prisma
+
+ model Country {
+ id Int @id @default(autoincrement())
+ name String @unique
+ }
+ ```
+
+
+
+
+
+
+
+
+
+
+ Let's seed the database with a few countries.
+
+ Update the file `scripts/seeds.ts` to contain the following 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)
+ }
+ }
+ ```
+
+
+
+
+
+
+
+
+
+ Run the seed database command to populate the `Country` table with the countries you just created.
+
+
+ The reset database command `yarn rw prisma db reset` will recreate the tables and will also run the seed script.
+
```bash Terminal
- npm run dev
+ yarn rw prisma db seed
+ ```
+
+
+
+
+
+
+
+
+
+ Now, we'll use RedwoodJS generators to scaffold a CRUD UI for the `Country` model.
+
+
+
+
+
+ ```bash Terminal
+ yarn rw g scaffold country
```
+
+
+
+
+ Start the app via `yarn rw dev`. A browser will open to the RedwoodJS Splash page.
+
+
+
+
+
+ 
+
+
+
+
+
+
+
+
+ Click on `/countries` to visit http://localhost:8910/countries where should see the list of countries.
+
+ You can edit, delete, and add new countries.
+
+
+
+
+
+ 
+
+
+
+
export const Page = ({ children }) =>
diff --git a/apps/docs/public/img/redwoodjs-qs-connection-strings-pool.png b/apps/docs/public/img/redwoodjs-qs-connection-strings-pool.png
new file mode 100644
index 0000000000..3718cd797e
Binary files /dev/null and b/apps/docs/public/img/redwoodjs-qs-connection-strings-pool.png differ
diff --git a/apps/docs/public/img/redwoodjs-qs-countries-ui.png b/apps/docs/public/img/redwoodjs-qs-countries-ui.png
new file mode 100644
index 0000000000..50e98e5630
Binary files /dev/null and b/apps/docs/public/img/redwoodjs-qs-countries-ui.png differ
diff --git a/apps/docs/public/img/redwoodjs-qs-new-project.png b/apps/docs/public/img/redwoodjs-qs-new-project.png
new file mode 100644
index 0000000000..46cc155599
Binary files /dev/null and b/apps/docs/public/img/redwoodjs-qs-new-project.png differ
diff --git a/apps/docs/public/img/redwoodjs-qs-splash.png b/apps/docs/public/img/redwoodjs-qs-splash.png
new file mode 100644
index 0000000000..750e5ad68f
Binary files /dev/null and b/apps/docs/public/img/redwoodjs-qs-splash.png differ