Erstellen und Ausführen eines Nuxt.js-Projekts mit ServBay

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 übernimmt viele komplexe Konfigurationen, sodass sich Entwickler ganz auf die Geschäftslogik konzentrieren können. Nuxt.js eignet sich besonders gut für serverseitig gerenderte (SSR) Anwendungen, bietet jedoch auch eine leistungsstarke statische Seitengenerierung (SSG) – ideal für inhaltsreiche, SEO-freundliche Webseiten und Anwendungen.

Die wichtigsten Features und Vorteile von Nuxt.js

• Serverseitiges Rendering (SSR): Rendern von Vue-Seiten auf dem Server zur Verbesserung der Ladegeschwindigkeit, Nutzererfahrung und Indexierbarkeit für Suchmaschinen – bestens geeignet für SEO.
• Statische Seitengenerierung (SSG): Vollständig statische HTML-Dateien werden während des Build-Prozesses erzeugt. Dies ermöglicht höchste Performance, unkomplizierte Bereitstellung und keinen Runtime-Overhead – ideal für Webseiten mit selten wechselnden Inhalten wie Blogs oder Dokus.
• Automatisches Code-Splitting: Nuxt.js splittet JavaScript-Code automatisch anhand der Routing-Struktur. Somit wird beim Laden einer Seite nur der benötigte Code abgerufen – das optimiert die Geschwindigkeit der Anwendung spürbar.
• Dateibasiertes Routing: Das Anlegen von .vue-Dateien im pages-Verzeichnis erzeugt automatisch die zugehörigen Routen – das vereinfacht das Routing-Management erheblich.
• Modular: Dank eines mächtigen Modul-Ökosystems lässt sich Nuxt.js einfach mit Funktionen und Diensten wie Axios, PWA-Support oder Content-Management-Systemen erweitern.
• Konvention statt Konfiguration: Die Einhaltung bestimmter Verzeichnisstrukturen und Benennungen reduziert Konfigurationsaufwand auf ein Minimum.
• Optimiertes Entwicklererlebnis: Hot Module Reloading (HMR), Fehler-Reporting und andere Tools steigern die Produktivität im Entwicklungsprozess.

Dank dieser Features macht Nuxt.js die Entwicklung komplexer, hochperformanter und SEO-optimierter Webanwendungen hocheffizient und komfortabel.

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

Diese Anleitung zeigt, wie Sie mit dem leistungsstarken lokalen Entwicklungs-Setup von ServBay – insbesondere mit den Node.js-Paketen und der Websiteverwaltung – ein Nuxt.js-Projekt erstellen, konfigurieren und betreiben. Dabei behandeln wir die Einrichtung im Entwicklungsmodus (Reverse Proxy) sowie im Produktionsmodus (Statische Bereitstellung).

Voraussetzungen

Bevor Sie starten, stellen Sie sicher, dass folgende Bedingungen erfüllt sind:

1. Die ServBay-App ist erfolgreich installiert.
2. Das Node.js-Paket ist in ServBay installiert und aktiviert. Überprüfen Sie dies im ServBay-Dashboard unter dem Tab „Pakete“.
3. Sie sind mit Node.js, npm (oder Yarn/pnpm) und grundlegenden Terminalbefehlen vertraut.
4. (Empfehlung) Installieren Sie einen Code-Editor wie VS Code.

Nuxt.js-Projekt erstellen

Wir initialisieren unser Projekt mithilfe des create-nuxt-app-Scaffoldings.

1. Öffnen Sie das Terminal und navigieren Sie ins ServBay-Webverzeichnis

   Der Standard-Web-Root von ServBay ist /Applications/ServBay/www. Hier empfiehlt es sich, lokale Entwicklungsprojekte abzulegen. Öffnen Sie Ihr Terminal und geben Sie Folgendes ein:

   cd /Applications/ServBay/www

2. Neues Nuxt.js-Projekt initialisieren

   Führen Sie den Befehl npx create-nuxt-app aus, um ein neues Projekt namens servbay-nuxt-app zu erstellen. npx ist ab npm-Version 5.2+ verfügbar und ermöglicht das Ausführen von npm-Paketen, ohne sie global zu installieren.

   npx create-nuxt-app servbay-nuxt-app

   Folgen Sie daraufhin den Anweisungen im Terminal und wählen Sie passende Optionen. Ein Beispiel-Dialog sieht so aus:

   ? Project name: servbay-nuxt-app
   ? Programming language: JavaScript
   ? Package manager: Npm         # Wählen Sie Ihren Paketmanager, empfohlen werden Npm oder Yarn
   ? UI framework: None          # Bei Bedarf ein UI-Framework auswählen
   ? Nuxt.js modules: Axios      # Module je nach Bedarf aussuchen
   ? Linting tools: ESLint       # Linting-Tools nach Wunsch auswählen
   ? Testing framework: None     # Auswahl eines Test-Frameworks nach Bedürfnis
   ? Rendering mode: Universal (SSR / SSG) # Universal unterstützt SSR und SSG
   ? Deployment target: Server (Node.js hosting) # Server eignet sich für lokale Entwicklung und Node.js-Serverdeployment
   ? Development tools: jsconfig.json (Recommended for VS Code) # Dev-Tools nach Bedarf konfigurieren

3. Abhängigkeiten installieren

   Wechseln Sie ins neue Projektverzeichnis und installieren Sie die 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 die Installation abgeschlossen ist.

Projekt-Ausgabe anpassen

