Creare e avviare un progetto Nuxt.js con ServBay

Cos'è Nuxt.js?

Nuxt.js è un framework open source basato sul popolare Vue.js, progettato per costruire web app moderne e ad alte prestazioni. Astrae molte configurazioni complesse, consentendo agli sviluppatori di concentrarsi maggiormente sulla logica applicativa. Nuxt.js è particolarmente efficace per applicazioni con rendering lato server (SSR) e offre anche potenti funzionalità di generazione di siti statici (SSG), diventando così una scelta ideale per siti e app ricchi di contenuti e ottimizzati per la SEO.

Principali caratteristiche e vantaggi di Nuxt.js

• Rendering lato server (SSR): Pre-rendering delle pagine Vue sul server, migliorando la velocità di caricamento iniziale, l’esperienza utente e la visibilità sui motori di ricerca, ideale per la SEO.
• Generazione di siti statici (SSG): Durante la build vengono creati file HTML completamente statici. Questa modalità offre prestazioni eccellenti, facilità di deployment e nessun overhead lato server, perfetta per blog, documentazione e siti web poco dinamici.
• Suddivisione automatica del codice: Nuxt.js divide automaticamente il codice JavaScript in base alle rotte, caricando solo ciò che serve per ogni pagina e ottimizzando drasticamente le performance.
• Routing basato sul filesystem: Creando file .vue all’interno della cartella pages, le rotte sono generate automaticamente, semplificando la gestione della navigazione.
• Ecosistema modulare: Numerosi moduli permettono di integrare facilmente funzionalità e servizi di terze parti (come Axios, supporto PWA, CMS, ecc.).
• Convenzione preferita alla configurazione: Seguendo una struttura e regole predefinite si riducono le configurazioni manuali.
• Esperienza di sviluppo ottimizzata: Supporto per Hot Module Reloading (HMR), report degli errori e altri strumenti che rendono lo sviluppo più efficiente.

Grazie a queste caratteristiche, Nuxt.js semplifica la creazione di applicazioni web complesse, performanti e ottimizzate per i motori di ricerca.

Configurare e avviare un progetto Nuxt.js con ServBay

Questa guida mostra come utilizzare l’ambiente di sviluppo locale offerto da ServBay, in particolare il pacchetto Node.js e le funzionalità di gestione siti web, per creare, configurare ed eseguire un progetto Nuxt.js. Verranno illustrate sia la modalità di sviluppo (tramite reverse proxy) sia la modalità di produzione (con servizio di file statici).

Prerequisiti

Prima di iniziare, assicurati di rispettare questi requisiti:

1. ServBay è correttamente installato sul tuo sistema.
2. Il pacchetto Node.js è installato e attivo in ServBay. Puoi verificare e installare Node.js dalla scheda “Pacchetti” nel pannello di controllo ServBay.
3. Conosci le basi di Node.js, npm (o Yarn/pnpm) e i comandi fondamentali del terminale.
4. (Consigliato) Un editor di codice come VS Code è installato.

Creazione di un progetto Nuxt.js

Utilizzeremo lo scaffold create-nuxt-app per inizializzare rapidamente un nuovo progetto Nuxt.js.

1. Apri il terminale e accedi alla directory root dei siti ServBay

   La root predefinita dei siti ServBay è il luogo consigliato dove salvare i tuoi progetti. Apri il terminale ed esegui:

   macOS:

   cd /Applications/ServBay/www

   Windows:

   cd C:\ServBay\www

2. Inizializza un nuovo progetto Nuxt.js

   Usa il comando npx create-nuxt-app per creare un nuovo progetto chiamato servbay-nuxt-app. Con npx puoi eseguire pacchetti npm senza installarli globalmente.

   npx create-nuxt-app servbay-nuxt-app

   Segui le istruzioni interattive nel terminale, scegliendo le opzioni che preferisci. Ecco un esempio di configurazione:

   ? Project name: servbay-nuxt-app
   ? Programming language: JavaScript
   ? Package manager: Npm         # Scegli il gestore pacchetti, consigliato Npm o Yarn
   ? UI framework: None          # Seleziona un framework UI se necessario
   ? Nuxt.js modules: Axios      # Scegli i moduli Nuxt.js desiderati
   ? Linting tools: ESLint       # Scegli gli strumenti di linting
   ? Testing framework: None     # Scegli un framework di test se serve
   ? Rendering mode: Universal (SSR / SSG) # Seleziona la modalità di rendering, Universal supporta SSR e SSG
   ? Deployment target: Server (Node.js hosting) # Server è adatto per sviluppo locale e deploy su Node.js
   ? Development tools: jsconfig.json (Recommended for VS Code) # Configura gli strumenti di sviluppo

3. Installa le dipendenze

   Accedi alla cartella del progetto appena creato ed installa le dipendenze tramite il gestore scelto:

   cd servbay-nuxt-app
   npm install
   # Oppure con Yarn: yarn install
   # Oppure con pnpm: pnpm install

   Attendi il completamento dell’installazione.

Modifica del contenuto della homepage

Per confermare il funzionamento del progetto, modificheremo la homepage per mostrare un semplice messaggio.

1. Apri il file pages/index.vue

   Usa l’editor per aprire pages/index.vue nella directory del progetto.

