Ein Nuxt.js-Projekt mit ServBay erstellen und ausführen

Was ist Nuxt.js?

Nuxt.js ist ein Open-Source-Framework, das auf dem beliebten Vue.js-Framework basiert und speziell für die Entwicklung moderner, leistungsstarker Webanwendungen konzipiert wurde. Es nimmt Entwicklern zahlreiche komplexe Konfigurationen ab, sodass sie sich besser auf die Geschäftslogik konzentrieren können. Nuxt.js eignet sich hervorragend für serverseitig gerenderte Anwendungen (SSR), bietet aber auch leistungsfähige Funktionen zur statischen Seitengenerierung (SSG). Damit ist es die ideale Wahl für inhaltsreiche, SEO-freundliche Webseiten und Web-Apps.

Wichtigste Funktionen und Vorteile von Nuxt.js

• Server-Side Rendering (SSR): Vue-Seiten werden vorab auf dem Server gerendert. Das führt zu schnellerem Initial-Load, besserer User Experience und erhöht die Sichtbarkeit für Suchmaschinen – ideal für SEO.
• Statische Seitengenerierung (SSG): Vollständig statische HTML-Dateien werden beim Build erstellt. Dies sorgt für maximale Performance, einfache Bereitstellung und benötigt keine Serverlaufzeit. Perfekt für selten aktualisierte Inhalte wie Blogs oder Dokumentationen.
• Automatische Code-Splitting: Nuxt.js teilt den JavaScript-Code automatisch nach Routen auf, sodass Nutzer jeweils nur den benötigten Code laden. Dies optimiert die Performance drastisch.
• Dateisystembasierte Routing: Durch das Anlegen von .vue-Dateien im pages-Verzeichnis werden Routen automatisch generiert – das vereinfacht das Routing-Management enorm.
• Modularität: Ein umfangreiches Modul-Ökosystem ermöglicht eine einfache Integration verschiedenster Features und Drittanbieter-Services (wie Axios, PWA-Support, CMS-Anbindung usw.).
• Convention over Configuration: Die Vorgabe von Verzeichnisstrukturen und Namenskonventionen reduziert den Konfigurationsaufwand deutlich.
• Optimierte Developer Experience: Features wie Hot Module Replacement (HMR) und Fehlermeldungen steigern die Effizienz und den Komfort beim Entwickeln.

Durch diese Leistungsmerkmale macht Nuxt.js die Entwicklung komplexer, performanter und SEO-optimierter Webanwendungen effizient und komfortabel.

Nuxt.js-Projekt mit ServBay konfigurieren und ausführen

Diese Anleitung zeigt, wie Sie die leistungsstarke lokale Entwicklungsumgebung von ServBay und insbesondere Funktionen wie Node.js-Paketverwaltung und Website-Management nutzen, um ein Nuxt.js-Projekt zu erstellen, zu konfigurieren und auszuführen. Wir erklären die Einrichtung für den Entwicklungsmodus (mit Reverse Proxy) und den Produktionsmodus (über statischen Dateiservice).

Voraussetzungen

Bevor Sie beginnen, vergewissern Sie sich bitte, dass Sie folgende Bedingungen erfüllen:

1. Die ServBay-App ist erfolgreich installiert.
2. Das Node.js-Paket ist in ServBay installiert und aktiviert. Prüfen und installieren Sie es im ServBay-Kontrollpanel unter dem Tab „Pakete“.
3. Sie verfügen über Grundkenntnisse in Node.js, npm (oder Yarn/pnpm) sowie Basis-Terminalbefehlen.
4. (Empfohlen) Sie verwenden einen Code-Editor wie VS Code.

Nuxt.js-Projekt erstellen

Mit dem create-nuxt-app-CLI-Tool können wir ein Nuxt.js-Projekt schnell initialisieren.

1. Terminal öffnen und zum ServBay-Webseiten-Stammverzeichnis wechseln

   Das Standard-Webseitenverzeichnis von ServBay ist empfehlenswert für lokale Entwicklungsprojekte. Öffnen Sie Ihr Terminal und geben Sie folgenden Befehl ein:

   macOS:

   cd /Applications/ServBay/www

   Windows:

   cd C:\ServBay\www

