Installer Remix et Strapi 5 pour l’e-commerce

1
npx create-remix@latest frontend
2
? Where to create your app: ./frontend
3
? TypeScript or JavaScript: TypeScript
4
? Server entry file type: remix.config.js
5
? Deploy target: Remix App Server

1
cd frontend
2
npm install
3
npm run dev

1
frontend/
2
├── app/
3
│   ├── entry.client.tsx
4
│   ├── entry.server.tsx
5
│   ├── root.tsx
6
│   └── routes/
7
│       └── index.tsx
8
├── public/
9
├── remix.config.js
10
├── package.json
11
└── tsconfig.json

1
npm create strapi@5 backend --quickstart

1
{
2
  "name": "backend",
3
  "private": true,
4
  "scripts": {
5
    "develop": "strapi develop", // ^? démarre Strapi en mode dev
6
    "start": "strapi start"      // ^? build + start en prod
7
  },
8
  "dependencies": {
9
    "@strapi/strapi": "5.0.0",
10
    "@strapi/plugin-users-permissions": "5.0.0",
11
    "better-sqlite3": "9.4.3"
12
  }
13
}

1
DATABASE_CLIENT=sqlite
2
DATABASE_FILENAME=./data/db.sqlite
3
STRAPI_JWT_SECRET=ta-clef-super-secrete

1
cd backend
2
npm run develop

1
STRAPI_API_URL=http://localhost:1337/api

1
import type { LoaderFunction } from "@remix-run/node";
2
import { json, useLoaderData } from "@remix-run/react";
3

4
export const loader: LoaderFunction = async () => {
5
  const res = await fetch(
6
    `${process.env.STRAPI_API_URL}/products?populate=images`
7
  );
8
  // @callout: on récupère tous les produits et leurs images
9
  const data = await res.json();
10
  return json(data);
11
};
12

13
export default function Index() {
14
  const { data } = useLoaderData<typeof loader>();
15
  return (
16
    <main>
17
      <h1>Nos produits</h1>
18
      <ul>
19
        {data.map((p: any) => (
20
          <li key={p.id}>{p.attributes.name}</li>
21
        ))}
22
      </ul>
23
    </main>
24
  );
25
}

1
export const loader: LoaderFunction = async () => {
2
  const res = await fetch(
3
    `${process.env.STRAPI_API_URL}/products`,
4
    { next: { revalidate: 60 } }
5
  );
6
  return json(await res.json());
7
};