Créer et exécuter un projet Nuxt.js avec ServBay

Qu’est-ce que Nuxt.js ?

Nuxt.js est un framework open source construit sur le populaire Vue.js, spécialement conçu pour créer des applications web modernes et performantes. Il simplifie de nombreuses configurations complexes afin que les développeurs puissent se concentrer sur la logique métier. Nuxt.js excelle particulièrement dans la création d'applications avec rendu côté serveur (SSR), tout en proposant de puissantes fonctionnalités de génération de sites statiques (SSG). Cela en fait un choix idéal pour concevoir des sites web et des applications riches en contenu, bien optimisés pour le SEO.

Principales caractéristiques et avantages de Nuxt.js

• Rendu côté serveur (SSR) : Prérend les pages Vue sur le serveur, accélère le temps de chargement initial, améliore l’expérience utilisateur et optimise l’indexation par les moteurs de recherche, favorisant ainsi le référencement.
• Génération de sites statiques (SSG) : Génère au moment de la construction des fichiers HTML purement statiques. Cette méthode offre des performances exceptionnelles, une mise en ligne simplifiée et ne nécessite aucun serveur à l’exécution — parfait pour les sites à contenu peu changeant comme les blogs ou la documentation.
• Découpage automatique du code : Nuxt.js divise automatiquement le JavaScript par route, chargeant uniquement ce dont la page a besoin. À la clé : une optimisation notable des performances.
• Routage basé sur le système de fichiers : La création de fichiers .vue dans le dossier pages génère automatiquement la configuration des routes, rendant la gestion du routage beaucoup plus simple.
• Modularité : Un écosystème riche de modules pour intégrer facilement diverses fonctionnalités et services tiers (comme Axios, le support PWA ou l’intégration CMS).
• Convention over Configuration : En suivant des structures de dossiers et des conventions de nommage prédéfinies, Nuxt.js réduit la charge de configurations chronophages.
• Expérience développeur optimisée : Support du hot reloading (HMR), rapport d’erreurs détaillé, et autres outils pour accroître la productivité.

Grâce à ces atouts, Nuxt.js rend la création d’applications web complexes, performantes et adaptées au référencement plus simple et efficace.

Configurer et exécuter un projet Nuxt.js dans ServBay

Dans ce guide, découvrez comment tirer parti de l’environnement local puissant de ServBay, en particulier de son package Node.js et de la gestion de sites web, pour créer, configurer et lancer un projet Nuxt.js. Nous détaillerons la configuration du mode développement (avec proxy inversé) et du mode production (avec service de fichiers statiques) dans ServBay.

Prérequis

Avant de commencer, assurez-vous de remplir les conditions suivantes :

1. ServBay est installé sur votre ordinateur.
2. Le package Node.js est installé et activé dans ServBay. Vérifiez et installez-le via l’onglet « Packages » du panneau de contrôle ServBay.
3. Vous connaissez les bases de Node.js, npm (ou Yarn/pnpm) et des commandes terminal.
4. (Recommandé) Un éditeur de code comme VS Code est installé.

Créer un projet Nuxt.js

Nous allons utiliser l’outil create-nuxt-app pour initialiser rapidement un nouveau projet Nuxt.js.

1. Ouvrir le terminal et accéder au répertoire racine des sites ServBay

   Le répertoire par défaut des sites ServBay est /Applications/ServBay/www. C’est l’emplacement recommandé pour vos projets de développement locaux. Lancez le terminal et exécutez :

   cd /Applications/ServBay/www

2. Initialiser un nouveau projet Nuxt.js

   Lancez la commande npx create-nuxt-app pour démarrer un projet nommé servbay-nuxt-app. npx, inclus à partir de npm 5.2+, permet de lancer des paquets sans installation globale.

   npx create-nuxt-app servbay-nuxt-app

   Suivez les instructions du terminal pour configurer votre projet selon vos besoins. Exemple de configuration proposée :

   ? Project name : servbay-nuxt-app
   ? Programming language : JavaScript
   ? Package manager : Npm         # Choisissez votre gestionnaire de paquets, Npm ou Yarn recommandé
   ? UI framework : None          # Choisissez un framework UI si besoin
   ? Nuxt.js modules : Axios      # Modules Nuxt.js optionnels
   ? Linting tools : ESLint       # Outils de linting si nécessaire
   ? Testing framework : None     # Choisissez un framework de test éventuellement
   ? Rendering mode : Universal (SSR / SSG) # Mode de rendu, Universal active SSR et SSG
   ? Deployment target : Server (Node.js hosting) # Cible de déploiement, Server est adapté pour le développement local et Node.js
   ? Development tools : jsconfig.json (Recommended for VS Code) # Outils de dev en option

3. Installer les dépendances du projet

   Rendez-vous dans le dossier du projet et installez les dépendances choisies avec votre gestionnaire favori :

   cd servbay-nuxt-app
   npm install
   # Ou avec Yarn : yarn install
   # Ou avec pnpm : pnpm install

   Patientez pendant l'installation des modules.

Modifier le contenu affiché par le projet

Pour valider notre configuration, nous allons modifier la page d’accueil afin d’y afficher un message simple.

1. Ouvrir le fichier pages/index.vue

   Dans votre éditeur de code, éditez le fichier pages/index.vue du dossier projet.