2. Neues Nuxt.js-Projekt initialisieren

   Mit npx create-nuxt-app wird ein neues Projekt namens servbay-nuxt-app erstellt. npx (ab npm 5.2+) ermöglicht das Ausführen von npm-Paketen ohne globale Installation.

   npx create-nuxt-app servbay-nuxt-app

   Folgen Sie anschließend den Anweisungen im Terminal und passen Sie die Optionen nach Ihren Bedürfnissen an. Beispiel:

   ? Project name: servbay-nuxt-app
   ? Programming language: JavaScript
   ? Package manager: Npm         # Wählen Sie Ihren bevorzugten Paketmanager – npm oder Yarn empfohlen
   ? UI framework: None          # Optional: UI-Framework wählen
   ? Nuxt.js modules: Axios      # Falls gewünscht: Nuxt.js-Modul angeben
   ? Linting tools: ESLint       # Optional: Linting-Tool wählen
   ? Testing framework: None     # Optional: Testframework wählen
   ? Rendering mode: Universal (SSR / SSG) # Universal unterstützt SSR und SSG
   ? Deployment target: Server (Node.js hosting) # Ziel: Server für lokale Entwicklung und Node.js-Hosting
   ? Development tools: jsconfig.json (Recommended for VS Code) # Optional: Dev-Tool-Konfiguration auswählen

3. Projekt-Abhängigkeiten installieren

   Wechseln Sie ins frisch erstellte Projektverzeichnis und installieren Sie die nötigen Abhängigkeiten mit dem gewählten Paketmanager:

   cd servbay-nuxt-app
   npm install
   # Oder mit Yarn: yarn install
   # Oder mit pnpm: pnpm install

   Warten Sie, bis alle Abhängigkeiten installiert sind.

Projektausgabe anpassen

Um das Ergebnis einfach zu überprüfen, passen wir die Startseite an und lassen dort einen einfachen Text anzeigen.

1. Die Datei pages/index.vue öffnen

   Öffnen Sie im Code-Editor die Datei pages/index.vue in Ihrem Projektverzeichnis.

2. Dateiinhalt ändern

   Ersetzen Sie den Inhalt wie folgt, damit auf der Seite „Hello ServBay!“ erscheint:

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

   Hier wurde das scoped-Attribut zum Style-Tag hinzugefügt, damit die Stile nur für diese Komponente gelten und das Layout leicht verbessert.

Entwicklungsmodus in ServBay ausführen

Der Nuxt.js-Dev-Server läuft üblicherweise auf einem bestimmten lokalen Port. Um per ServBay mit benutzerdefinierter Domain, SSL-Zertifikat und über die Ports 80/443 darauf zuzugreifen, richten wir einen Reverse Proxy über die Webseitenfunktion von ServBay ein.

1. Nuxt.js-Dev-Server starten

   Starten Sie im Projektverzeichnis den Nuxt.js-Dev-Server auf Port 8585 (oder einem anderen freien Port):

   macOS:

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

   Windows:

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

   Nach dem Start sollte Ihr Dev-Server auf http://localhost:8585 erreichbar sein. Lassen Sie das Terminal offen, damit der Server weiterläuft.

2. ServBay-Website als Reverse Proxy konfigurieren

   Öffnen Sie das ServBay-Kontrollpanel und gehen Sie zum Tab „Webseiten“. Klicken Sie unten links auf das +, um eine neue Webseite anzulegen:

   • Name: Wählen Sie eine gut erkennbare Bezeichnung, z.B. Nuxt.js Dev Site (Proxy).
   • Domain: Geben Sie die gewünschte Domain ein, etwa nuxt-dev.servbay.demo. Die Endung .servbay.demo ist empfehlenswert zur Markierung als ServBay-Testseite.
   • Websitetyp: Wählen Sie Reverse Proxy.
   • IP-Adresse: Tragen Sie 127.0.0.1 ein (localhost).
   • Port: Geben Sie den beim Dev-Server verwendeten Port ein, hier 8585.

   Speichern Sie die Konfiguration. ServBay lädt automatisch die Einstellungen neu und aktiviert die Seite.

   Ausführlichere Schritte zur Einrichtung einer Node.js-Entwicklungswebsite über Reverse Proxy finden Sie in Node.js-Entwicklungswebsite hinzufügen.

