React Router 7 example (#7694)

* init rr7 example

* spruce up example

* final tweaks

* Delete orm/react-router-7/.mise.toml

* remove remix content

* Update orm/remix/README.md

* test file

Author: jharrell

.github/tests/orm/remix/run.sh .github/tests/orm/react-router-7/run.sh.github/tests/orm/remix/run.sh renamed to .github/tests/orm/react-router-7/run.sh

@@ -2,14 +2,14 @@
 
 set -eu
 
-npm install 
+npm install
 npx prisma migrate dev --name init
 npm run dev &
 pid=$!
 
 sleep 15
 
 # check frontend
-curl --fail 'http://localhost:3000/'
+curl --fail 'http://localhost:5173'
 
 kill "$pid"

orm/react-router-7/.gitignore

@@ -0,0 +1,11 @@
+.DS_Store
+/node_modules/
+
+# React Router
+/.react-router/
+/build/
+
+.mise*
+
+prisma/dev.db*
+prisma/migrations/

orm/react-router-7/README.md

@@ -0,0 +1,160 @@
+# React Router 7 Example
+
+This example shows how to implement a simple web app using [React Router 7](https://reactrouter.com) and [Prisma ORM](https://www.prisma.io/docs). This example was bootstrapped using the React Router CLI tool `create-react-router`.
+
+## Getting started
+
+### 1. Download the example and navigate to the project directory
+
+Download this example:
+
+```
+npx try-prisma@latest --template orm/react-router-7
+```
+
+Then navigate to the project directory
+
+```
+cd react-router-7
+```
+
+<details><summary><strong>Alternative:</strong> Clone the entire repo</summary>
+
+Clone this repository:
+
+```
+git clone git@github.com:prisma/prisma-examples.git --depth=1
+```
+
+Install npm dependencies:
+
+```
+cd prisma-examples/orm/nextjs
+npm install
+```
+
+</details>
+
+#### [Optional] Switch database to Prisma Postgres
+
+This example uses a local SQLite database by default. If you want to use to [Prisma Postgres](https://prisma.io/postgres), follow these instructions (otherwise, skip to the next step):
+
+1. Set up a new Prisma Postgres instance in the Prisma Data Platform [Console](https://console.prisma.io) and copy the database connection URL.
+2. Update the `datasource` block to use `postgresql` as the `provider` and paste the database connection URL as the value for `url`:
+
+   ```prisma
+   datasource db {
+     provider = "postgresql"
+     url      = "prisma+postgres://accelerate.prisma-data.net/?api_key=ey...."
+   }
+   ```
+
+   > **Note**: In production environments, we recommend that you set your connection URL via an [environment variable](https://www.prisma.io/docs/orm/more/development-environment/environment-variables/managing-env-files-and-setting-variables), e.g. using a `.env` file.
+
+3. Install the Prisma Accelerate extension:
+   ```
+   npm install @prisma/extension-accelerate
+   ```
+4. Add the Accelerate extension to the `PrismaClient` instance:
+
+   ```diff
+   + import { withAccelerate } from "@prisma/extension-accelerate"
+
+   + const prisma = new PrismaClient().$extends(withAccelerate())
+   ```
+
+That's it, your project is now configured to use Prisma Postgres!
+
+### 2. Generate Prisma Client
+
+Run the following command to generate the Prisma Client. This is what you will be using to interact with your database.
+
+```
+npx prisma generate
+```
+
+### 3. Start the React Router 7 server
+
+```
+npm run dev
+```
+
+The server is now running at http://localhost:5173. You can now view your todo list!
+
+## Switch to another database (e.g. PostgreSQL, MySQL, SQL Server, MongoDB)
+
+If you want to try this example with another database than SQLite, you can adjust the the database connection in [`prisma/schema.prisma`](./prisma/schema.prisma) by reconfiguring the `datasource` block.
+
+Learn more about the different connection configurations in the [docs](https://www.prisma.io/docs/reference/database-reference/connection-urls).
+
+<details><summary>Expand for an overview of example configurations with different databases</summary>
+
+### PostgreSQL
+
+For PostgreSQL, the connection URL has the following structure:
+
+```prisma
+datasource db {
+  provider = "postgresql"
+  url      = "postgresql://USER:PASSWORD@HOST:PORT/DATABASE?schema=SCHEMA"
+}
+```
+
+Here is an example connection string with a local PostgreSQL database:
+
+```prisma
+datasource db {
+  provider = "postgresql"
+  url      = "postgresql://janedoe:mypassword@localhost:5432/notesapi?schema=public"
+}
+```
+
+### MySQL
+
+For MySQL, the connection URL has the following structure:
+
+```prisma
+datasource db {
+  provider = "mysql"
+  url      = "mysql://USER:PASSWORD@HOST:PORT/DATABASE"
+}
+```
+
+Here is an example connection string with a local MySQL database:
+
+```prisma
+datasource db {
+  provider = "mysql"
+  url      = "mysql://janedoe:mypassword@localhost:3306/notesapi"
+}
+```
+
+### Microsoft SQL Server
+
+Here is an example connection string with a local Microsoft SQL Server database:
+
+```prisma
+datasource db {
+  provider = "sqlserver"
+  url      = "sqlserver://localhost:1433;initial catalog=sample;user=sa;password=mypassword;"
+}
+```
+
+### MongoDB
+
+Here is an example connection string with a local MongoDB database:
+
+```prisma
+datasource db {
+  provider = "mongodb"
+  url      = "mongodb://USERNAME:PASSWORD@HOST/DATABASE?authSource=admin&retryWrites=true&w=majority"
+}
+```
+
+</details>
+
+## Next steps
+
+- Check out the [Prisma docs](https://www.prisma.io/docs)
+- Share your feedback on the [Prisma Discord](https://pris.ly/discord/)
+- Create issues and ask questions on [GitHub](https://github.com/prisma/prisma/)

orm/react-router-7/app/app.css

@@ -0,0 +1,15 @@
+@import "tailwindcss";
+
+@theme {
+  --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif,
+    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+}
+
+html,
+body {
+  @apply bg-white dark:bg-gray-950;
+
+  @media (prefers-color-scheme: dark) {
+    color-scheme: dark;
+  }
+}

orm/react-router-7/app/components/Todo.tsx

@@ -0,0 +1,48 @@
+import { useFetcher } from 'react-router'
+import type { Todo } from '@prisma/client'
+
+type TodoProps = {
+  todo: Todo
+}
+
+export function TodoItem({ todo }: TodoProps) {
+  const updateFetcher = useFetcher()
+  const deleteFetcher = useFetcher()
+
+  return (
+    <div className="flex items-center gap-4 p-4 bg-white dark:bg-gray-800 rounded-lg shadow">
+      <updateFetcher.Form
+        method="PATCH"
+        className="flex items-center gap-4 flex-1"
+        onChange={(e) =>
+          updateFetcher.submit(e.currentTarget, { method: 'PATCH' })
+        }
+      >
+        <input type="hidden" name="id" value={todo.id} />
+        <input
+          type="checkbox"
+          name="complete"
+          defaultChecked={todo.complete}
+          className="w-5 h-5"
+        />
+        <span
+          className={`flex-1 text-gray-900 dark:text-gray-100 ${
+            todo.complete ? 'line-through text-gray-500 dark:text-gray-400' : ''
+          }`}
+        >
+          {todo.title}
+        </span>
+      </updateFetcher.Form>
+
+      <deleteFetcher.Form method="DELETE">
+        <input type="hidden" name="id" value={todo.id} />
+        <button
+          type="submit"
+          className="px-2 py-1 text-sm text-red-600 dark:text-red-400 hover:text-red-800 dark:hover:text-red-300"
+        >
+          Delete
+        </button>
+      </deleteFetcher.Form>
+    </div>
+  )
+}

orm/react-router-7/app/lib/prisma.ts

@@ -0,0 +1,9 @@
+import { PrismaClient } from '@prisma/client'
+
+const globalForPrisma = globalThis as unknown as {
+  prisma: PrismaClient | undefined
+}
+
+export const prisma = globalForPrisma.prisma ?? new PrismaClient()
+
+if (process.env.NODE_ENV !== 'production') globalForPrisma.prisma = prisma

orm/react-router-7/app/root.tsx

@@ -0,0 +1,75 @@
+import {
+  isRouteErrorResponse,
+  Links,
+  Meta,
+  Outlet,
+  Scripts,
+  ScrollRestoration,
+} from "react-router";
+
+import type { Route } from "./+types/root";
+import "./app.css";
+
+export const links: Route.LinksFunction = () => [
+  { rel: "preconnect", href: "https://fonts.googleapis.com" },
+  {
+    rel: "preconnect",
+    href: "https://fonts.gstatic.com",
+    crossOrigin: "anonymous",
+  },
+  {
+    rel: "stylesheet",
+    href: "https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap",
+  },
+];
+
+export function Layout({ children }: { children: React.ReactNode }) {
+  return (
+    <html lang="en">
+      <head>
+        <meta charSet="utf-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <Meta />
+        <Links />
+      </head>
+      <body>
+        {children}
+        <ScrollRestoration />
+        <Scripts />
+      </body>
+    </html>
+  );
+}
+
+export default function App() {
+  return <Outlet />;
+}
+
+export function ErrorBoundary({ error }: Route.ErrorBoundaryProps) {
+  let message = "Oops!";
+  let details = "An unexpected error occurred.";
+  let stack: string | undefined;
+
+  if (isRouteErrorResponse(error)) {
+    message = error.status === 404 ? "404" : "Error";
+    details =
+      error.status === 404
+        ? "The requested page could not be found."
+        : error.statusText || details;
+  } else if (import.meta.env.DEV && error && error instanceof Error) {
+    details = error.message;
+    stack = error.stack;
+  }
+
+  return (
+    <main className="pt-16 p-4 container mx-auto">
+      <h1>{message}</h1>
+      <p>{details}</p>
+      {stack && (
+        <pre className="w-full p-4 overflow-x-auto">
+          <code>{stack}</code>
+        </pre>
+      )}
+    </main>
+  );
+}

orm/react-router-7/app/routes.ts

@@ -0,0 +1,3 @@
+import { type RouteConfig, index } from "@react-router/dev/routes";
+
+export default [index("routes/home.tsx")] satisfies RouteConfig;