Creare e Avviare un Progetto Nuxt.js con ServBay

Cos’è Nuxt.js?

Nuxt.js è un framework open source costruito sul popolare Vue.js, pensato appositamente per sviluppare applicazioni web moderne e ad alte prestazioni. Astratte molte configurazioni complesse, consente agli sviluppatori di concentrarsi di più sulla logica di business. Nuxt.js è particolarmente forte nella realizzazione di applicazioni con rendering lato server (SSR), ma offre anche potenti funzionalità di generazione di siti statici (SSG), rendendolo una scelta ideale per siti e applicazioni ricche di contenuti e ottimizzate per la SEO.

Caratteristiche principali e vantaggi di Nuxt.js

• Server-side Rendering (SSR): Pre-renderizza le pagine Vue sul server per accelerare il caricamento iniziale, migliorare l’esperienza utente e facilitare l’indicizzazione dei contenuti sui motori di ricerca – un notevole vantaggio per la SEO.
• Generazione di Siti Statici (SSG): Crea file HTML completamente statici in fase di build. Questo approccio garantisce massima velocità, semplicità di deploy e nessun carico lato server al runtime, ideale per siti che cambiano di rado come blog e documentazioni.
• Suddivisione Automatica del Codice: Nuxt.js divide automaticamente il JavaScript in base alle route: solo il codice necessario viene caricato quando l’utente accede a una pagina, ottimizzando le performance della web app.
• Routing Basato sul File System: La creazione di file .vue nella cartella pages genera automaticamente la configurazione del routing, semplificando notevolmente la gestione delle rotte.
• Modularità: Ecosistema modulare ricco, integra facilmente differenti funzionalità e servizi di terze parti (come Axios, supporto PWA, integrazione CMS e altro).
• Convenzione su Configurazione: Grazie a una struttura delle cartelle e convenzioni di naming predefinite, riduce configurazioni manuali e complessità.
• Esperienza di sviluppo ottimizzata: Offre Hot Module Reloading (HMR), report degli errori e altri strumenti che aumentano la produttività.

Con queste funzionalità, Nuxt.js rende la creazione di app web complesse, ad alte prestazioni e ottimizzate SEO più efficiente e accessibile.

Configurazione e Avvio di un Progetto Nuxt.js in ServBay

Questa guida mostra come sfruttare l’ambiente locale avanzato di ServBay – in particolare, i pacchetti Node.js e la gestione dei siti – per creare, configurare e avviare un progetto Nuxt.js. Illustreremo come impostare la modalità sviluppo (usando reverse proxy) e quella produzione (servizio di file statici) in ServBay.

Prerequisiti

Prima di iniziare, assicurati di avere:

1. Installato con successo l’applicazione ServBay.
2. Installato e abilitato il pacchetto Node.js in ServBay. Verifica e installa dalla sezione “Pacchetti” del pannello di controllo ServBay.
3. Una conoscenza di base di Node.js, npm (o Yarn/pnpm) e dei comandi da terminale.
4. (Consigliato) Un editor di codice come VS Code.

Creazione di un Progetto Nuxt.js

Utilizzeremo lo scaffolder create-nuxt-app per inizializzare velocemente un nuovo progetto Nuxt.js.

1. Apri il terminale e naviga nella root dei siti ServBay

   La directory root predefinita dei siti ServBay è /Applications/ServBay/www. È il posto consigliato per conservare i progetti in sviluppo locale. Apri il terminale ed esegui:

   cd /Applications/ServBay/www

2. Inizializza un nuovo progetto Nuxt.js

   Usa il comando npx create-nuxt-app per avviare un nuovo progetto chiamato servbay-nuxt-app. npx è incluso con npm dalla versione 5.2 in poi e permette di eseguire strumenti senza installazione globale.

   npx create-nuxt-app servbay-nuxt-app

   Segui le istruzioni a schermo per configurare il progetto in base alle tue esigenze. Un flusso di esempio:

   ? Project name: servbay-nuxt-app
   ? Programming language: JavaScript
   ? Package manager: Npm         # Scegli il gestore pacchetti, consigliato Npm o Yarn
   ? UI framework: None          # Scegli un framework UI se necessario
   ? Nuxt.js modules: Axios      # Seleziona moduli Nuxt.js come necessario
   ? Linting tools: ESLint       # Strumenti di linting opzionali
   ? Testing framework: None     # Framework di testing opzionale
   ? Rendering mode: Universal (SSR / SSG) # Scegli la modalità di rendering: Universal supporta SSR e SSG
   ? Deployment target: Server (Node.js hosting) # Target di deploy: Server va bene per sviluppo locale e distribuzione su Node.js
   ? Development tools: jsconfig.json (Recommended for VS Code) # Tool di sviluppo opzionali

3. Installa le dipendenze del progetto

   Entra nella cartella del nuovo progetto e installa le dipendenze con il package manager scelto:

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

   Attendi che l’installazione sia completata.

