Créer et exécuter un projet Vue.js sur macOS avec ServBay

Vue.js est un framework JavaScript progressif populaire pour la construction d’interfaces utilisateur. Facile à prendre en main, flexible et performant, il est particulièrement adapté pour développer des applications monopage (SPA). ServBay, un puissant environnement local de développement web, fournit un support Node.js intégré, ce qui en fait la plateforme idéale pour développer avec Vue.js sur macOS.

Ce guide vous explique étape par étape comment profiter de l’environnement intégré de ServBay pour créer un projet Vue.js depuis zéro et y accéder, en modes développement et production.

Qu’est-ce que Vue.js ?

Vue.js est un framework JavaScript progressif destiné à la construction d’interfaces utilisateur. Contrairement à d’autres frameworks complets, Vue adopte une conception incrémentale de bas en haut. La bibliothèque principale de Vue se concentre uniquement sur la couche vue, ce qui facilite sa prise en main et permet une intégration aisée avec des bibliothèques tierces ou des projets existants. Vue 3 est la dernière version de Vue.js, apportant de nombreuses fonctionnalités et améliorations, parmi lesquelles des performances accrues, un bundle plus léger et un meilleur support TypeScript.

Principales fonctionnalités et avantages de Vue 3

• Composition API : Organisation du code logique basée sur la composition de fonctions, rendant le code des composants complexes plus maintenable et réutilisable.
• Performances améliorées : Vue 3 utilise les objets Proxy pour son système de réactivité et optimise l’algorithme du DOM virtuel pour des performances accrues.
• Bundle encore plus léger : Grâce au tree-shaking, le cœur de Vue 3 est encore plus petit et se charge plus vite.
• Meilleur support TypeScript : Vue 3 propose des définitions de types TypeScript poussées pour une expérience de développement optimisée en TypeScript.
• Cycle de vie des composants revu : De nouveaux hooks et la fonction setup rendent la logique des composants plus claire et facile à gérer.

Utiliser Vue 3 permet aux développeurs de construire plus efficacement des applications web modernes et réactives.

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

Dans cet article, nous allons utiliser l’environnement Node.js fourni par ServBay pour créer et lancer un projet Vue.js. Nous exploiterons la fonctionnalité Sites de ServBay afin de configurer le serveur web, et accéder localement au projet grâce au proxy inverse et au service de fichiers statiques.

Prérequis

Avant de commencer, assurez-vous d’avoir réalisé les étapes suivantes :

1. Installation de ServBay : ServBay est correctement installé sur votre macOS.
2. Installation du package Node.js : Vous avez installé les packages Node.js via le gestionnaire de ServBay. Pour plus de détails, consultez Installer et utiliser Node.js dans ServBay.

Création d’un projet Vue.js

1. Initialiser le projet

   Ouvrez votre application Terminal. Il est recommandé de stocker vos projets web dans le dossier /Applications/ServBay/www. Naviguez dans ce dossier et utilisez la commande npm create vue@latest pour initialiser un projet Vue.js tout neuf. Le suffixe @latest garantit l’utilisation des dernières versions du CLI Vue ou de l’outil create-vue (généralement Vue 3).

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

   Suivez les instructions dans le terminal pour donner un nom au projet (par exemple servbay-vue-app) et sélectionnez les options selon vos besoins, telles que TypeScript, Vue Router, Pinia, etc. Exemple de configuration :

   ✔ Project name: … servbay-vue-app
   ✔ Add TypeScript? … No # Oui ou Non selon le besoin
   ✔ Add JSX Support? … No # Oui ou Non selon le besoin
   ✔ Add Vue Router for Single Page Application development? … Yes # Recommandé : Oui
   ✔ Add Pinia for state management? … No # Oui ou Non selon le besoin
   ✔ Add Vitest for Unit testing? … No # Oui ou Non selon le besoin
   ✔ Add an End-to-End Testing Solution? … No # Oui ou Non selon le besoin
   ✔ Add ESLint for code quality? … Yes # Recommandé : Oui
   ✔ Add Prettier for code formatting? … Yes # Recommandé : Oui
   ✔ Add Vue DevTools 7 extension for debugging? (experimental) … No # Oui ou Non selon le besoin

2. Installer les dépendances

   Après l’initialisation du projet, rendez-vous dans le dossier nouvellement créé servbay-vue-app et exécutez npm install pour installer toutes les dépendances du projet.

   cd servbay-vue-app
   npm install

Modifier le contenu d’exemple du projet (optionnel)

Pour vérifier le bon fonctionnement du projet, vous pouvez modifier le fichier src/App.vue et remplacer le contenu par un simple affichage "Hello ServBay!".

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

<template>
  <div id="app">
    <h1>Hello ServBay!</h1>
    <p>Ceci est une application Vue.js qui tourne 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>

Configurer l’environnement de développement (avec proxy inverse)

