Mise en place et configuration d'un CMS Headless (ex: Strapi)

1. Introduction aux CMS Headless et à Strapi

Bienvenue dans cette leçon dédiée à la mise en place et à la configuration d'un CMS Headless. Dans le contexte de notre cours "Maîtriser les CMS Headless : Contenu Dynamique pour vos Applications Modernes", cette étape est fondamentale pour comprendre comment ces systèmes alimentent vos applications modernes.

Qu'est-ce qu'un CMS Headless ?

Traditionnellement, un Système de Gestion de Contenu (CMS) comme WordPress ou Drupal est dit "monolithique" : il gère à la fois le contenu et sa présentation (le "front-end" ou "tête"). Un CMS Headless, en revanche, sépare complètement ces deux aspects. Il ne fournit que le back-end pour la gestion du contenu et une API (Application Programming Interface) pour distribuer ce contenu. La "tête" (le front-end) est alors libre d'être n'importe quelle application (site web, application mobile, IoT, etc.) développée avec le framework de votre choix (React, Vue, Angular, Next.js, Nuxt.js, etc.).

Avantages d'un CMS Headless :

Flexibilité totale du Front-end : Utilisez la technologie que vous voulez.
Distribution Multi-canal : Le même contenu peut être utilisé sur un site web, une application mobile, une borne interactive, etc., via des APIs uniques.
Évolutivité et Performances : Les front-ends et back-ends peuvent être déployés et scalés indépendamment.
Sécurité accrue : Le CMS n'est pas directement exposé au public.
Meilleure expérience développeur : Concentrez-vous sur le développement de l'interface utilisateur sans les contraintes d'un CMS monolithique.

Pourquoi choisir Strapi pour cette leçon ?

Strapi est un CMS Headless open-source, basé sur Node.js, qui s'est imposé comme un choix populaire pour sa facilité d'utilisation et sa flexibilité.

Atouts majeurs de Strapi :

Open-source et Extensible : Une grande communauté et la possibilité de personnaliser son fonctionnement.
Basé sur Node.js : Permet aux développeurs JavaScript de travailler sur l'ensemble de la pile.
Interface d'administration intuitive : Facilite la création et la gestion de contenu pour les non-développeurs.
Support de Bases de Données Multiples : Compatible avec PostgreSQL, MySQL, SQLite et MongoDB.
API RESTful et GraphQL intégrées : Génère automatiquement des APIs prêtes à l'emploi.
Plugins et Personnalisation : Permet d'étendre les fonctionnalités de base et d'adapter le CMS à des besoins spécifiques.

Contexte du cours

Cette leçon vous guidera à travers les étapes essentielles pour mettre en place et configurer Strapi. Vous apprendrez à installer le CMS, à naviguer dans son interface, à définir vos types de contenu et à les rendre accessibles via son API. C'est la pierre angulaire pour comprendre comment un CMS Headless fournit le contenu dynamique nécessaire à vos applications web et mobiles modernes.

2. Prérequis pour l'installation

Avant de commencer, assurez-vous d'avoir les éléments suivants installés sur votre machine :

Node.js : Il est fortement recommandé d'utiliser une version LTS (Long Term Support). Vous pouvez le télécharger depuis le site officiel de Node.js.
NPM (Node Package Manager) ou Yarn : Ces gestionnaires de paquets sont généralement inclus avec l'installation de Node.js. Yarn est souvent préféré pour sa rapidité.
Un éditeur de code : Visual Studio Code, Sublime Text, ou tout autre éditeur de votre choix.
Connaissances de base en ligne de commande : Vous utiliserez le terminal pour l'installation et le lancement de Strapi.

3. Installation de Strapi

L'installation de Strapi est un processus simple et rapide.

3.1. Création d'un nouveau projet Strapi

Ouvrez votre terminal ou invite de commande et utilisez l'une des commandes suivantes pour créer un nouveau projet Strapi. La commande --quickstart va installer Strapi avec une base de données SQLite par défaut, ce qui est parfait pour un démarrage rapide et le développement local.

# Option 1: Avec Yarn (recommandé pour une installation rapide)
yarn create strapi-app mon-premier-strapi --quickstart

# Option 2: Avec NPM
npx create-strapi-app mon-premier-strapi --quickstart

Remplacez mon-premier-strapi par le nom que vous souhaitez donner à votre projet.
La commande va créer un nouveau dossier avec ce nom, y télécharger toutes les dépendances nécessaires et initialiser votre projet Strapi. Ce processus peut prendre quelques minutes.

3.2. Lancement du serveur de développement

