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 Vue.js avec ServBay ​

Vue.js est un framework JavaScript progressif et populaire pour la création d’interfaces utilisateur. Son approche flexible, sa prise en main simple et ses performances élevées le rendent particulièrement adapté au développement d’applications monopage (SPA). Grâce à sa prise en charge native de Node.js, ServBay est une solution puissante pour les développeurs web, idéale tant sur macOS que sur Windows pour les projets Vue.js.

Ce guide vous détaille pas à pas comment tirer parti de l’environnement intégré de ServBay pour créer un projet Vue.js depuis zéro et y accéder en mode développement et production.

Qu’est-ce que Vue.js ? ​

Vue.js est un framework JavaScript progressif pour la conception d’interfaces utilisateur. Contrairement à d’autres frameworks volumineux, Vue adopte une approche de développement incrémentale «du bas vers le haut». Son cœur se concentre sur la couche vue, ce qui facilite sa prise en main et son intégration avec des bibliothèques tierces ou des projets existants. Vue 3, la dernière version, apporte de nombreuses nouveautés et améliorations : des performances accrues, une taille de package réduite et une meilleure prise en charge de TypeScript.

Les principaux atouts et nouveautés de Vue 3 ​

  • API de Composition : organisation du code logique via la composition de fonctions, facilitant la maintenance et la réutilisation dans les composants complexes.
  • Performances supérieures : Vue 3 utilise l’objet Proxy pour son système de réactivité et optimise l’algorithme du DOM virtuel, ce qui se traduit par des gains de performance significatifs.
  • Package allégé : grâce au Tree-shaking, la librairie principale de Vue 3 est encore plus légère et se charge plus rapidement.
  • Support amélioré de TypeScript : Vue 3 offre une définition des types plus fiable pour TypeScript, rendant le développement Vue avec TypeScript plus confortable.
  • Lifecycle des composants revu : nouveaux hooks et fonction Setup pour une logique de composants plus claire et mieux structurée.

Avec Vue 3, vous pouvez construire facilement des applications web modernes et réactives, tout en profitant d’une expérience développeur améliorée.

Créer et exécuter un projet Vue.js dans l’environnement intégré ServBay ​

Dans ce tutoriel, nous allons utiliser l’environnement Node.js fourni par ServBay pour mettre en place un projet Vue.js. Nous exploiterons la fonctionnalité Sites de ServBay pour configurer un serveur web local, et utiliser le proxy inverse et la livraison de fichiers statiques pour accéder à notre projet sur la machine.

Prérequis ​

Avant de commencer, assurez-vous d’avoir :

  1. Installé ServBay : L’environnement de développement local ServBay doit être correctement installé sur votre machine.
  2. Installé le package Node.js : Utilisez la gestion de paquets de ServBay pour ajouter Node.js. Pour des instructions détaillées, consultez Installer et utiliser Node.js avec ServBay.

Création du projet Vue.js ​

  1. Initialisation du projet

    Ouvrez votre terminal. ServBay recommande de créer des projets dans le dossier par défaut. Rendez-vous dans ce dossier et lancez l’initialisation du projet Vue.js avec la commande npm create vue@latest. L’option @latest garantit l’utilisation de la dernière version, généralement Vue 3.

    macOS:

    bash
    cd /Applications/ServBay/www
npm create vue@latest

    Windows:

    cmd
    cd C:\ServBay\www
npm create vue@latest

    Suivez les indications du terminal et saisissez le nom du projet (par exemple : servbay-vue-app). Selon vos besoins, sélectionnez TypeScript, Vue Router, Pinia, etc. Exemple de configuration :

    bash
    ✔ Nom du projet : … servbay-vue-app
✔ Ajouter TypeScript ? … Non # Sélectionnez Oui ou Non selon le cas
✔ Ajouter le support JSX ? … Non # Sélectionnez Oui ou Non selon le cas
✔ Ajouter Vue Router pour le développement SPA ? … Oui # Recommandé
✔ Ajouter Pinia pour la gestion d’état ? … Non # Selon besoin
✔ Ajouter Vitest pour les tests unitaires ? … Non # Selon besoin
✔ Ajouter une solution de tests End-to-End ? … Non # Selon besoin
✔ Ajouter ESLint pour la qualité du code ? … Oui # Recommandé
✔ Ajouter Prettier pour le formatage du code ? … Oui # Recommandé
✔ Ajouter l’extension Vue DevTools 7 pour le debug ? (expérimental) … Non # Selon besoin

  2. Installation des dépendances

    Une fois le projet initialisé, accédez au dossier créé servbay-vue-app et exécutez npm install pour installer tous les modules nécessaires.

    bash
    cd servbay-vue-app
npm install

Modifier le contenu d’exemple du projet (optionnel) ​

Pour vérifier que le projet s’exécute correctement, vous pouvez modifier le fichier src/App.vue afin d’afficher simplement « Hello ServBay! ».

Ouvrez le fichier src/App.vue et remplacez son contenu par :

