Lancer le tableau de bord en local
Lancez votre pack sur votre ordinateur avec Docker, puis connectez-vous.
Pour le pack Front + Back
Avant de commencer : installez et ouvrez Docker Desktop, ou Docker Engine sous Linux. Rien d'autre n'est nécessaire.
Voir la configuration requiseTéléchargez votre template
Ouvrez My templates et téléchargez le ZIP Full Stack.
Résultat attendu: Un fichier nommé comme
dashboard-2-full-stack-….zipse trouve dans vos téléchargements.Décompressez et ouvrez le dossier
Extrayez le ZIP et ouvrez un terminal dans le dossier
dashboard-2-full-stack. Sous Windows, extrayez-le dans l'Explorateur de fichiers, puis ouvrez un terminal dans le dossier.Terminalunzip dashboard-2-full-stack-*.zip cd dashboard-2-full-stackRésultat attendu: Le dossier contient
Un problème ?back-end,front-end,docker-compose.yml,README.mdetQUICKSTART.md.Démarrez les applications
Construisez et démarrez l'API et le tableau de bord. Rien n'est à configurer d'abord. Le premier démarrage construit deux images et remplit la base avec les données d'exemple, ce qui prend quelques minutes ; les démarrages suivants prennent quelques secondes.
Terminaldansdashboard-2-full-stackdocker compose up --buildUn port est déjà utilisé ?
Si le démarrage s'arrête avec
Un port est déjà utiliséports are not available ... address already in useouport is already allocated, un autre programme utilise 3030 ou 8000. Arrêtez-le, ou créez un fichier nommé.envdans le dossierdashboard-2-full-stack, à côté dedocker-compose.yml, avec le port voulu, par exempleDASHBOARD_PORT=3040(API_PORTpour l'API). Relancezdocker compose up --buildet ouvrez le tableau de bord sur son nouveau port.Résultat attendu: Les deux services restent en marche et le journal cesse de défiler. Laissez ce terminal ouvert.
Un problème ?Ouvrir le tableau de bord et se connecter
Ouvrez localhost:3030Local. Il vous envoie vers la page de connexion. Connectez-vous avec
admin@example.comet le mot de passeAdmin@123. L'arabe est sur/ar.Résultat attendu: La vue d'ensemble s'ouvre avec les chiffres, les graphiques, le calendrier et vos tâches rapides.
Un problème ?
L'API répond sur localhost:8000/
Comptes de connexion
| Compte | Mot de passe | |
|---|---|---|
| Super Admin : toutes les pages et toutes les actions | admin@example.com | Admin@123 |
| Viewer : voit toutes les listes, ne peut ni créer, ni modifier, ni supprimer d'enregistrements, ni ouvrir l'assistant IA ; peut changer son propre mot de passe et ses tâches rapides | john.smith@admin.com | admin123 |
Le seed ajoute dix autres admins avec le rôle Viewer, tous avec le mot de passe admin123.
Avant la mise en ligne. Chaque seed (yarn seed, yarn seed:prod et le premier démarrage Docker) crée ces admins d'exemple avec ces mots de passe. Changez leurs mots de passe ou supprimez-les, et définissez votre propre JWT_SECRET, avant que le tableau de bord ne soit accessible à quelqu'un d'autre.
Faites le tour
À quoi ressemble le tableau de bord une fois lancé.
Arrêter et redémarrer
Appuyez sur Ctrl+C dans le terminal pour arrêter les applications, ou lancez ceci depuis le dossier. Vos données sont conservées dans le volume dashboard-2-data.
dashboard-2-full-stackdocker compose downRedémarrez avec la même commande qu'à l'étape 3. Sans --build, elle réutilise les images déjà construites.
dashboard-2-full-stackdocker compose upConserver vos données
docker compose down -v supprime aussi le volume de données. Le prochain démarrage crée une copie neuve des données d'exemple, et tout ce que vous aviez créé disparaît.
Lancer le tableau de bord
Ce pack est le tableau de bord seul. Construite sans argument, l'image fonctionne sur la fausse API intégrée, vous n'avez donc besoin d'aucun back-end pour l'essayer.
Téléchargez votre template
Ouvrez Mes templates et téléchargez le ZIP Tableau de bord admin.
Résultat attendu: Un fichier nommé comme
dashboard-2-front-end-….zipse trouve dans vos téléchargements.Décompressez et ouvrez le dossier
Terminalunzip dashboard-2-front-end-*.zip cd dashboard-2-front-endRésultat attendu: Le dossier contient
Un problème ?Dockerfile,package.json,messages,publicetsrc.Construisez l'image
Docker installe les dépendances et construit le tableau de bord dans l'image. Le premier build prend quelques minutes et demande une connexion internet.
Terminaldansdashboard-2-front-enddocker build -t dashboard-2 .Résultat attendu: Le build se termine par une ligne qui nomme l'image
Un problème ?dashboard-2.Démarrez-le et connectez-vous
Démarrez un conteneur, puis ouvrez localhost:3030Local et connectez-vous avec
admin@example.comet le mot de passeAdmin@123. Laissez le terminal ouvert pendant que vous l'utilisez. Si le port3030est pris, changez le numéro à gauche de-p, par exemple-p 3040:3030, et ouvrez localhost:3040Local à la place.Terminaldansdashboard-2-front-enddocker run -p 3030:3030 dashboard-2Résultat attendu: La vue d'ensemble s'ouvre, avec un avis « Sample data » en bas de la page.
Un problème ?
Comptes de connexion
| Compte | Mot de passe | |
|---|---|---|
| Super Admin : toutes les pages et toutes les actions | admin@example.com | Admin@123 |
| Viewer : voit toutes les listes, ne peut ni créer, ni modifier, ni supprimer d'enregistrements, ni ouvrir l'assistant IA ; peut changer son propre mot de passe et ses tâches rapides | john.smith@admin.com | admin123 |
Sur la fausse API, ces comptes et les données d'exemple vivent dans votre navigateur : ce que vous créez, modifiez ou supprimez reste dans ce navigateur uniquement, et effacer les données du site ramène les exemples.
Arrêter et redémarrer
Appuyez sur Ctrl+C dans le terminal pour arrêter le tableau de bord. Si vous avez fermé ce terminal, retrouvez le conteneur et arrêtez-le :
docker ps
docker stop <container-id>Utilisez l'ID que docker ps indique pour dashboard-2. Pour redémarrer, relancez la même commande docker run. Après avoir modifié un fichier, reconstruisez l'image : elle contient une copie du code telle qu'elle était à sa construction.
Le relier à votre API
L'adresse de l'API est compilée dans le JavaScript que le navigateur charge, c'est donc un argument de build. Utilisez l'adresse par laquelle le navigateur joint l'API, avec /api, et la même adresse sans ce suffixe pour les mises à jour des permissions en direct :
dashboard-2-front-enddocker build -t dashboard-2 --build-arg NEXT_PUBLIC_API_BASE_URL=http://localhost:8000/api --build-arg NEXT_PUBLIC_WEBSOCKET_BASE_URL=http://localhost:8000 .
docker run -p 3030:3030 dashboard-2L'API doit autoriser l'adresse du tableau de bord, http://localhost:3030, dans son CORS_ORIGIN. Le tableau de bord est écrit pour l'API NestJS de ce template, fournie avec le pack Full Stack.