Une fois l'installation terminée, Strapi vous invitera automatiquement à lancer le serveur de développement. Si ce n'est pas le cas, naviguez dans le répertoire de votre projet (ex: cd mon-premier-strapi) et exécutez la commande suivante :

# Si vous utilisez Yarn
yarn develop

# Si vous utilisez NPM
npm run develop

Après le démarrage réussi du serveur, votre navigateur web devrait s'ouvrir automatiquement sur l'interface d'administration de Strapi, généralement à l'adresse http://localhost:1337/admin.

Première connexion : Lors de votre première connexion, Strapi vous demandera de créer le premier compte administrateur. Remplissez les informations requises (nom, prénom, email, mot de passe) pour accéder au tableau de bord.

4. Tour d'horizon de l'interface d'administration Strapi

L'interface d'administration de Strapi est le centre névralgique de la gestion de votre contenu et de la configuration de votre CMS.

Tableau de bord : Vue d'ensemble de votre projet, liens rapides vers la documentation, les plugins, etc.
Content Manager (Gestionnaire de Contenu) : C'est ici que vous ajoutez, modifiez, publiez ou supprimez vos entrées de contenu (vos articles, produits, etc.) une fois que vous avez défini vos types de contenu.
Content-Type Builder (Constructeur de Types de Contenu) : L'outil le plus puissant pour définir la structure de votre contenu. Vous y créez et modifiez vos modèles de données (ex: "Article", "Produit", "Page").
Media Library (Bibliothèque de Médias) : Gérez et organisez toutes vos images, vidéos, documents et autres fichiers multimédias.
Plugins : Affiche les plugins installés et vous permet d'en installer de nouveaux pour étendre les fonctionnalités de Strapi (par exemple, internationalisation, GraphQL).
Settings (Paramètres) : Contient toutes les configurations avancées de votre Strapi :
- Users & Permissions Plugin : Gérez les utilisateurs, les rôles et les permissions d'accès à l'API.
- API Tokens : Générez des tokens pour accéder de manière sécurisée à votre API.
- Database : Informations sur votre connexion à la base de données.
- Webhooks : Configurez des événements pour notifier des services externes.
- Général : Paramètres généraux de votre application.

5. Configuration initiale et Bases de Données

Lors de la création rapide (--quickstart), Strapi utilise par défaut SQLite, une base de données fichier légère et parfaite pour le développement local. Le fichier de la base de données (data.db) se trouve dans le dossier .tmp/ de votre projet.

Pour les environnements de production ou pour des projets plus complexes, vous souhaiterez généralement utiliser une base de données plus robuste comme PostgreSQL, MySQL, ou MongoDB.

Pour changer de base de données :

Installez le package approprié pour la base de données que vous souhaitez utiliser (ex: pg pour PostgreSQL, mysql pour MySQL, mongoose pour MongoDB).
```
# Exemple pour PostgreSQL
yarn add pg
# ou
npm install pg
```
Configurez le fichier de connexion : Dans les versions récentes de Strapi (v4), les configurations environnementales sont gérées dans le dossier config/. Vous pouvez créer ou modifier des fichiers de configuration spécifiques à l'environnement (par exemple, config/env/production/database.js). Un exemple de structure pour config/database.js pourrait ressembler à ceci (les détails varient selon la version de Strapi et la base de données) :
```
module.exports = ({ env }) => ({
  connection: {
    client: env('DATABASE_CLIENT', 'sqlite'), // Peut être 'postgres', 'mysql', 'mongo'
    connection: {
      host: env('DATABASE_HOST', '127.0.0.1'),
      port: env.int('DATABASE_PORT', 5432),
      database: env('DATABASE_NAME', 'strapi'),
      user: env('DATABASE_USERNAME', 'strapi'),
      password: env('DATABASE_PASSWORD', 'strapi'),
      ssl: env.bool('DATABASE_SSL', false),
    },
    // ... autres options spécifiques à la base de données
  },
});
```
Il est recommandé d'utiliser des variables d'environnement (ex: env('DATABASE_HOST')) pour gérer les informations sensibles.

6. Création de types de contenu avec le "Content-Type Builder"

Le "Content-Type Builder" est l'outil central pour définir la structure de votre contenu.

6.1. Comprendre les types de contenu

Collection Types (Types de Collection) : Utilisés pour des contenus répétables, comme des articles de blog, des produits dans un catalogue, des utilisateurs, etc. C'est l'équivalent d'une table dans une base de données.
Single Types (Types Simples) : Utilisés pour des contenus uniques qui n'apparaissent qu'une seule fois dans votre application, comme une page "À propos", une page d'accueil ou les paramètres globaux d'un site.

