Creare ed Eseguire un Progetto Vue.js su macOS con ServBay

Vue.js è un popolare framework JavaScript progressivo per la creazione di interfacce utente. È semplice da apprendere, flessibile e ad alte prestazioni—particolarmente adatto per lo sviluppo di Single Page Application (SPA). ServBay, potente ambiente locale di sviluppo Web, offre un supporto integrato a Node.js, rendendolo la piattaforma ideale per sviluppare progetti Vue.js su macOS.

In questa guida vedremo nel dettaglio come utilizzare l’ambiente integrato ServBay per creare un nuovo progetto Vue.js da zero e accedervi tramite ServBay sia in modalità di sviluppo, sia in modalità produzione.

Cos’è Vue.js?

Vue.js è un framework JavaScript progressivo pensato per la costruzione di interfacce utente. A differenza di altri grandi framework, Vue adotta un design incrementale dal basso verso l'alto. Il core di Vue si concentra esclusivamente sul layer di visualizzazione, è facile da apprendere e da integrare con altre librerie o progetti esistenti. Vue 3 è l’ultima versione del framework: offre numerose nuove funzionalità e miglioramenti, incluse prestazioni più elevate, dimensioni dei bundle ridotte e un supporto TypeScript migliorato.

Principali Vantaggi e Caratteristiche di Vue 3

• Composition API: Organizza la logica dei componenti attraverso funzioni componibili, rendendo il codice di grandi componenti più facilmente gestibile e riutilizzabile.
• Prestazioni Ottimizzate: Vue 3 utilizza oggetti Proxy per il sistema reattivo e ottimizza l’algoritmo Virtual DOM, con significativi miglioramenti di performance.
• Dimensioni Bundle Ridotte: Grazie al tree-shaking, il core di Vue 3 è più leggero e l’avvio delle app è più rapido.
• Miglior Supporto TypeScript: Vue 3 mette a disposizione tipizzazioni TypeScript robuste per un’esperienza di sviluppo ancora migliore.
• Ciclo di Vita dei Componenti Migliorato: Nuovi hook e la funzione setup rendono la logica dei componenti più chiara e gestibile.

Utilizzare Vue 3 aiuta gli sviluppatori a costruire web app moderne e reattive in modo efficiente.

Creare ed Eseguire un Progetto Vue.js con ServBay

In questo articolo useremo l’ambiente Node.js integrato in ServBay per creare ed eseguire un progetto Vue.js. Sfrutteremo la funzione Sito Web di ServBay per configurare il web server, implementando reverse proxy e la gestione di file statici per accedere al progetto localmente.

Prerequisiti

Prima di iniziare, assicurati di aver completato questi passaggi:

1. Installazione di ServBay: Hai già installato con successo ServBay come ambiente di sviluppo locale su macOS.
2. Installazione del pacchetto Node.js: Tramite la gestione dei pacchetti di ServBay, hai installato Node.js. Per i dettagli vedi Installare e usare Node.js in ServBay.

Creare un Progetto Vue.js

1. Inizializza il progetto

   Apri il terminale. ServBay consiglia di salvare i progetti web nella cartella /Applications/ServBay/www. Entra in questa directory e usa il comando npm create vue@latest per inizializzare un nuovo progetto Vue.js. L’opzione @latest garantisce l’uso della versione più aggiornata di Vue CLI o create-vue, e normalmente viene creato un progetto Vue 3.

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

   Segui le richieste a schermo per inserire il nome del progetto (consigliato: servbay-vue-app) e scegli in base alle tue esigenze se aggiungere TypeScript, Vue Router, Pinia e altro. Ecco un esempio di configurazione:

   ✔ Project name: … servbay-vue-app
   ✔ Add TypeScript? … No # Scegli Sì o No in base alle necessità
   ✔ Add JSX Support? … No # Scegli Sì o No in base alle necessità
   ✔ Add Vue Router for Single Page Application development? … Yes # Consigliato Sì
   ✔ Add Pinia for state management? … No # Scegli Sì o No in base alle necessità
   ✔ Add Vitest for Unit testing? … No # Scegli Sì o No in base alle necessità
   ✔ Add an End-to-End Testing Solution? … No # Scegli Sì o No in base alle necessità
   ✔ Add ESLint for code quality? … Yes # Consigliato Sì
   ✔ Add Prettier for code formatting? … Yes # Consigliato Sì
   ✔ Add Vue DevTools 7 extension for debugging? (experimental) … No # Scegli Sì o No in base alle necessità

2. Installa le dipendenze

   Conclusa l’inizializzazione, entra nella cartella del nuovo progetto servbay-vue-app ed esegui npm install per scaricare tutte le dipendenze necessarie.

   cd servbay-vue-app
   npm install

Modificare il Contenuto d’Esempio (Opzionale)

Per verificare che il progetto funzioni, puoi modificare src/App.vue sostituendo il contenuto predefinito con un semplice messaggio "Hello ServBay!".

