diff --git a/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.constants.ts b/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.constants.ts index 21d03685bad..3cfece03ebd 100644 --- a/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.constants.ts +++ b/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.constants.ts @@ -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' }, diff --git a/apps/docs/pages/guides/getting-started.mdx b/apps/docs/pages/guides/getting-started.mdx index c66817a7d0d..8032bc3a0b8 100644 --- a/apps/docs/pages/guides/getting-started.mdx +++ b/apps/docs/pages/guides/getting-started.mdx @@ -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 = [ diff --git a/apps/docs/pages/guides/getting-started/quickstarts/redwoodjs.mdx b/apps/docs/pages/guides/getting-started/quickstarts/redwoodjs.mdx new file mode 100644 index 00000000000..972871daaf3 --- /dev/null +++ b/apps/docs/pages/guides/getting-started/quickstarts/redwoodjs.mdx @@ -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', +} + + + + + + [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. + + + + + ![New Project](/docs/img/redwoodjs-qs-new-project.png) + + + + + + + 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. + + + You can copy and paste these connection strings from the Supabase Dashboard when needed in later steps. + + + + + ![New Project](/docs/img/redwoodjs-qs-connection-strings-pool.png) + + + + + + + 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 + ``` + + + + + + + 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: + + * 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 + 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. + + + + ![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. + + You may not edit, delete, and add new countries using the scaffolded UI. + + + + ![RedwoodJS Splash Page](/docs/img/redwoodjs-qs-countries-ui.png) + + + + + +export const Page = ({ children }) => + +export default Page diff --git a/apps/docs/pages/index.mdx b/apps/docs/pages/index.mdx index f1a68b30401..cb079575e9b 100644 --- a/apps/docs/pages/index.mdx +++ b/apps/docs/pages/index.mdx @@ -72,6 +72,11 @@ export const meta = { + + + + + 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 00000000000..3718cd797e3 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 00000000000..50e98e5630c 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 00000000000..46cc1555991 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 00000000000..750e5ad68f3 Binary files /dev/null and b/apps/docs/public/img/redwoodjs-qs-splash.png differ diff --git a/package-lock.json b/package-lock.json index 67067295f21..60cd7d3e6e5 100644 --- a/package-lock.json +++ b/package-lock.json @@ -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 } }