Nuxt comme Framework Full-Stack dans NuxSaaS

Ce document explique comment NuxSaaS exploite Nuxt.js en tant que framework full-stack, en détaillant les avantages et les implémentations spécifiques qui en font un choix puissant pour les applications web modernes.

Pourquoi Nuxt.js pour le développement Full-Stack ?

Nuxt.js, traditionnellement connu pour ses capacités à construire des applications Vue.js rendues côté serveur (SSR), a évolué vers un framework full-stack polyvalent. NuxSaaS utilise cette évolution pour créer une expérience de développement cohérente, de l’interface utilisateur frontend à la logique API backend.

Principaux avantages :

• Codebase unifiée : Le code frontend et backend peut coexister dans la même structure de projet, simplifiant les flux de travail de développement et réduisant le changement de contexte.
• Logique côté serveur avec Nitro : Le moteur serveur de Nuxt, Nitro, permet la création de points de terminaison API, de middlewares serveur et d’utilitaires côté serveur directement dans le projet Nuxt. Cela se retrouve dans les dossiers server/api/ et server/middleware/ de NuxSaaS.
• Code isomorphe/universel : Les composables et fonctions utilitaires peuvent souvent être partagés entre le serveur et le client, favorisant la réutilisation du code et la cohérence. Par exemple, la logique de validation ou les fonctions de transformation de données peuvent être définies une seule fois et utilisées des deux côtés.
• Déploiement simplifié : Les applications Nuxt peuvent être déployées sur diverses cibles, y compris des serveurs Node.js, des plateformes serverless (comme Cloudflare Workers, comme le montrent les fichiers wrangler.example.toml et les configurations NUXT_NITRO_PRESET de NuxSaaS), et de l’hébergement statique.
• Écosystème riche et modules : Nuxt dispose d’un écosystème dynamique de modules qui étendent ses fonctionnalités, couvrant des aspects comme l’authentification, l’internationalisation et le SEO, dont beaucoup sont utilisés dans NuxSaaS (par exemple, @nuxtjs/i18n, @nuxtjs/seo, better-auth).

Comment NuxSaaS implémente Nuxt Full-Stack

NuxSaaS démontre une mise en œuvre pratique de Nuxt comme solution full-stack :

1. Points de terminaison API : Le dossier server/api/ contient les routes API backend. Par exemple, les points de terminaison liés à l’authentification (server/api/auth/) et les fonctionnalités spécifiques à l’admin (server/api/admin/) y sont définis. Ceux-ci sont automatiquement enregistrés par Nuxt et accessibles au frontend.

   // Exemple : server/api/auth/user.get.ts
   export default defineEventHandler(async (event) => {
     // ...logique pour obtenir les données utilisateur
   })

2. Middleware serveur : Le dossier server/middleware/ contient les middlewares qui s’exécutent sur le serveur pour chaque requête ou pour des routes spécifiques. Cela sert à des tâches comme la journalisation des requêtes, les vérifications d’authentification ou la modification des en-têtes de requête/réponse.

   // Exemple : server/middleware/0.common.ts
   export default defineEventHandler((event) => {
     // ...logique commune à toutes les requêtes
   })

3. Intégration de la base de données : NuxSaaS s’intègre à une base de données PostgreSQL via Drizzle ORM. Le schéma de la base est défini dans server/database/schema/ et les migrations sont gérées par drizzle-kit (voir les scripts package.json comme db:generate et db:migrate). La logique côté serveur dans les routes API et les utilitaires serveur interagit avec la base de données.

4. Configuration à l’exécution : Les configurations sensibles et les paramètres spécifiques à l’environnement sont gérés via la configuration runtime de Nuxt (nuxt.config.ts et server/utils/runtimeConfig.ts). Cela permet d’avoir différentes configurations pour le développement, la préproduction et la production sans reconstruire l’application.

5. Gestion de l’authentification : La bibliothèque better-auth est intégrée pour l’authentification, avec une logique côté serveur pour la gestion des sessions, les callbacks OAuth et la vérification des utilisateurs (par exemple, server/utils/auth.ts, app/plugins/auth.server.ts).

6. Flexibilité de déploiement : Comme mentionné, NuxSaaS est configuré pour être déployé comme une application Node.js standard ou sur des plateformes serverless comme Cloudflare Workers, démontrant l’adaptabilité de Nuxt. La variable d’environnement NUXT_NITRO_PRESET contrôle ce comportement.

Conclusion

En adoptant Nuxt.js comme framework full-stack, NuxSaaS bénéficie d’un processus de développement rationalisé, de performances accrues grâce au rendu côté serveur et à une logique serveur optimisée, ainsi que de la flexibilité pour se déployer sur divers environnements. Cette approche permet aux développeurs de construire efficacement des applications SaaS modernes et robustes avec une stack technologique cohérente.