Apri il file src/App.vue e inserisci quanto segue:

<template>
  <div id="app">
    <h1>Hello ServBay!</h1>
    <p>Questa è un'app Vue.js in esecuzione tramite 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>

Impostare l'Ambiente di Sviluppo (Reverse Proxy)

In modalità sviluppo, i progetti Vue avviano normalmente un server locale (basato su Vite o Webpack) che permette hot module reload (HMR). ServBay può usare un reverse proxy per mappare un dominio locale all’indirizzo e porta del server di sviluppo.

1. Avvia il server di sviluppo

   Dal root del progetto, lancia il server di sviluppo con il comando seguente. L’opzione --port permette di specificare la porta (es: 8585); assicurati che non sia già in uso.

   npm run dev -- --port 8585

   Sul terminale vedrai che il server è in ascolto, ad esempio su http://localhost:8585.

2. Configura il reverse proxy di ServBay

   Apri ServBay, vai su Impostazioni sito web e aggiungi una nuova configurazione di sito scegliendo il tipo Reverse Proxy:

   • Nome: My first Vue dev site (o un nome a scelta)
   • Dominio: servbay-vue-dev.servbay.demo (o altro dominio .servbay.demo)
   • Tipo sito: Reverse Proxy
   • IP di destinazione: 127.0.0.1
   • Porta di destinazione: 8585 (deve corrispondere alla porta usata prima)

   Salva la configurazione: ServBay aggiornerà automaticamente il web server (Caddy o Nginx) effettuando il proxy di tutte le richieste al dominio servbay-vue-dev.servbay.demo verso http://127.0.0.1:8585.

   Per dettagli aggiuntivi su questa configurazione, consulta Aggiungere un sito di sviluppo Node.js in ServBay.

3. Accedere in modalità sviluppo

   Assicurati che il web server di ServBay sia attivo. Apri il browser e visita il dominio configurato https://servbay-vue-dev.servbay.demo.

   ServBay fornisce automaticamente il certificato SSL per i domini locali, tramite ServBay User CA o ServBay Public CA: puoi quindi testare il sito via HTTPS, in modo simile a un ambiente produttivo. Per dettagli su SSL consulta Configurare certificato SSL in ServBay.

   Ora dovresti visualizzare la tua app Vue in esecuzione in modalità sviluppo, con supporto live reload.

Build di produzione e deploy (sito statico)

Quando il progetto è pronto per il deploy, bisogna creare una build di produzione ottimizzata composta da file statici (HTML, CSS, JS…). Puoi pubblicare facilmente queste risorse con ServBay come Sito Statico.

1. Build di produzione

   Dal root del progetto, esegui il comando per la build ottimizzata:

   npm run build

   Il processo genererà tutti i file statici nella cartella dist all’interno della directory del progetto.

2. Configurare Servizio di File Statici

   In ServBay, nella sezione Impostazioni sito web, aggiungi una nuova configurazione di tipo Statico:

   • Nome: My first Vue production site (o simile)
   • Dominio: servbay-vue-prod.servbay.demo (o altro dominio .servbay.demo)
   • Tipo sito: Statico
   • Root del sito: /Applications/ServBay/www/servbay-vue-app/dist (il percorso assoluto della cartella dist)

   Salvando la configurazione, ServBay servirà direttamente i file statici dalla cartella dist tramite il web server.

3. Accedere in modalità produzione

   Assicurati che ServBay stia girando. Dal browser visita il dominio https://servbay-vue-prod.servbay.demo.

   A questo punto visualizzerai la build ottimizzata della tua app Vue, con massime performance di caricamento. Anche qui, grazie a dominio custom ed SSL automatico di ServBay, potrai testare localmente il sito così come sarà in produzione.

Note Utili

• Conflitto di porte: Se la porta 8585 (o quella che scegli) è già usata, il comando npm run dev restituirà errore. Scegli una porta libera e aggiorna la configurazione del reverse proxy di ServBay di conseguenza.
• Stato del web server ServBay: Verifica che il web server (Caddy o Nginx, a seconda della tua configurazione) sia avviato, altrimenti non sarà possibile accedere ai siti tramite i domini configurati.
• Risoluzione dominio: ServBay configura automaticamente i domini .servbay.demo inseriti nelle Impostazioni sito per puntare a 127.0.0.1. Se usi altri domini, potresti dover cambiare manualmente il file hosts del sistema o utilizzare il gestore hosts di ServBay per una corretta risoluzione locale.

Conclusioni

Con ServBay puoi allestire su macOS un ambiente locale integrato con Node.js e gestire lo sviluppo e deployment di progetti Vue.js in modo semplice. Grazie alla funzione Sito Web di ServBay, configuri rapidamente reverse proxy per il server di sviluppo o servi direttamente i file statici della build di produzione—sfruttando anche domini custom e certificati SSL automatici per massima sicurezza e praticità. Questo rende più facili e veloci la configurazione e il ciclo di lavoro per qualsiasi progetto locale Vue.js.