Le CMS HeadLess va permettre de fournir du contenu dynamique au client mobile.

Installation

PostgreSQL ou MySQL

Le CMS se lance avec Docker. Par défaut, la configuration proposée utilise PostgreSQL, mais il est aussi possible d'utiliser MySQL (voir la section MySQL ci-dessous).

1. Rendez-vous dans le dossier env/local/docker/directus 
2. Modifiez les variables d'environnement suivantes dans le fichier docker-compose.yml (optionnel pour une installation locale, passez à l'étape 3) :
   1. dans le conteneur directus-db  :
      1. POSTGRES_PASSWORD 
   2. dans le conteneur directus  :
      1. KEY 
      2. SECRET 
      3. ADMIN_EMAIL  (identifiant de l'admin sur la page d'administration du CMS)
      4. ADMIN_PASSWORD  (mot de passe de l'admin sur la page d'administration du CMS)
      5. DB_PASSWORD  (doit correspondre à POSTGRES_PASSWORD du conteneur directus-db)
3. Lancez Directus :

   $ docker compose up --build -d

4. Le CMS sera accessible sur http://localhost:8055 (à moins que vous ayez modifié la configuration), connectez-vous avec les identifiants renseignés plus tôt (ADMIN_EMAIL et ADMIN_PASSWORD).
5. S'authentifier une 1ère fois
6. Dans Settings > Project Settings, passez le CMS en français (optionnel, mais les explications suivantes se font avec l'interface en français).

Pour utiliser MySQL, remplacer dans le fichier docker-compose.yml, la config de directus-db  :

  directus-db:
-    image: postgis/postgis:14-master
+    image: mysql:8.0
    ports:
-      - "5432:5432"
+      - "3306:3306"
    # Uncomment to persist data on your local storage
    # volumes:
-    #   - './postgres-data:/var/lib/postgresql/data'
+    #   - './mysql-data:/var/lib/mysql'
    networks:
      - directus
+    command: mysqld --default-authentication-plugin=mysql_native_password
    environment:
-      POSTGRES_USER: 'directus'
-      POSTGRES_PASSWORD: 'directus'
-      POSTGRES_DB: 'directus'
+      MYSQL_USER: 'directus'
+      MYSQL_PASSWORD: 'directus'
+      MYSQL_DATABASE: 'directus'
+      MYSQL_ROOT_PASSWORD: 'directus'

Et dans l'environnement du conteneur directus  :

-      DB_CLIENT: 'pg'
+      DB_CLIENT: 'mysql'
      DB_HOST: 'directus-db'
-      DB_PORT: '5432'
+      DB_PORT: '3306'
      DB_DATABASE: 'directus'
      DB_USER: 'directus'
      DB_PASSWORD: 'directus'

Import de la structure de données

Pour importer la structure des données :

$ docker compose exec directus npx directus schema apply --yes ./snapshot/snapshot.yaml

Import des données d'exemple

Pour importer les collections :

1. Dans Réglages > Modèles de données, pour la collection Languages, sélectionnez Voir le contenu.
2. Sélectionnez le fichier des langues (languages xxxxx.json) et importez-le.
3. Pour chaque collection visible dans le panneau latéral (dans l'onglet Contenu), importez le contenu.
4. Saisir les informations demandées dans Contact US et Login (pour plus d'explication consultez la page suivante) 
5. Créez un dossier dans l'onglet Bibliothèque de fichiers, « important-news-folder ».
   
6. Dans Réglages > Modèles de données > important-news > image > Interface, sélectionnez le dossier de destination que l'on vient de créer.

Import des images

Dans la collection important-news on pourra par exemple ajouter l'image esup-day-37.png fournit dans /data sur la news correspondante/

Permissions

1. Si vous êtes sur une installation locale, vous pouvez directement passer à l'étape 6.
2. Nous allons ajouter un rôle pour notre application, rendez-vous dans Réglages > Rôles et autorisations.
3. Créer un nouveau rôle intitulé "Application" par exemple. Le champ "Accès à l'application" indique si les utilisateurs avec ce rôle pourront accéder à l'interface du CMS ou non. Ici, on peut décocher les deux options.
   
4. Donnez les permissions de lecture à toutes les collections (pas les collections système).
   
5. Créez un nouvel utilisateur pour ce rôle (donnez uniquement un nom).
6. Générez un token pour l'utilisateur que l'on vient de créer (en local : le compte admin). Gardez-le, vous en aurez besoin pour la configuration du backend.
7. Rendez visible le dossier des images d'important-news (créé préalablement) au rôle Public comme indiqué sur les captures d'écran ci-dessous :
   

Les collections

Les languages

Les features

Les widgets

Les important-news

Les social-network

Les channels

Les pages

Le contact us

Le login

Pour aller plus loin

Organisation des colonnes

Après l'import l'affichage des collections dans directus n'est pas très heureux. Il est possible de réorganiser les colonnes à sa guise grace au "+", au cliquer-déplacer et au clique-droit > supprimer.

Conseil UL : ôter les descriptions, ajouter les positions, autorisations, les titres traduits

Export des données

Pour exporter les données, depuis chaque collection :

1. Choisir Importer/exporter depuis le panneau latéral de droite
2. Puis le bouton Exporter
3. Choisir le format JSON
4. Ajouter l'ensemble des attributs. Attention ! par défaut l'export ne propose que les attributs affichés en colonne il faut donc bien ajouter tous les attributs ainsi que leur dépendances. Inutile d'exporter les ID.
5. Enfin cliquer sur le bouton de téléchargement en haut à droite

Cas particulier des dépendances

Les rôles

Les autorisations

Les traductions

Export de la structure de données

Pour exporter la structure : depuis l’intérieur du conteneur Docker directus, exécuter :

$ docker compose exec directus npx directus schema snapshot --yes ./snapshot/snapshot.yaml