From 6c17e6b0385d2a8fe4dfde03b95bdfbee945b9c5 Mon Sep 17 00:00:00 2001 From: David Thyresson Date: Thu, 6 Apr 2023 09:39:00 -0400 Subject: [PATCH] Renumber steps. Fix whitespace/formatting. --- .../getting-started/quickstarts/redwoodjs.mdx | 128 ++++++------------ 1 file changed, 44 insertions(+), 84 deletions(-) diff --git a/apps/docs/pages/guides/getting-started/quickstarts/redwoodjs.mdx b/apps/docs/pages/guides/getting-started/quickstarts/redwoodjs.mdx index fe0e199fad7..972871daaf3 100644 --- a/apps/docs/pages/guides/getting-started/quickstarts/redwoodjs.mdx +++ b/apps/docs/pages/guides/getting-started/quickstarts/redwoodjs.mdx @@ -12,13 +12,11 @@ export const meta = { + [Create a new project](https://app.supabase.com) in the Supabase Dashboard. - [Create a new project](https://app.supabase.com) in the Supabase Dashboard. - - - Be sure to make note of the Database Password you used as you will need this later to connect to your database. - - + + Be sure to make note of the Database Password you used as you will need this later to connect to your database. + @@ -39,7 +37,6 @@ export const meta = { You can copy and paste these connection strings from the Supabase Dashboard when needed in later steps. - @@ -49,15 +46,12 @@ export const meta = { - - 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. @@ -71,39 +65,33 @@ export const meta = { - - You'll develop your app, manage database migrations, and run your app in VS Code. - - ```bash Terminal cd my-app code . ``` - + In your `.env` file, add the following environment variables for your database connection: - 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 `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. - - + * 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 @@ -117,14 +105,13 @@ export const meta = { - + + By default, RedwoodJS ships with a SQLite database, but we want to use PostgreSQL. - 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. - + 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 @@ -135,20 +122,16 @@ export const meta = { 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. - + 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 @@ -157,20 +140,15 @@ export const meta = { name String @unique } ``` - - - - + + Let's seed the database with a few countries. - Let's seed the database with a few countries. - - Update the file `scripts/seeds.ts` to contain the following code: - + Update the file `scripts/seeds.ts` to contain the following code: @@ -199,79 +177,61 @@ export const meta = { } } ``` - - - - - - - - - - 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 - yarn rw prisma db seed - ``` - - - - - Now, we'll use RedwoodJS generators to scaffold a CRUD UI for the `Country` model. + + 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 - yarn rw g scaffold country + yarn rw prisma db seed ``` - - - - Start the app via `yarn rw dev`. A browser will open to the RedwoodJS Splash page. - + + 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. + + + ![RedwoodJS Splash Page](/docs/img/redwoodjs-qs-splash.png) - + + Click on `/countries` to visit http://localhost:8910/countries where should see the list of countries. - Click on `/countries` to visit http://localhost:8910/countries where should see the list of countries. - - You can edit, delete, and add new countries. - + You may not edit, delete, and add new countries using the scaffolded UI. - ![RedwoodJS Splash Page](/docs/img/redwoodjs-qs-countries-ui.png) -