ServBay

Français

English
简体中文
繁體中文
Español
العربية
Português
Русский
日本語
Deutsch
Tiếng Việt
Türkçe
Italiano
हिन्दी
Bahasa Indonesia
Bahasa Melayu
Polski
Nederlands
Українська
ไทย
한국어

Français

English
简体中文
繁體中文
Español
العربية
Português
Русский
日本語
Deutsch
Tiếng Việt
Türkçe
Italiano
हिन्दी
Bahasa Indonesia
Bahasa Melayu
Polski
Nederlands
Українська
ไทย
한국어

Appearance

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

Qu'est-ce que Nuxt.js ? ​

Nuxt.js est un framework open source basé sur Vue.js, conçu pour la création d'applications web modernes et performantes. Il simplifie la configuration complexe, permettant aux développeurs de se concentrer sur la logique métier. Nuxt.js excelle dans la création d'applications en rendu côté serveur (SSR), et propose également une génération de sites statiques (SSG) très puissante, ce qui en fait le choix idéal pour concevoir des sites et applications riches en contenu et optimisés pour le SEO.

Principales fonctionnalités et avantages de Nuxt.js ​

  • Rendu côté serveur (SSR) : Prérend les pages Vue sur le serveur, accélérant le chargement initial, améliorant l'expérience utilisateur et facilitant l'indexation du contenu par les moteurs de recherche pour un meilleur référencement.
  • Génération de sites statiques (SSG) : Crée des fichiers HTML statiques lors du build. Cette approche offre d'excellentes performances, une mise en production simple, et élimine la nécessité d'un serveur applicatif. Elle est idéale pour les sites dont le contenu évolue peu, comme les blogs ou la documentation.
  • Fragmentation automatique du code : Nuxt.js segmente automatiquement le code JavaScript par route, ne chargeant que les ressources nécessaires à chaque navigation, ce qui accélère considérablement les performances.
  • Routage basé sur le système de fichiers : Les routes sont générées automatiquement en fonction des fichiers .vue présents dans le dossier pages, simplifiant la gestion du routage.
  • Écosystème modulaire : Bénéficiez d’une vaste gamme de modules pour intégrer facilement des fonctionnalités et des services tiers (comme Axios, support PWA, intégration CMS...).
  • La convention avant la configuration : En respectant une structure de dossiers et des conventions de nommage, Nuxt.js limite les configurations complexes.
  • Expérience développeur optimisée : Profitez du rechargement à chaud, de la détection d’erreurs et bien d’autres outils pour améliorer votre productivité.

Grâce à ces atouts, Nuxt.js rend la création d'applications web complexes, performantes et bien référencées plus rapide et plus efficace.

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

Ce guide vous montre comment utiliser l'environnement local puissant de ServBay, notamment sa distribution Node.js et ses outils de gestion de sites, pour créer, configurer et lancer un projet Nuxt.js. Nous verrons comment configurer le mode développement (avec proxy inversé) et le mode production (avec service de fichiers statiques) dans ServBay.

Prérequis ​

Avant de commencer, assurez-vous que les conditions suivantes sont réunies :

  1. ServBay est installé sur votre machine.
  2. Le paquet Node.js est installé et activé dans ServBay. Vérifiez et installez-le si besoin depuis l’onglet « Paquets » du tableau de bord ServBay.
  3. Connaissance de base de Node.js, npm (ou Yarn/pnpm) et des commandes terminal.
  4. (Recommandé) Un éditeur de code tel que VS Code.

Création d’un projet Nuxt.js ​

Utilisons le CLI create-nuxt-app pour initialiser rapidement un projet Nuxt.js.

  1. Ouvrez un terminal et accédez au répertoire racine de sites ServBay

    Le répertoire racine des sites ServBay est l’endroit idéal pour vos projets web locaux. Ouvrez le terminal et executez :

    macOS :

    bash
    cd /Applications/ServBay/www

    Windows :

    bash
    cd C:\ServBay\www

  2. Initialisez un nouveau projet Nuxt.js

    Lancez la commande npx create-nuxt-app pour créer un nouveau projet nommé servbay-nuxt-app. npx (inclus avec npm 5.2+) permet d'exécuter des packages npm sans installation globale.

    bash
    npx create-nuxt-app servbay-nuxt-app

    Suivez les instructions à l’écran pour configurer votre projet selon vos besoins. Exemple de configuration typique :

    bash
    ? Nom du projet : servbay-nuxt-app
? Langage de programmation : JavaScript
? Gestionnaire de paquets : Npm         # Choisissez Npm ou Yarn
? Framework UI : Aucun                  # Sélectionnez un framework si nécessaire
? Modules Nuxt.js : Axios               # Ajoutez des modules selon les besoins
? Outils de linting : ESLint            # Configurez le linting si souhaité
? Framework de test : Aucun             # Ajoutez des tests si nécessaire
? Mode de rendu : Universel (SSR / SSG) # Universal = SSR et SSG
? Cible de déploiement : Serveur (Node.js hosting) # Parfait pour le dev local
? Outils de développement : jsconfig.json (Recommandé pour VS Code) # Selon vos besoins

  3. Installez les dépendances du projet

    Rendez-vous dans le dossier du projet et installez les dépendances requises avec le gestionnaire choisi :

    bash
    cd servbay-nuxt-app
npm install
# ou Yarn : yarn install
# ou pnpm : pnpm install

    Patientez pendant l'installation.

Modifier le contenu de la page d’accueil ​

Pour vérifier le bon fonctionnement, modifions la page d’accueil afin qu’elle affiche un texte simple.

  1. Ouvrez le fichier pages/index.vue

    Accédez au fichier pages/index.vue dans votre éditeur de code.

  2. Modifiez le contenu du fichier

    Remplacez le contenu par le code suivant pour afficher "Hello ServBay !" sur la page :

    html
    <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>

    L’ajout de l’attribut scoped limite les styles à ce composant, et l’apparence du texte a été légèrement améliorée.

