Installer Remix et Strapi 5 pour l’e-commerce

Mise en place du projet Remix et initialisation de Strapi 5 avec la configuration de base.

3 min read

Installer Remix et Strapi 5 pour l’e-commerce

Dans ce chapitre, tu vas mettre en place ton frontend avec Remix et ton backend avec Strapi 5. À la fin, tu pourras lancer une appli Remix qui consomme l’API Strapi pour afficher des produits. Allez, on s’y met !

Créer le projet Remix

Générer l’app Remix

Terminal
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
Terminal
1
cd frontend

2
npm install

3
npm run dev

Structure du projet

Directory structure
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

Créer le projet Strapi 5

Initialiser Strapi

Terminal
1
npm create strapi@5 backend --quickstart

Cette commande :

  • installe Strapi 5 et ses plugins de base
  • configure SQLite par défaut
  • lance Strapi en mode dev

Aperçu du package.json

backend/package.json
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
}

Configurer les variables d’environnement

.env
1
DATABASE_CLIENT=sqlite

2
DATABASE_FILENAME=./data/db.sqlite

3
STRAPI_JWT_SECRET=ta-clef-super-secrete

Lancer Strapi

Terminal
1
cd backend

2
npm run develop

Tu peux maintenant accéder à l’admin Strapi sur http://localhost:1337/admin et créer ta première collection (Produits, Catégories, …).

Connecter Remix à Strapi

Définir l’URL de l’API

Dans frontend, crée un fichier .env :

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

Exemple de loader Remix

Dans app/routes/index.tsx, on va récupérer la liste des produits :

app/routes/index.tsx
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
}

Revalidation (cache)

Pour forcer Remix à recharger l’API toutes les X secondes :

app/routes/index.tsx
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
};

Exercices rapides

  1. Créer une collection
    Dans Strapi, ajoute une collection Categories avec un champ titre.
  2. Lister les catégories
    Crée app/routes/categories.tsx et utilise un loader pour fetcher /categories.
  3. Styler avec Tailwind
    Installe Tailwind CSS dans Remix et ajoute un design simple à ta liste.

Ready ? Dans le prochain chapitre, tu verras comment gérer l’authentification et les permissions avec Strapi et Remix !

Dans cette leçon