html
<template>
  <div id="app">
    <h1>Hello ServBay!</h1>
    <p>Ceci est une application Vue.js exécutée via ServBay.</p>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

Préparer l’environnement de développement (avec proxy inverse) ​

En mode développement, Vue lance généralement un serveur local (grâce à Vite ou Webpack) offrant notamment le rechargement à chaud (HMR). ServBay permet de mapper un nom de domaine local vers ce serveur grâce à un proxy inverse.

  1. Lancer le serveur de développement

    Depuis la racine du projet, lancez la commande suivante pour démarrer le serveur. L’option --port permet de préciser le port (ex : 8585) — assurez-vous qu’il est disponible.

    bash
    npm run dev -- --port 8585

    Le terminal affiche alors l’URL du serveur, par exemple http://localhost:8585.

  2. Configurer le proxy inverse dans ServBay

    Ouvrez l’interface ServBay et accédez à la section Sites. Ajoutez une nouvelle configuration, en choisissant le type Proxy inverse :

    • Nom : My first Vue dev site (ou tout autre nom distinctif)
    • Domaine : servbay-vue-dev.servbay.demo (ou un autre domaine en .servbay.demo)
    • Type de site : Proxy inverse
    • IP cible du proxy inverse : 127.0.0.1
    • Port cible du proxy inverse : 8585 (identique au port lancé plus tôt)

    Enregistrez : ServBay mettra à jour son serveur web (Caddy ou Nginx), et les requêtes vers servbay-vue-dev.servbay.demo seront redirigées vers http://127.0.0.1:8585.

    Pour des instructions détaillées sur la configuration de sites Node.js dans ServBay, consultez Ajouter un site Node.js en développement dans ServBay.

  3. Accéder au mode développement

    Vérifiez que le serveur web de ServBay fonctionne. Ouvrez votre navigateur à l’adresse : https://servbay-vue-dev.servbay.demo

    ServBay gère automatiquement la configuration d’un certificat SSL pour les domaines locaux (via ServBay User CA ou ServBay Public CA), vous permettant de tester votre site en HTTPS comme en production. Pour plus d’informations sur le SSL, consultez Configurer SSL pour un site ServBay.

    Vous devriez maintenant voir votre app Vue en mode développement, avec la possibilité d’utiliser le hot-reload lors de modifications du code.

Construire la version production et la déployer (service site statique) ​

Lorsque votre projet Vue.js est prêt pour la mise en ligne, vous devez générer une version optimisée (build production), généralement constituée de fichiers statiques (HTML, CSS, JS) déployables facilement avec ServBay.

  1. Générer le build production

    Dans la racine du projet, exécutez :

    bash
    npm run build

    Le build produit un répertoire de fichiers statiques optimisés (par défaut dans le dossier dist).

  2. Configurer le service de fichiers statiques

    Dans ServBay, accédez à Sites et créez une nouvelle configuration, cette fois en sélectionnant Statique :

    • Nom : My first Vue production site (ou tout autre nom)
    • Domaine : servbay-vue-prod.servbay.demo (ou autre en .servbay.demo)
    • Type de site : Statique
    • Chemin racine du site : indiquez le chemin absolu du dossier dist généré:
      • macOS: /Applications/ServBay/www/servbay-vue-app/dist
      • Windows: C:\ServBay\www\servbay-vue-app\dist

    Enregistrez : le serveur web ServBay délivrera désormais directement les fichiers statiques du dossier dist.

  3. Accéder au mode production

    Assurez-vous que le serveur web de ServBay fonctionne. Ouvrez le navigateur à l’adresse : https://servbay-vue-prod.servbay.demo

    Vous accédez à la version optimisée du projet, bénéficiant de performances maximales. Grâce aux domaines personnalisés de ServBay et à la gestion automatique SSL, vous prévisualisez votre site en conditions réelles et sécurisées.

Points d’attention ​

  • Conflit de ports : Si le port 8585 (ou celui choisi) est déjà occupé, la commande npm run dev échouera. Choisissez un autre port libre et adaptez la configuration proxy de ServBay en conséquence.
  • Statut du serveur web ServBay : Vérifiez que le serveur web (Caddy ou Nginx selon votre configuration ServBay) fonctionne, sinon l’accès via le domaine local sera impossible.
  • Résolution DNS : ServBay configure automatiquement la résolution des domaines .servbay.demo vers 127.0.0.1. Si vous optez pour un autre domaine, une modification manuelle du fichier hosts ou l’utilisation de l’outil Hosts Manager de ServBay peut s’avérer nécessaire.

Conclusion ​

ServBay vous permet de mettre en place, sur macOS et Windows, un environnement de développement local complet avec Node.js et Vue.js, et de déployer facilement en mode production. Grâce à la gestion avancée des Sites, configurez des proxies inverses pour accéder à vos serveurs de développement ou servez rapidement la version optimisée de votre application Vue. Profitez de domaines locaux personnalisés et du SSL automatique pour un workflow sécurisé et simplifié — le développement local de Vue.js n’a jamais été aussi facile !