Seite 2: Die ersten Schritte mit Nuxt.js

Inhaltsverzeichnis

Nuxt.js basiert im Kern auf dem JavaScript-Framework Vue.js. Es konfiguriert rund um Vue.js und dessen serverseitige Render-Fähigkeiten einen kompletten Build-Prozess basierend auf Node und webpack. Damit finden sich JavaScript-Entwickler in einer zeitgemäßen und ihnen wahrscheinlich schon bekannten Entwicklungsumgebung wieder: Das Dependency-Management funktioniert über package.jsonund wahlweise yarn oder npm. Während der Entwicklung landen Änderungen an den Quelldateien via Hot-Reload direkt im Browser des Entwicklers. Unit- und Integrationstests stellen sicher, dass einmal entwickelte Funktionen nach Änderungen weiterhin funktionieren.

Ist Node.js installiert, erstellt der folgende Befehl ein Basisprojekt:

$ yarn create nuxt-app <project-name>

Ein Kommandozeilen-Interface führt durch Fragen zu REST-, CSS- und Test-Frameworks. Entwickler können sich zwischen TypeScript und JavaScript als Programmiersprache entscheiden.

In der zentralen Konfigurationsdatei nuxt.config.js finden sich alle projektspezifischen Konfigurationen. Anhand der ausführlichen API-Dokumentation auf der Nuxt.js-Homepage können Entwickler Standardwerte überschreiben.

Die "Getting Started"-Anleitung auf der Nuxt.js-Seite führt neue Entwickler Schritt für Schritt durch die Teile der Anwendung. Die wichtigsten Verzeichnisse sind layouts für Seitendesignvorlagen und pages für die einzelnen Seiten selbst. Aus den Dateien und Verzeichnissen unter pages konfiguriert Nuxt.js ein standardmäßiges Routing, sodass einzelne Seiten über URLs entsprechend der Verzeichnisstruktur erreichbar sind. Bei Bedarf können Entwickler dies in der Konfigurationsdatei nuxt.config.js anpassen und überschreiben.

Publizieren der Nuxt.js Universal App inklusive Pre-Rendering

Die neue Nuxt.js-Website soll nun Schritt für Schritt publiziert und optimiert werden. Als ersten Schritt (und beispielhaft für die Konfigurationsmöglichkeiten) wird sie in ein Content Delivery Network publiziert, hier am Beispiel von Netlify. Netlify integriert einen Continuous-Integration- und -Delivery-Mechanismus, der den Build-Prozess manuell oder bei einer Änderung an einer Quelldatei automatisch startet.

Die Schritte dafür sind wie folgt:

1. Ergänzen der Konfiguration um eine Netlify-konforme Generierung. Die folgende Konfiguration erzeugt für jede Seite im page-Quellverzeichnis eine HTML-Seite mit gleichem Namen. Zusätzlich erzeugt es eine Fallback-Seite 404.html, die das Content Delivery Network als Antwort auf eine nicht gefundene Datei zurückliefert.

generate: {
  // subfolders would create redirects on netlify, therefore disable
  subFolders: false,
  fallback: true
}

2. Hinterlegen der URL zum Quellcode-Repository bei Netlify.

3. Konfiguration des Build-Befehls yarn generateund des Output-Verzeichnisses mit statisch generierten Dateien dist, wahlweise über die Netlify-Weboberfläche oder über eine Konfigurationsdatei netlify.toml.

Nach wenigen Minuten ist der erste Build live verfügbar. Bei allen weiteren Änderungen im Git-Repository wird die Anwendung automatisch neu gebaut und ausgerollt.