3. Dev-Seite aufrufen

   Rufen Sie im Browser Ihre konfigurierte Domain auf, z.B. https://nuxt-dev.servbay.demo.

   Dank ServBays Reverse Proxy können Sie nun Ihren Nuxt.js-Dev-Server mit eigener Domain und via HTTPS aufrufen. ServBay generiert und hinterlegt automatisch ein SSL-Zertifikat (ausgestellt von ServBay User CA – achten Sie darauf, dass Ihr System diese CA vertraut), sodass Sie schon in der Entwicklung HTTPS nutzen können – wichtig für die Simulation von Produktionsbedingungen, das Testen von Service Workers oder Funktionen mit Sicherheitsanforderung.

Produktionsversion bauen und ausführen

Ist Ihr Nuxt.js-Projekt fertiggestellt und bereit für den Einsatz (oder soll lokal in der Produktionsumgebung vorab betrachtet werden), generieren Sie die Produktionsversion. Für Projekte im Universal-Modus mit statischen Seiten nutzen Sie meist nuxt generate (via Skript npm run export).

1. Build und Generierung der statischen Dateien

   Im Projektverzeichnis führen Sie folgende Befehle aus: npm run build kompiliert den Code, npm run export generiert entsprechend der Routen statische HTML-Dateien im Ausgabeordner (standardmäßig dist).

   macOS:

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

   Windows:

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

   Nach dem Build-Prozess entsteht im Verzeichnis ein Ordner dist mit allen generierten statischen Dateien.

2. ServBay-Website als statischen Dateiserver konfigurieren

   Öffnen Sie das ServBay-Kontrollpanel und gehen Sie zum Tab „Webseiten“. Legen Sie mit + eine neue Seite an:

   • Name: Wählen Sie z.B. Nuxt.js Prod Site (Static).
   • Domain: Geben Sie die gewünschte Produktions-Domain ein, z.B. nuxt-prod.servbay.demo.
   • Websitetyp: Wählen Sie Static.
   • Webseiten-Stammverzeichnis: Pfad zum statischen Output des Nuxt.js-Projekts:
     • macOS: /Applications/ServBay/www/servbay-nuxt-app/dist
     • Windows: C:\ServBay\www\servbay-nuxt-app\dist

   Speichern Sie die Einstellungen. ServBay aktualisiert die Konfiguration und aktiviert die Seite.

3. Produktionsseite aufrufen

   Öffnen Sie den Browser und rufen Sie die Produktions-Domain auf, z.B. https://nuxt-prod.servbay.demo.

   Je nach Konfiguration verwendet ServBay Caddy oder Nginx als leistungsstarken Webserver, um die statischen Dateien aus dem dist-Ordner direkt bereitzustellen. So erhalten Sie extrem schnelle Ladezeiten und profitieren auch hier von kostenlosen SSL-Zertifikaten und eigener Domain.

Fazit

Mit ServBay verwalten Sie Ihre lokalen Nuxt.js-Entwicklungs- und Vorschauumgebungen ganz einfach. Sie können über das Node.js-Paket von ServBay einen Dev-Server betreiben und über die Webseitenfunktion einen Reverse Proxy für Domains und HTTPS einrichten. Nach Abschluss der Entwicklung erstellen Sie die Produktions-Builds als statische Dateien und profitieren von schnellem lokalen Preview über den Static-Websitetyp von ServBay. Dieses Vorgehen vereinfacht und beschleunigt Ihre Frontendentwicklung und Testprozesse deutlich und nutzt die leistungsstarken Features von ServBay optimal aus. Wir hoffen, dieser Leitfaden hilft Ihnen, Ihre Nuxt.js-Projekte effizient mit ServBay zu entwickeln!