2. Modifier le contenu du fichier

   Remplacez le contenu du fichier par ce qui suit pour afficher "Hello ServBay!" :

   <template>
     <div>
       <h1>Hello ServBay!</h1>
     </div>
   </template>
   
   <script>
   export default {
     name: 'IndexPage'
   }
   </script>
   
   <style scoped>
   div {
     text-align: center;
     margin-top: 50px;
     font-family: sans-serif;
   }
   h1 {
     color: #333;
   }
   </style>

   Nous avons ajouté, ici, l'attribut scoped à la balise style pour limiter les styles à ce composant et améliorer légèrement l'apparence de la page.

Exécuter Nuxt.js en mode développement avec ServBay

Le serveur de développement Nuxt.js tourne généralement sur un port local spécifique. Pour accéder à ce serveur à travers des domaines personnalisés, des certificats SSL et les ports standard 80/443, nous allons configurer un proxy inversé à l’aide de ServBay.

1. Démarrer le serveur de développement Nuxt.js

   Depuis la racine du projet, lancez le serveur de développement sur le port 8585 (ou un autre port libre) :

   cd /Applications/ServBay/www/servbay-nuxt-app
   npm run dev -- --port 8585
   # Ou avec Yarn : yarn dev --port 8585
   # Ou avec pnpm : pnpm run dev --port 8585

   Une fois le serveur démarré, il affiche généralement l'URL http://localhost:8585. Gardez ce terminal ouvert pour maintenir le serveur actif.

2. Configurer un site ServBay (proxy inversé)

   Ouvrez le panneau de contrôle ServBay et accédez à l’onglet « Sites web ». Cliquez sur le bouton + en bas à gauche pour ajouter une nouvelle configuration de site :

   • Nom : Un nom facile à reconnaître, par exemple Nuxt.js Dev Site (Proxy).
   • Domaine : Le domaine personnalisé que vous souhaitez utiliser, par exemple nuxt-dev.servbay.demo. L’usage du suffixe .servbay.demo est une bonne pratique pour les projets ServBay.
   • Type de site web : Sélectionnez Proxy inversé (Reverse Proxy).
   • Adresse IP : Entrez 127.0.0.1 (adresse de loopback locale).
   • Port : Indiquez le port où tourne Nuxt.js, ici 8585.

   Validez la configuration en cliquant sur « Ajouter » ou « Enregistrer ». ServBay applique immédiatement la nouvelle configuration.

   Pour des instructions détaillées sur l'ajout de sites Node.js pour le développement (via proxy), reportez-vous à Ajouter un site Node.js en développement.

3. Accéder au site en mode développement

   Ouvrez votre navigateur et rendez-vous sur le domaine défini, par exemple https://nuxt-dev.servbay.demo.

   Grâce au proxy inversé ServBay, accédez à votre serveur Nuxt.js de développement via un domaine et un port HTTPS géré par ServBay. ServBay génère et configure automatiquement le certificat SSL (signé par le CA utilisateur ServBay ; assurez-vous que cette autorité de certification soit approuvée par votre système). Cela simplifie le développement sous HTTPS, notamment pour simuler l’environnement de production, tester les Service Workers ou les fonctions nécessitant un contexte sécurisé.

Construire et exécuter la version de production

Quand votre projet Nuxt.js est prêt pour le déploiement (ou pour une prévisualisation en local proche de la production), vous pouvez générer une version optimisée. Pour les projets en mode Universal désirant publier un site statique, on utilise généralement la commande nuxt generate (ou le script npm run export).

1. Construire le projet et générer les fichiers statiques

   Depuis la racine du projet, exécutez :

   cd /Applications/ServBay/www/servbay-nuxt-app
   npm run build
   npm run export
   # Ou avec Yarn : yarn build && yarn export
   # Ou avec pnpm : pnpm build && pnpm run export

   Les fichiers statiques générés se retrouvent ensuite dans le dossier dist du projet.

2. Configurer un site ServBay (serveur statique)

   Dans le panneau ServBay, onglet « Sites web », ajoutez une nouvelle configuration via le bouton + :

   • Nom : Choisissez, par exemple, Nuxt.js Prod Site (Static).
   • Domaine : Le domaine destiné à la version production, par exemple nuxt-prod.servbay.demo.
   • Type de site web : Sélectionnez Statique (Static).
   • Racine du site web : Chemin du dossier des fichiers statiques de Nuxt.js, soit /Applications/ServBay/www/servbay-nuxt-app/dist.

   Enregistrez vos modifications. ServBay applique automatiquement la configuration.

3. Accéder au site en mode production

   Rendez-vous sur le domaine que vous venez de configurer, par exemple https://nuxt-prod.servbay.demo.

   Le serveur web haute performance de ServBay (Caddy ou Nginx selon votre réglage) servira directement les fichiers du dossier dist. C’est la solution la plus efficace pour publier du contenu statique, garantissant des temps de réponse ultra rapides. Là encore, ServBay prend en charge certificat SSL gratuit et gestion des domaines personnalisés.

Conclusion

Grâce à ServBay, la gestion de projets Nuxt.js en local, du développement jusqu’à la prépublication, devient simple et efficace. Utilisez le package Node.js ServBay pour le serveur de développement, puis configurez le proxy inversé pour bénéficier du HTTPS et de domaines personnalisés lors du debug. Une fois le développement terminé, générez les fichiers statiques puis configurez le type de site statique ServBay pour un aperçu local performant. Ce flux de travail exploite toutes les capacités de ServBay pour simplifier le développement et les tests frontend en local. Nous espérons que ce guide vous aidera à tirer le meilleur de ServBay pour vos projets Nuxt.js !