mirror of
https://github.com/supabase/supabase.git
synced 2026-10-05 09:25:06 +03:00
Renumber steps. Fix whitespace/formatting.
This commit is contained in:
David Thyresson committed
1 parent
eb5f1994a1
commit
6c17e6b038
1 file changed
+44
-84
@@ -12,13 +12,11 @@ export const meta = {
|
||||
|
||||
<StepHikeCompact.Step step={1}>
|
||||
<StepHikeCompact.Details title="Setup your new Supabase Project">
|
||||
[Create a new project](https://app.supabase.com) in the Supabase Dashboard.
|
||||
|
||||
[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>
|
||||
|
||||
<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>
|
||||
@@ -39,7 +37,6 @@ export const meta = {
|
||||
<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>
|
||||
@@ -49,15 +46,12 @@ export const meta = {
|
||||
</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>
|
||||
@@ -71,39 +65,33 @@ export const meta = {
|
||||
</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:
|
||||
|
||||
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`.
|
||||
|
||||
<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>
|
||||
* 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
|
||||
@@ -117,14 +105,13 @@ export const meta = {
|
||||
|
||||
</StepHikeCompact.Step>
|
||||
|
||||
<StepHikeCompact.Step step={5}>
|
||||
<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.
|
||||
|
||||
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.
|
||||
</StepHikeCompact.Details>
|
||||
|
||||
<StepHikeCompact.Code>
|
||||
```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")
|
||||
}
|
||||
```
|
||||
|
||||
</StepHikeCompact.Code>
|
||||
|
||||
</StepHikeCompact.Step>
|
||||
|
||||
<StepHikeCompact.Step step={6}>
|
||||
<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.
|
||||
|
||||
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
|
||||
|
||||
@@ -157,20 +140,15 @@ export const meta = {
|
||||
name String @unique
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
|
||||
</StepHikeCompact.Code>
|
||||
|
||||
</StepHikeCompact.Step>
|
||||
|
||||
<StepHikeCompact.Step step={7}>
|
||||
<StepHikeCompact.Step step={8}>
|
||||
<StepHikeCompact.Details title="Update seed script">
|
||||
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:
|
||||
</StepHikeCompact.Details>
|
||||
|
||||
<StepHikeCompact.Code>
|
||||
@@ -199,79 +177,61 @@ export const meta = {
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
</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
|
||||
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 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 g scaffold country
|
||||
yarn rw prisma db seed
|
||||
```
|
||||
|
||||
</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 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={11}>
|
||||
<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.
|
||||
|
||||
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.
|
||||
</StepHikeCompact.Details>
|
||||
|
||||
<StepHikeCompact.Code>
|
||||
|
||||
|
||||
|
||||
</StepHikeCompact.Code>
|
||||
|
||||
</StepHikeCompact.Step>
|
||||
|
||||
Reference in new issue
Block a user