Configuration de Prisma pour un e-commerce React Router 7

1
npx prisma@latest init --db

1
prisma/schema.prisma   # schéma vide
2
.env                   # DATABASE_URL=https://…cloud.prisma.sh

1
npm install prisma @prisma/client @prisma/extension-accelerate

1
import { PrismaClient } from "@prisma/client";
2
import { acceleratePrisma } from "@prisma/extension-accelerate";
3

4
declare global {
5
  var prisma: ReturnType<typeof getPrisma> | undefined;
6
}
7

8
function getPrisma() {
9
  return new PrismaClient().$extends(acceleratePrisma());
10
}
11

12
export const prisma = globalThis.prisma ??= getPrisma();

1
// E-commerce SaaS (non multi-tenant)
2
// User, Category, Product (+images), Cart, Order, Invoice, EmailLog
3
// Stripe product & price ids, guest checkout, stock management…

1
model Product {
2
  id            String   @id @default(uuid())
3
  name          String
4
  slug          String   @unique
5
  description   String?
6
  currency      String   @default("EUR")
7
  price         Decimal  @db.Decimal(10, 2) // ^? centimes ? voir ci-dessous
8
  stock         Int      @default(0)
9
  isActive      Boolean  @default(true)
10
  stripeProductId String? @unique
11
  stripePriceId   String? @unique
12
  images        Image[]
13
  categories    Category[]
14
  CartItem      CartItem[]
15
  createdAt     DateTime @default(now())
16
  updatedAt     DateTime @updatedAt
17
}

1
npx prisma migrate dev --name init-shop-router

1
generator client {
2
  provider        = "prisma-client"
3
  output          = "../generated/prisma"
4
  previewFeatures = ["queryCompiler", "relationJoins", "driverAdapters"]
5
  moduleFormat    = "esm"
6
}

1
npx prisma generate

1
import { prisma } from "~/server/db.server";
2

3
const slug = (s: string) =>
4
  s.toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/(^-|-$)/g, "");
5

6
async function main() {
7
  await prisma.product.deleteMany();
8
  await prisma.category.deleteMany();
9

10
  const cats = await prisma.$transaction(
11
    ["Vêtements", "Accessoires", "Maison"].map((n) =>
12
      prisma.category.create({ data: { name: n, slug: slug(n) } }),
13
    ),
14
  );
15

16
  for (let i = 0; i < 10; i++) {
17
    const name = `Produit ${i + 1}`;
18
    await prisma.product.create({
19
      data: {
20
        name,
21
        slug: `${slug(name)}-${i}`,
22
        description: `Description de ${name}`,
23
        price: (Math.random() * 150 + 5).toFixed(2),
24
        stock: Math.floor(Math.random() * 100),
25
        categories: { connect: { id: cats[i % cats.length].id } },
26
      },
27
    });
28
  }
29
}
30

31
main().finally(() => prisma.$disconnect());

1
npm run dev      # lance l'app dans un 1er terminal
2
npx tsx prisma/seed.ts

1
import { prisma } from "~/server/db.server";
2
import { useLoaderData } from "react-router";
3

4
export async function loader() {
5
  return prisma.product.findMany({
6
    select: { id: true, name: true, description: true, price: true },
7
  });
8
}
9

10
export default function Home() {
11
  const products = useLoaderData<typeof loader>();
12
  return (
13
    <main className="grid gap-6 p-8 md:grid-cols-2 lg:grid-cols-3">
14
      {products.map((p) => (
15
        <article key={p.id} className="rounded-lg border p-4 shadow">
16
          <h2 className="text-lg font-semibold">{p.name}</h2>
17
          <p className="text-sm opacity-70">{p.description}</p>
18
          <p className="mt-2 text-right text-sky-600 font-bold">
19
            {Number(p.price).toFixed(2)} €
20
          </p>
21
        </article>
22
      ))}
23
    </main>
24
  );
25
}

1
git checkout -b 7-2-configuration-de-prisma
2
git add .
3
git commit -m "feat: configure Prisma + schema e-commerce + seed"
4
git push -u origin 7-2-configuration-de-prisma