2. Modifica il file

   Sostituisci il contenuto con il seguente, così da visualizzare "Hello ServBay!" sulla pagina:

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

   È stato aggiunto l’attributo scoped per limitare gli stili al solo componente ed è stata resa la visualizzazione più gradevole.

Avviare la modalità sviluppo in ServBay

Il server di sviluppo Nuxt.js gira normalmente su una porta locale dedicata. Per accedere a questa app tramite il dominio personalizzato di ServBay, certificato SSL e porte HTTPS standard, utilizzeremo la funzionalità reverse proxy di ServBay.

1. Avvia il server di sviluppo Nuxt.js

   Nella directory root del progetto, lancia il server su porta 8585 (puoi cambiarla se necessario).

   macOS:

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

   Windows:

   cd C:\ServBay\www\servbay-nuxt-app
   npm run dev -- --port 8585
   # Oppure con Yarn: yarn dev --port 8585
   # Oppure con pnpm: pnpm run dev --port 8585

   Il server sarà visibile su http://localhost:8585. Tieni aperta la finestra del terminale per farlo funzionare.

2. Configura un sito ServBay (Reverse Proxy)

   Apri il pannello di controllo ServBay e vai alla scheda «Siti». Premi il pulsante + in basso a sinistra per aggiungere un nuovo sito:

   • Nome: Scegli un nome descrittivo, ad esempio Nuxt.js Dev Site (Proxy).
   • Dominio: Inserisci il dominio che vuoi usare, ad esempio nuxt-dev.servbay.demo. Il suffisso .servbay.demo è consigliato come buona prassi.
   • Tipo sito: Seleziona Reverse Proxy.
   • Indirizzo IP: Inserisci 127.0.0.1, che è l’indirizzo localhost.
   • Porta: Inserisci la porta scelta per Nuxt.js, in questo caso 8585.

   Completa la configurazione e salva. ServBay aggiornerà la configurazione e il sito sarà subito attivo.

   Per la procedura dettagliata su come aggiungere siti Node.js di sviluppo (utilizzando il reverse proxy), consulta Aggiungere un sito Node.js di sviluppo.

3. Accedi al sito di sviluppo

   Apri il browser e visita il dominio configurato su ServBay, ad esempio https://nuxt-dev.servbay.demo.

   Grazie al reverse proxy di ServBay, puoi accedere direttamente al server di sviluppo Nuxt.js tramite il dominio personalizzato e sulla porta HTTPS. ServBay genera e configura automaticamente il certificato SSL (firmato dalla User CA di ServBay—assicurati che il sistema la consideri attendibile). Questo ti permette di sviluppare e testare funzioni che richiedono HTTPS, come Service Worker o componenti che necessitano di un contesto sicuro, simulando fedelmente l’ambiente di produzione.

Build e avvio della versione di produzione

Una volta terminato lo sviluppo e pronto per la distribuzione (o per un’anteprima della produzione locale), puoi costruire la versione definitiva del progetto. Se hai scelto la modalità Universal con generazione di sito statico, esegui normalmente nuxt generate (o tramite lo script npm run export).

1. Build della produzione e generazione file statici

   Dalla root del progetto, esegui questi comandi. npm run build compila il codice, mentre npm run export genera l’HTML statico nella cartella di output (di default dist).

   macOS:

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

   Windows:

   cd C:\ServBay\www\servbay-nuxt-app
   npm run build
   npm run export
   # Oppure con Yarn: yarn build && yarn export
   # Oppure con pnpm: pnpm build && pnpm run export

   Terminata la build, troverai la cartella dist con tutti i file statici generati.

2. Configura un sito ServBay (servizio di file statici)

   Sul pannello ServBay, nella sezione «Siti», premi il + per aggiungere la configurazione:

   • Nome: Scegli un nome, ad esempio Nuxt.js Prod Site (Static).
   • Dominio: Inserisci il dominio per la versione di produzione, ad esempio nuxt-prod.servbay.demo.
   • Tipo sito: Seleziona Static.
   • Root sito: Inserisci il percorso della cartella dei file statici:
     • macOS: /Applications/ServBay/www/servbay-nuxt-app/dist
     • Windows: C:\ServBay\www\servbay-nuxt-app\dist

   Salva la configurazione. ServBay aggiornerà e attiverà il sito.

3. Accedi al sito di produzione

   Apri il browser e visita il dominio che hai impostato, come https://nuxt-prod.servbay.demo.

   Il web server di ServBay (Caddy o Nginx, a seconda della configurazione) distribuirà direttamente i file statici dalla cartella dist, garantendo ottime performance. In più, avrai accesso a certificati SSL e supporto per domini personalizzati gratuiti.

Conclusione

ServBay semplifica la gestione locale di progetti Nuxt.js sia in fase di sviluppo che di anteprima della produzione. Puoi avviare il server di sviluppo Node.js, configurare il reverse proxy per lavorare con HTTPS e domini personalizzati, e infine costruire la versione statica ottimizzata per la preview locale alta velocità. Questo workflow sfrutta al massimo le potenzialità e la comodità di ServBay, rendendo più semplici sviluppo e test dei tuoi progetti frontend. Speriamo che questa guida ti aiuti a lavorare in modo ancora più efficace con Nuxt.js e ServBay!