6.2. Définition des champs (Fields)

Chaque type de contenu est composé de champs, qui définissent le type de données que vous pouvez stocker. Strapi propose une large gamme de types de champs :

Text : Texte court ou long.
Rich Text : Pour du contenu formaté (éditeur WYSIWYG).
Number : Nombres (entiers, décimaux, flottants).
Boolean : Vrai/Faux.
Date : Date et/ou heure.
Media : Pour lier des fichiers de la Media Library (images, vidéos, documents).
Email, Password, JSON : Types spécifiques.
UID (Unique Identifier) : Génère un identifiant unique, souvent utilisé pour les slugs d'URL.
Relation : Permet de lier un type de contenu à un autre (ex: un article a un auteur).
Component : Permet de créer des groupes de champs réutilisables.
Dynamic Zone : Permet de composer dynamiquement une page avec différents composants prédéfinis.

6.3. Exercice pratique : Création d'un type de contenu "Article"

Nous allons créer un type de contenu simple pour des articles de blog.

Dans l'interface d'administration, cliquez sur "Content-Type Builder" dans la barre latérale.
Cliquez sur "+ Create new collection type".
Nommez le type de contenu :
- Display name : Article
- API ID (Singular) : article
- API ID (Plural) : articles
- Cliquez sur "Continue".
Ajoutez des champs (Add another field) :
- Titre : Sélectionnez Text, puis Short Text. Cochez "Required field" et "Unique field". Cliquez "Add another field".
- Contenu : Sélectionnez Rich Text. Cochez "Required field". Cliquez "Add another field".
- Image Principale : Sélectionnez Media, puis Single media. Cliquez "Add another field".
- Date de Publication : Sélectionnez Date, puis Date and time. Cliquez "Add another field".
- Slug : Sélectionnez UID. Liez-le au champ Titre (l'UID sera généré automatiquement à partir du titre). Cochez "Required field" et "Unique field".
Cliquez sur le bouton "Finish", puis sur "Save" en haut à droite. Strapi va redémarrer et mettre à jour sa structure de base de données.

Félicitations ! Vous avez créé votre premier type de contenu.

7. Saisie et gestion du contenu

Maintenant que votre structure de contenu est prête, vous pouvez commencer à y ajouter des entrées.

Dans l'interface d'administration, cliquez sur "Content Manager" dans la barre latérale.
Sous "COLLECTION TYPES", vous verrez votre nouveau type de contenu Article. Cliquez dessus.
Cliquez sur le bouton "+ Create new entry" en haut à droite.
Remplissez les champs que vous avez définis :
- Titre : "Mon Premier Article sur Strapi"
- Contenu : Utilisez l'éditeur Rich Text pour rédiger quelques paragraphes.
- Image Principale : Téléchargez une image depuis votre ordinateur ou choisissez-en une dans la Media Library.
- Date de Publication : Sélectionnez la date et l'heure.
- Le Slug se remplira automatiquement après avoir rempli le Titre.
Cliquez sur le bouton "Save".
Pour que le contenu soit accessible via l'API, vous devez le publier. Cliquez sur le bouton "Publish" en haut à droite de la page d'édition.

Vous pouvez répéter cette étape pour ajouter plusieurs articles à votre collection.

8. Accès à l'API et gestion des Permissions

Le cœur d'un CMS Headless est son API. Strapi génère automatiquement des endpoints RESTful (et GraphQL si le plugin est activé) pour chaque type de contenu que vous créez.

8.1. Découverte des endpoints API

Par défaut, un type de contenu "Article" aura les endpoints REST suivants :

GET /api/articles : Pour récupérer tous les articles.
GET /api/articles/:id : Pour récupérer un article spécifique par son ID.
POST /api/articles : Pour créer un nouvel article.
PUT /api/articles/:id : Pour mettre à jour un article.
DELETE /api/articles/:id : Pour supprimer un article.

8.2. Configuration des rôles et permissions

Par défaut, Strapi sécurise vos APIs. Pour que votre contenu soit accessible publiquement via l'API (sans authentification), vous devez explicitement accorder les permissions.

Dans l'interface d'administration, allez dans "Settings" (roue dentée en bas à gauche).
Sous "USERS & PERMISSIONS PLUGIN", cliquez sur "Roles".
Cliquez sur le rôle "Public" (ce rôle concerne les requêtes API non authentifiées).
Dans la section "Permissions", trouvez votre type de contenu Article.
Cochez les cases find (pour récupérer tous les articles) et findOne (pour récupérer un article par son ID).
Cliquez sur le bouton "Save" en haut à droite.

Maintenant, votre contenu "Article" est accessible publiquement via l'API.

8.3. Consommation de l'API (Exemple)

Vous pouvez tester l'accès à l'API directement dans votre navigateur en visitant http://localhost:1337/api/articles. Vous devriez voir une réponse JSON avec les articles que vous avez créés.

Voici un exemple de code JavaScript pour récupérer vos articles depuis votre application front-end :

// Exemple de consommation d'API JavaScript (peut être exécuté dans un navigateur ou Node.js)

async function fetchArticlesFromStrapi() {
  try {
    // L'URL de votre API Strapi. Assurez-vous que Strapi est lancé (yarn develop)
    const apiUrl = 'http://localhost:1337/api/articles';

    // Effectuer une requête GET vers l'API
    const response = await fetch(apiUrl);

    // Vérifier si la requête a réussi (statut HTTP 2xx)
    if (!response.ok) {
      throw new Error(`Erreur HTTP: ${response.status} - ${response.statusText}`);
    }

    // Convertir la réponse en JSON
    const data = await response.json();

    // La structure de réponse de Strapi v4 pour les collections est { data: [...], meta: {...} }
    // Chaque élément de la collection est ensuite { id: 1, attributes: {...} }
    if (data && Array.isArray(data.data)) {
      console.log("Articles récupérés avec succès :");
      data.data.forEach(article => {
        console.log(`- ID: ${article.id}`);
        console.log(`  Titre: ${article.attributes.Titre}`);
        console.log(`  Date de Publication: ${new Date(article.attributes.Date_de_Publication).toLocaleDateString()}`);
        console.log(`  Contenu (extrait): ${article.attributes.Contenu.substring(0, 100)}...`);
        console.log('---');
      });
    } else {
      console.log("Aucun article ou format de données inattendu.", data);
    }

  } catch (error) {
    console.error("Erreur lors de la récupération des articles :", error);
  }
}

// Appeler la fonction pour récupérer les articles
fetchArticlesFromStrapi();

// Pour un test rapide en ligne de commande (avec curl)
// Ouvrez un nouveau terminal et exécutez :
// curl http://localhost:1337/api/articles?populate=*
// Le paramètre `populate=*` permet de récupérer aussi les relations et médias liés.

Explication du code :

Nous utilisons l'API fetch de JavaScript pour effectuer une requête HTTP GET vers l'endpoint /api/articles de votre serveur Strapi.
response.ok vérifie si la requête a réussi.
response.json() parse la réponse JSON en un objet JavaScript.
Important : Avec Strapi v4, les données des collections sont encapsulées dans un objet data et les attributs de chaque entrée sont dans un sous-objet attributes. Par exemple, pour accéder au titre, ce n'est pas article.Titre mais article.attributes.Titre.

9. Au-delà de la configuration de base (Bref aperçu)

Une fois les bases maîtrisées, Strapi offre de nombreuses possibilités pour aller plus loin :

Plugins : Explorez et installez des plugins supplémentaires (ex: Internationalization pour gérer plusieurs langues, GraphQL pour un accès à l'API plus flexible).
Personnalisation du code : Pour des besoins spécifiques, vous pouvez modifier les controllers (logique métier), les services (logique réutilisable) ou ajouter des middlewares. Cela se fait en créant ou modifiant des fichiers dans les dossiers src/api/[votre_type_de_contenu]/ et src/extensions/.
Déploiement : Apprenez à déployer votre Strapi sur un serveur de production (VPS, PaaS comme Heroku, Render, ou via Docker) et à le connecter à une base de données de production robuste.
Sécurité : Affinez la gestion des rôles et permissions, utilisez les API Tokens pour une authentification plus stricte des applications consommatrices.

10. Conclusion

Vous avez maintenant une solide compréhension de la mise en place et de la configuration de base d'un CMS Headless comme Strapi. Nous avons couvert :

L'installation d'un nouveau projet Strapi.
La navigation dans son interface d'administration intuitive.
La définition de vos modèles de données avec le Content-Type Builder.
La saisie et la gestion de votre contenu.
L'accès à l'API de Strapi et la configuration des permissions.

Strapi vous fournit une base puissante pour gérer tout le contenu de vos applications. La prochaine étape logique de votre parcours sera d'intégrer cette API avec un framework front-end de votre choix (React, Vue, Next.js, etc.) pour créer des expériences utilisateur dynamiques et interactives. La séparation du front-end et du back-end offre une flexibilité sans précédent pour le développement moderne.