Exécution en mode développement avec ServBay ​

Le serveur de développement Nuxt.js fonctionne sur un port local dédié. Pour accéder à l’application via le nom de domaine personnalisé, SSL et ports 80/443 de ServBay, nous configurons un proxy inversé.

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

    Dans le dossier du projet, lancez ce qui suit pour démarrer le serveur sur le port 8585 (vous pouvez choisir un autre port disponible) :

    macOS :

    bash
    cd /Applications/ServBay/www/servbay-nuxt-app
npm run dev -- --port 8585
# ou yarn : yarn dev --port 8585
# ou pnpm : pnpm run dev --port 8585

    Windows :

    bash
    cd C:\ServBay\www\servbay-nuxt-app
npm run dev -- --port 8585
# ou yarn : yarn dev --port 8585
# ou pnpm : pnpm run dev --port 8585

    Le serveur s’exécute généralement sur http://localhost:8585. Laissez cette fenêtre de terminal ouverte pour maintenir le serveur actif.

  2. Configurer un site ServBay (proxy inversé)

    Ouvrez le tableau de bord ServBay, allez dans l’onglet « Sites » et cliquez sur le bouton + en bas à gauche pour ajouter une nouvelle configuration de site :

    • Nom : Saisissez un nom facile à identifier, par exemple Nuxt.js Dev Site (Proxy).
    • Domaine : Indiquez le domaine souhaité pour l’accès dans le navigateur, exemple : nuxt-dev.servbay.demo. Le suffixe .servbay.demo est recommandé pour les projets ServBay.
    • Type de site web : Sélectionnez Proxy inversé.
    • Adresse IP : 127.0.0.1 (boucle locale).
    • Port : 8585 (celui utilisé par le serveur Nuxt.js).

    Validez avec « Ajouter » ou « Enregistrer ». ServBay prend instantanément en compte la nouvelle configuration.

    Pour un guide complet sur l'ajout d’un site Node.js en développement via proxy inversé dans ServBay, voir Ajouter un site Node.js en développement.

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

    Lancez votre navigateur et accédez au domaine configuré, par exemple https://nuxt-dev.servbay.demo.

    Grâce au proxy inversé ServBay, accédez simplement à votre serveur Nuxt.js via un domaine géré et les ports HTTPS. ServBay génère et installe automatiquement les certificats SSL (signés par ServBay User CA ; veillez à ce que votre système fasse confiance à cette CA), vous permettant de développer en HTTPS pour simuler un environnement production, tester les Service Workers ou toute fonctionnalité nécessitant un contexte sécurisé.

Générer et exécuter la version de production ​

Quand votre projet Nuxt.js est prêt pour la mise en production (ou pour une prévisualisation locale dans les conditions réelles), vous pouvez compiler la version finale. En mode Universal et pour la génération statique, utilisez généralement nuxt generate (ou le script npm run export).

  1. Compiler la version de production et générer les fichiers statiques

    Depuis le dossier racine du projet, exécutez les commandes suivantes. npm run build compile le projet, puis npm run export génère les fichiers HTML statiques dans le dossier dist.

    macOS :

    bash
    cd /Applications/ServBay/www/servbay-nuxt-app
npm run build
npm run export
# ou yarn : yarn build && yarn export
# ou pnpm : pnpm build && pnpm run export

    Windows :

    bash
    cd C:\ServBay\www\servbay-nuxt-app
npm run build
npm run export
# ou yarn : yarn build && yarn export
# ou pnpm : pnpm build && pnpm run export

    À l’issue du build, le dossier dist contiendra tous vos fichiers statiques générés.

  2. Configurer un site ServBay (service de fichiers statiques)

    Ouvrez ServBay, allez dans l’onglet « Sites », puis cliquez sur le bouton + pour ajouter une nouvelle configuration :

    • Nom : Par exemple Nuxt.js Prod Site (Static).
    • Domaine : Choisissez le domaine pour la version production, ex. : nuxt-prod.servbay.demo.
    • Type de site web : Sélectionnez Statique.
    • Racine du site : Indiquez le chemin vers le dossier des fichiers générés :
      • macOS : /Applications/ServBay/www/servbay-nuxt-app/dist
      • Windows : C:\ServBay\www\servbay-nuxt-app\dist

    Cliquez sur « Ajouter » ou « Enregistrer ». ServBay actualise automatiquement la configuration.

  3. Accéder au site en production

    Ouvrez votre navigateur et accédez au domaine configuré, par exemple https://nuxt-prod.servbay.demo.

    Le serveur web haute performance de ServBay (Caddy ou Nginx selon votre configuration) diffusera directement les fichiers statiques du dossier dist. C’est la solution la plus rapide pour servir du contenu statique. Vous bénéficiez également des certificats SSL gratuits et du support des domaines personnalisés via ServBay.

Conclusion ​

ServBay facilite la gestion de l’environnement de développement et de prévisualisation de vos projets Nuxt.js. Exploitez Node.js pour démarrer le serveur de développement, configurez facilement un proxy inversé via ServBay avec nom de domaine personnalisé et HTTPS pour tester et déboguer. Une fois le développement terminé, générez les fichiers statiques et faites prévisualiser la version finale localement en mode hautes performances via ServBay.

Cette méthodologie exploite pleinement les atouts et la simplicité de ServBay pour accélérer le développement local et les tests de projets frontend. Nous espérons que ce guide vous aidera à tirer parti au mieux de ServBay pour vos réalisations Nuxt.js !