#Structure du projet et stack technique

L'essentiel du développement quotidien peut être laissé à l'IA. Connaître la structure du modèle vous permet toutefois de vérifier si l'IA a placé son code au bon endroit, et facilite la localisation des problèmes.

#Stack technique

Le modèle de Portal est basé sur @nocobase/portal-template-default, dont le code source se trouve sur nocobase/portal-template-default.

Cette combinaison est la stack front-end que l'IA maîtrise le mieux aujourd'hui, ce qui rend son code plus juste.

Le Portal est pour l'instant un projet purement front-end, la logique métier passant par l'API de NocoBase, les composants standard, etc. La possibilité de faire écrire du code back-end de Portal à l'AI Agent arrive prochainement.

#Structure des répertoires

src/
├── app/            Routage et chargement des extensions
├── pages/          Connexion, inscription, mot de passe oublié, etc.
├── components/     Composants
│   ├── ui/         Base de composants shadcn/ui
│   ├── app-shell/  Mise en page, navigation, états de chargement
│   ├── auth/       Composants d'authentification
│   └── ...
├── extensions/     Extensions, actives une fois installées
├── lib/            Wrapper du client NocoBase et logique ACL
├── providers/      Providers Refine
├── hooks/          Hooks personnalisés
└── locales/        Textes localisés

Quelques emplacements clés :

• src/app/routes.tsx — structure des routes. Les routes authentifiées et non authentifiées sont séparées, et les routes apportées par les extensions sont montées automatiquement
• src/app/extensions.tsx — chargement des extensions, via import.meta.glob qui parcourt src/extensions/*/extension.tsx
• src/providers/data.ts — le data provider de Refine, qui traduit la syntaxe de requête de Refine en paramètres d'API NocoBase
• src/lib/nocobase/client.ts — NocoBaseClient, le wrapper bas niveau derrière chaque requête
• src/components/ui/ — une soixantaine de composants shadcn/ui, prêts à l'emploi

Les pages métier vont généralement sous src/extensions/, un répertoire par module fonctionnel. Voir Composants standard et extensions.

#Fichiers clés

#Variables d'environnement

nb portal dev et nb portal deploy les écrivent pour vous, vous n'avez donc généralement pas à y toucher. Les trois dernières n'ont besoin d'être alignées que si le serveur a personnalisé le stockage des tokens d'authentification.

Pendant le développement, si NOCOBASE_API_URL est une adresse absolue, Vite met en place un proxy pour relayer les requêtes, ce qui vous évite d'avoir à gérer le CORS vous-même.

#Commandes courantes

Voici celles que vous utiliserez au quotidien. L'installation des dépendances, l'actualisation des variables d'environnement et les builds sont pris en charge par la CLI en arrière-plan :

Pour les paramètres complets de chaque commande, consultez la Référence des commandes nb portal.

#Où se trouve l'espace de travail de développement

L'espace de travail de développement d'un Portal est créé dans le répertoire où vous vous trouviez au moment d'exécuter nb portal create ou nb portal pull :

./<portal>

Vous pouvez indiquer un autre emplacement avec --path au moment de la création ou de la récupération. Les artefacts de déploiement construits vont ailleurs — sous le storage de l'application cible, maintenus en synchronisation par nb portal deploy, et dont vous n'avez normalement pas à vous occuper.

Si vous ne savez plus où se trouve l'espace de travail de développement d'un Portal, il suffit de le consulter :

nb portal info main

#Liens connexes

• Démarrage rapide de l'AI Portal — mettre en route votre premier point d'entrée front-end écrit par l'IA
• Composants standard et extensions — la base de composants shadcn/ui et le mécanisme d'extension
• Déploiement et gestion des sources — le processus de build et de déploiement, et le source storage
• Construire avec un AI Agent — piloter l'IA en langage naturel pour écrire les pages
• nb portal info — vérifier où se trouve l'espace de travail de développement d'un Portal