En mode développement, un projet Vue lance habituellement un serveur local (basé sur Vite ou Webpack) avec rechargement automatique des modules (HMR), idéal pour le développement. ServBay peut mapper un nom de domaine localisé vers l’adresse et le port de ce serveur via une configuration de proxy inverse.

1. Démarrer le serveur de développement

   Dans la racine de votre projet, lancez la commande suivante pour démarrer le serveur ; utilisez l’option --port (ex : 8585) pour choisir un port libre.

   npm run dev -- --port 8585

   Le terminal indiquera que le serveur écoute sur http://localhost:8585 ou le port choisi.

2. Configurer un site proxy inverse dans ServBay

   Ouvrez l’interface de ServBay et rendez-vous dans les paramètres Sites. Ajoutez un nouveau site et choisissez le type Proxy inverse :

   • Nom : My first Vue dev site (ou un nom reconnaissable)
   • Domaine : servbay-vue-dev.servbay.demo (ou un autre domaine en .servbay.demo à votre convenance)
   • Type de site : Proxy inverse
   • IP cible proxy inverse : 127.0.0.1
   • Port cible proxy inverse : 8585 (doit correspondre au port du serveur de développement)

   Après avoir enregistré la configuration, ServBay met automatiquement à jour le serveur web (Caddy ou Nginx) pour que les requêtes sur servbay-vue-dev.servbay.demo soient transmises à http://127.0.0.1:8585.

   Pour des explications détaillées sur la création d’un site Node.js de développement dans ServBay, consultez Ajouter un site Node.js de développement dans ServBay.

3. Accéder au mode développement

   Assurez-vous que le serveur web de ServBay fonctionne. Dans votre navigateur, accédez au domaine configuré : https://servbay-vue-dev.servbay.demo.

   ServBay propose la configuration automatique de certificats SSL pour les domaines locaux (via ServBay User CA ou ServBay Public CA), ce qui vous permet d’accéder à votre site local en toute sécurité via HTTPS, rapprochant l’expérience du contexte production. Pour plus d’infos sur le SSL, consultez Configurer un certificat SSL pour un site dans ServBay.

   Vous devriez à présent voir votre application Vue en mode développement dans le navigateur et profiter du rechargement automatique lors de modifications du code.

Générer la version production et la déployer (service site statique)

Une fois le développement de votre projet Vue.js terminé, il est temps de générer la version optimisée pour la production. Cette version se compose généralement de fichiers statiques (HTML, CSS, JavaScript, etc.) pouvant être servis simplement via ServBay.

1. Générer la version production

   Depuis le dossier racine du projet, lancez la commande suivante :

   npm run build

   Cette commande crée une collection de fichiers statiques optimisés, rangés par défaut dans le dossier dist à la racine du projet.

2. Configurer le service de fichiers statiques

   Dans l’interface de ServBay, allez dans les paramètres Sites et ajoutez une nouvelle configuration de type Statique :

   • Nom : My first Vue production site (ou un autre nom)
   • Domaine : servbay-vue-prod.servbay.demo (ou un autre domaine en .servbay.demo)
   • Type de site : Statique
   • Racine du site : /Applications/ServBay/www/servbay-vue-app/dist (chemin absolu vers le dossier dist généré)

   Après sauvegarde, ServBay configurera son serveur web pour servir directement les fichiers statiques de ce dossier.

3. Accéder à la version production

   Vérifiez que le serveur web ServBay est actif. Dans votre navigateur, accédez au domaine attribué : https://servbay-vue-prod.servbay.demo.

   Vous voyez maintenant la version de production optimisée de votre projet Vue, prête pour une expérience utilisateur rapide et performante. Grâce aux domaines personnalisés et au SSL automatique de ServBay, vous pouvez prévisualiser en toute sécurité votre site de production localement.

Points d’attention

• Conflit de ports : Si le port 8585 (ou un autre choisi) pour npm run dev est déjà utilisé, une erreur surviendra. Choisissez alors un port disponible et ajustez également la configuration du proxy inverse dans ServBay.
• État du serveur web ServBay : Assurez-vous que le serveur web (Caddy ou Nginx selon votre configuration) de ServBay fonctionne, sans quoi l’accès par le domaine ne sera pas possible.
• Résolution de domaine : ServBay configurer automatiquement la résolution du domaine .servbay.demo ajouté dans Sites vers 127.0.0.1. Si vous utilisez un autre domaine, pensez à modifier votre fichier hosts ou à utiliser le gestionnaire de hosts de ServBay pour garantir une résolution locale correcte.

Conclusion

Grâce à ServBay, vous pouvez facilement mettre en place un environnement de développement local Node.js sous macOS, et gérer au quotidien le cycle de vie de vos projets Vue.js, du développement à la mise en production. Les fonctionnalités Sites de ServBay permettent de configurer en quelques clics des proxys inverses pour accéder à votre serveur de développement, ou de servir directement les fichiers statiques de production, tout en bénéficiant de domaines personnalisés et du SSL automatique pour la sécurité. De quoi grandement simplifier la configuration et le workflow autour des projets Vue.js locaux.