Um die Einrichtung zu prüfen, passen wir die Startseite so an, dass ein einfacher Text angezeigt wird.

1. Datei pages/index.vue öffnen

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

2. Dateiinhalt anpassen

   Ändern Sie den Inhalt wie folgt, um "Hello ServBay!" anzuzeigen:

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

   Die Verwendung des scoped-Attributs im Style-Tag stellt sicher, dass das Styling nur für diese Komponente gilt. Zusätzlich ist das Layout leicht gestaltet.

Entwicklungsmodus in ServBay ausführen

Der Nuxt.js-Dev-Server läuft lokal auf einem bestimmten Port. Um über ServBays benutzerdefinierte Domain, SSL und die Standardports 80/443 zugreifen zu können, richten wir über die Website-Verwaltung einen Reverse Proxy ein.

1. Nuxt.js-Entwicklungsserver starten

   Starten Sie im Projektordner den Nuxt.js-Entwicklungsserver und geben Sie den Port 8585 an (jeder freie Port ist möglich):

   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

   Nach dem Start sollte der Server unter http://localhost:8585 laufen. Dieses Terminal-Fenster bitte geöffnet lassen, damit der Server weiterläuft.

2. ServBay-Website als Reverse Proxy konfigurieren

   Öffnen Sie das ServBay-Dashboard, wechseln Sie zum Tab „Websites“ und klicken Sie unten links auf das +, um eine neue Website hinzuzufügen:

   • Name: Zum Beispiel Nuxt.js Dev Site (Proxy)
   • Domain: z.B. nuxt-dev.servbay.demo – die Endung .servbay.demo empfiehlt sich als guter ServBay-Standard.
   • Typ: Reverse Proxy auswählen.
   • IP-Adresse: 127.0.0.1 (lokale Loopback-Adresse)
   • Port: Der beim Dev-Server gewählte Port, in unserem Beispiel 8585.

   Speichern Sie die Konfiguration per „Hinzufügen“ oder „Speichern“. ServBay übernimmt die Einstellungen automatisch.

   Genaue Schritte zur Einrichtung von Node.js-Dev-Webseiten (typischerweise als Reverse Proxy) unter ServBay finden Sie in Hinzufügen einer Node.js-Entwicklungswebsite.

3. Zugriff auf die Dev-Website

   Öffnen Sie Ihren Browser und rufen Sie die konfigurierte Domain auf, z. B. https://nuxt-dev.servbay.demo.

   Dank Reverse Proxy greifen Sie direkt via benutzerdefiniertem Domainnamen und HTTPS auf Ihren Nuxt.js-Entwicklungsserver zu. ServBay generiert und verwaltet automatisch das passende SSL-Zertifikat (ausgestellt von ServBay User CA; Ihr System sollte dieser CA vertrauen). Dadurch kann bereits in der Entwicklungsumgebung unter HTTPS gearbeitet werden – praktisch für das Testen von Service Workern oder Features, die einen sicheren Kontext erfordern.

Produktionsversion erstellen und betreiben

Sobald Ihr Nuxt.js-Projekt fertiggestellt ist und bereit für den Einsatz (oder zur Vorschau in Produktionsnähe), können Sie daraus eine Produktions-Build erzeugen. Für Projekte im Universal-Modus und static site generation empfiehlt sich dabei nuxt generate (bzw. der Export-Skript-Aufruf).

1. Produktion bauen und statische Dateien generieren

   Führen Sie im Projektverzeichnis folgende Befehle aus: npm run build kompiliert den Code, npm run export erzeugt statische HTML-Dateien im Standard-Output-Ordner dist.

   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

   Nach Abschluss befindet sich im Projekt ein dist-Verzeichnis mit allen generierten Dateien.

2. ServBay-Website für statische Bereitstellung einrichten

   Öffnen Sie das ServBay-Dashboard, wechseln Sie zum Tab „Websites“ und klicken Sie unten links aufs +, um eine neue Konfiguration anzulegen:

   • Name: z.B. Nuxt.js Prod Site (Static)
   • Domain: Zum Beispiel nuxt-prod.servbay.demo
   • Typ: Static
   • Web-Root: Der Pfad zum generierten Static-Output: /Applications/ServBay/www/servbay-nuxt-app/dist

   Speichern Sie die Einstellungen. ServBay übernimmt und aktiviert die Konfiguration eigenständig.

3. Produktivseite aufrufen

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

   ServBays performanter Webserver (Caddy oder Nginx, je nach Konfiguration) liefert jetzt direkt die statischen Dateien aus dem dist-Ordner aus – der optimale Weg für höchste Geschwindigkeit. Auch hier profitieren Sie von kostenlosen SSL-Zertifikaten und benutzerdefinierten Domains via ServBay.

Fazit

Mit ServBay verwalten Sie komfortabel die lokale Entwicklung und Vorschau Ihrer Nuxt.js-Projekte. Profitieren Sie vom Node.js-Paket für Dev-Server und richten Sie Entwicklungs-Websites per Reverse Proxy samt eigenem Domainnamen und HTTPS ein. Nach der Entwicklung lässt sich das gebaute Projekt samt generierter statischer Dateien blitzschnell über einen statischen Website-Typ lokal bereitstellen – optimal für effizientes Frontend-Testing und -Development. Nutzen Sie die Flexibilität und Power von ServBay, um Ihren Workflow deutlich zu vereinfachen. Wir wünschen viel Erfolg bei Ihren Nuxt.js-Projekten mit ServBay!