Le CMS HeadLess va permettre de fournir du contenu dynamique au client mobile.
Installation
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).
- Rendez-vous dans le dossier env/local/docker/directus
- Modifiez les variables d'environnement suivantes dans le fichier docker-compose.yml (optionnel pour une installation locale, passez à l'étape 3) :
- dans le conteneur
directus-db
:POSTGRES_PASSWORD
- dans le conteneur
directus
:KEY
SECRET
ADMIN_EMAIL
(identifiant de l'admin sur la page d'administration du CMS)ADMIN_PASSWORD
(mot de passe de l'admin sur la page d'administration du CMS)DB_PASSWORD
(doit correspondre àPOSTGRES_PASSWORD
du conteneurdirectus-db
)
- dans le conteneur
- Lancez Directus :
$ docker compose up --build -d
- 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
etADMIN_PASSWORD
). - S'authentifier une 1ère fois
- Dans Settings > Project Settings, passez le CMS en français (optionnel, mais les explications suivantes se font avec l'interface en français).
MySQL
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
Attention
Import des données d'exemple
Pour importer les collections :
- Dans Réglages > Modèles de données, pour la collection Languages, sélectionnez Voir le contenu.
- Sélectionnez le fichier des langues (languages xxxxx.json) et importez-le.
- Pour chaque collection visible dans le panneau latéral (dans l'onglet Contenu), importez le contenu.
- Saisir les informations demandées dans Contact US et Login (pour plus d'explication consultez la page suivante)
- Créez un dossier dans l'onglet Bibliothèque de fichiers, « important-news-folder ».
- 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
Import des images
Les imports d'images ne sont pas possibles. Le système d'import/export ne gère que les données en base et pas les fichiers. Les références et les identifiants automatiques empêchent l'import d'images. Le plus simple est d'ajouter les images manuellement.
Dans la collection important-news on pourra par exemple ajouter l'image esup-day-37.png fournit dans /data sur la news correspondante/
Permissions
- Si vous êtes sur une installation locale, vous pouvez directement passer à l'étape 6.
- Nous allons ajouter un rôle pour notre application, rendez-vous dans Réglages > Rôles et autorisations.
- 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.
- Donnez les permissions de lecture à toutes les collections (pas les collections système).
- Créez un nouvel utilisateur pour ce rôle (donnez uniquement un nom).
- 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.
- 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 :
- Choisir Importer/exporter depuis le panneau latéral de droite
- Puis le bouton Exporter
- Choisir le format JSON
- 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.
- Enfin cliquer sur le bouton de téléchargement en haut à droite
Cas particulier des dépendances
Les rôles
Les autorisations
Les traductions
Import des images
Les imports d'images ne sont pas possibles. Le système d'import/export ne gère que les données en base et pas les fichiers. Les références et les identifiants automatiques empêchent l'import d'images. Le plus simple est d'ajouter les images manuellement.
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