Modifica del Contenuto di Output del Progetto

Per una verifica rapida, modifichiamo la pagina principale per mostrare un semplice testo.

1. Apri il file pages/index.vue

   Utilizza l’editor di codice per aprire pages/index.vue nella cartella del progetto.

2. Modifica il contenuto del file

   Sostituisci il contenuto del file con il seguente per mostrare "Hello ServBay!" nella 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>

   Qui è stato aggiunto l’attributo scoped allo stile per limitare il CSS al solo componente, con una leggera rifinitura grafica.

Avvio della Modalità Sviluppo in ServBay

Il server di sviluppo Nuxt.js gira di solito su una porta locale specifica. Per poterlo raggiungere tramite domini personalizzati di ServBay, certificati SSL e sulle porte 80/443, useremo la funzionalità di reverse proxy.

1. Avvia il server di sviluppo Nuxt.js

   Dalla root del progetto, esegui:

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

   Il server partirà di solito su http://localhost:8585. Mantieni la finestra del terminale aperta per continuare a servire il progetto.

2. Configura il sito ServBay (Reverse Proxy)

   Vai al pannello ServBay e seleziona il tab “Siti”. Premi il + in basso a sinistra per aggiungere una nuova configurazione:

   • Nome (Name): Qualcosa di riconoscibile, ad esempio Nuxt.js Dev Site (Proxy).
   • Dominio (Domain): Digita il dominio personalizzato che desideri, esempio nuxt-dev.servbay.demo. Il suffisso .servbay.demo è una buona pratica di branding.
   • Tipo di sito (Website Type): Seleziona Reverse Proxy.
   • Indirizzo IP (IP Address): Metti 127.0.0.1 (loopback locale).
   • Porta (Port): Indica la porta su cui gira il server di sviluppo, cioè 8585.

   Salva la configurazione; ServBay aggiornerà in automatico le impostazioni.

   Per una guida dettagliata sull’aggiunta di siti Node.js in modalità sviluppo (come reverse proxy), consulta Aggiunta di un sito di sviluppo Node.js.

3. Visita il sito in modalità sviluppo

   Apri il browser e vai al dominio configurato, per esempio https://nuxt-dev.servbay.demo.

   Grazie al reverse proxy, puoi accedere al server di sviluppo Nuxt.js tramite dominio personalizzato e HTTPS. ServBay genera e configura automaticamente i certificati SSL (firmati dalla User CA ServBay: assicurati che il tuo sistema si fidi di questa CA). Questo ti permette di testare app anche con HTTPS (fondamentale, ad esempio, per Service Workers o funzionalità che richiedono un contesto sicuro).

Build e Avvio della Versione di Produzione

Quando sei pronto per distribuire il tuo progetto Nuxt.js (o vuoi un’anteprima locale in modalità produzione), puoi realizzare la build di produzione. Per i progetti in modalità Universal che vogliono una generazione statica, il comando tipico è nuxt generate (richiamato tramite lo script npm run export).

1. Build della produzione e generazione dei file statici

   Dalla root del progetto, lancia:

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

   Una volta conclusa, troverai una cartella dist con tutti i file statici generati.

2. Configura il sito statico in ServBay

   Torna nel pannello “Siti” di ServBay e aggiungi una nuova configurazione:

   • Nome (Name): Qualcosa come Nuxt.js Prod Site (Static).
   • Dominio (Domain): Il dominio per la versione di produzione, tipo nuxt-prod.servbay.demo.
   • Tipo di sito (Website Type): Seleziona Static.
   • Root del sito (Website Root): Inserisci il percorso dei file statici generati, che è /Applications/ServBay/www/servbay-nuxt-app/dist.

   Salva la configurazione; ServBay aggiornerà subito gli asset.

3. Visita il sito in modalità produzione

   Apri il browser sul dominio relativo, esempio https://nuxt-prod.servbay.demo.

   Il server web ad alte prestazioni di ServBay (Caddy o Nginx a seconda della configurazione) servirà direttamente i file statici dalla cartella dist, massimizzando la velocità. Avrai anche in questo caso certificato SSL gratuito e dominio personalizzato.

Conclusione

ServBay ti permette di gestire in modo semplice ed efficiente l’ambiente locale di sviluppo e anteprima dei tuoi progetti Nuxt.js. Usando i pacchetti Node.js di ServBay per il server di sviluppo e configurando reverse proxy per domini custom e HTTPS, puoi sviluppare e testare con la massima flessibilità. Una volta completato lo sviluppo, la build e la generazione di file statici, con la modalità di sito statico di ServBay ottieni anteprime locali ad alte prestazioni. Questo flusso di lavoro sfrutta l’efficacia e la potenza di ServBay, semplificando al massimo sviluppo e test dei progetti frontend. Speriamo che questa guida ti aiuti a sfruttare al meglio ServBay per lo sviluppo con Nuxt.js!