Quasar SPA: Entspannung im Web-Deployment

In der heutigen schnelllebigen digitalen Welt ist die Fähigkeit, robuste und reaktionsschnelle Webanwendungen zu erstellen, von entscheidender Bedeutung. Quasar Framework, basierend auf Vue.js, bietet eine elegante Lösung, um Single Page Applications (SPAs), Progressive Web Apps (PWAs), mobile Anwendungen und Desktop-Apps aus einer einzigen Codebasis zu entwickeln. Doch die Entwicklung ist nur die halbe Miete; die Bereitstellung dieser Anwendungen, bekannt als Deployment, ist der entscheidende Schritt, um sie der Welt zugänglich zu machen. Dieser Artikel führt Sie durch den Prozess des Deployments Ihrer Quasar SPA und beleuchtet gängige Methoden und Herausforderungen.

Was ist Quasar und wie funktioniert es?

Bevor wir uns dem Deployment widmen, ist es hilfreich, ein grundlegendes Verständnis von Quasar selbst zu entwickeln. Quasar konzentriert sich darauf, Vue.js-Benutzeroberflächen schnell und effizient zu erstellen. Das Besondere daran ist, dass Entwickler nur eine einzige, maßgebliche Codebasis für alle Plattformen schreiben müssen: reaktionsschnelle Desktop-/Mobile-Websites (SPA, SSR + SPA Client Takeover, SSR + PWA Client Takeover), PWAs (Progressive Web Apps), mobile Apps (die nativ aussehen) und Multi-Plattform-Desktop-Apps (über Electron) sowie Browser-Erweiterungen. Quasar ist auf Leistung, Reaktionsfähigkeit und Interoperabilität ausgelegt.

Die Geschichte von Quasar begann mit Razvan Stoenescu, der nach seiner Arbeit bei IBM und Lenovo feststellte, dass er ständig neue und unterschiedliche Software-Tools verwenden musste, um all die verschiedenen Arten von iOS-Apps, Android-Apps, Webanwendungen, Windows-Desktop-Apps und Apple-Desktop-Apps sowie PWAs zu erstellen. Er sehnte sich nach einem einzigen Framework, das all diese Komplexität beseitigen und all diese verschiedenen Arten von Apps aus einer EINZIGEN Codebasis erzeugen würde. Da er ein solches „mythisches Werkzeug“ nicht finden konnte, beschloss er, es selbst zu bauen. Der erste Quellcode-Commit für das Projekt erfolgte 2015, und die stabile Quasar 1.0-Version wurde im Juli 2019 veröffentlicht. Quasar v2 (mit Vue.js 3) erreichte im Juni 2021 mit der Version 2.0.0 Stabilität.

Das Quasar-Ökosystem besteht aus mehreren Schlüsselkomponenten:

• Quasar CLI: Ein Kommandozeilen-Tool, das die Erstellung und Entwicklung von Cross-Plattform-Anwendungen erleichtert. Es bietet eine globale Umgebung für die App-Initialisierung und -Verwaltung.
• Quasar App: Die lokale Entwicklungs- und Build-Umgebung innerhalb der Quasar CLI. Sie umfasst einen Entwicklungsserver für die Echtzeit-Vorschau von Änderungen und Build-Systeme für die Bereitstellung von Anwendungen auf mehreren Plattformen, einschließlich Web (PWA, SSR), Cordova, Capacitor, Electron und Browser-Erweiterungen.
• Quasar UI: Eine umfassende Bibliothek von Benutzeroberflächenkomponenten, die für die Verwendung in Quasar-Anwendungen entwickelt wurde.

Quasar-Anwendungen werden mit Vue Single File Components und Quasar Components erstellt. Vue Single File Components enthalten mehrere Abschnitte: Template (HTML), Skript (Javascript) und Style (CSS/Stylus/SASS/SCSS/Less) – alles in derselben Datei.

Der allgemeine Deployment-Prozess

Der erste Schritt beim Deployment Ihrer Quasar SPA ist immer der Build eines produktionsfertigen Bundles Ihrer Dateien. Dieser Prozess entfernt Entwicklungsanweisungen, optimiert den Code und minimiert Ihre Quelldateien, um die Leistung zu maximieren. Um einen solchen Build zu erstellen, verwenden Sie Quasar CLI mit dem folgenden Befehl:

$ quasar build

Für mögliche Build-Optionen können Sie die Quasar CLI-Dokumentation konsultieren. Dieser Befehl erstellt Ihr Projekt im SPA-Modus und gibt Ihr produktionsfertiges Bundle in einem neu erstellten Ordner /dist/spa-<theme> aus, wobei <theme> durch das von Ihnen gewählte Build-Theme ersetzt wird (z.B. spa-mat oder spa-ios).

Um Ihre Produktionsdateien bereitzustellen, ist die Verwendung eines Webservers erforderlich, um das http://-Protokoll zu verwenden. Das einfache Öffnen der index.html-Datei in Ihrem Browser funktioniert nicht, da dies stattdessen das file://-Protokoll verwendet. Dies ist ein häufiges Missverständnis, da moderne Webanwendungen oft serverseitige Routen und APIs benötigen, die über das file://-Protokoll nicht korrekt geladen werden können.

Gängige Webserver sind nginx, Caddy, Apache oder Express. Sie sollten jedoch in der Lage sein, jeden beliebigen Webserver zu verwenden. Der Webserver benötigt keine spezielle Einrichtung, es sei denn, Sie haben mit Vue Router im „history“-Modus gebaut. Die Hauptanforderung besteht darin, statische Dateien aus einem Verzeichnis bereitstellen zu können. Konsultieren Sie daher die Dokumentation Ihres Webservers zur Einrichtung der statischen Dateibereitstellung. Ein Beispiel für eine nginx-Konfiguration könnte folgendermaßen aussehen:

server {
 listen 80 http2;
 server_name quasar.myapp.com;
 root /home/user/quasar.myapp.com/public;
 add_header X-Frame-Options "SAMEORIGIN";
 add_header X-XSS-Protection "1; mode=block";
 add_header X-Content-Type-Options "nosniff";
 index index.html;
 charset utf-8;
 location / {
 try_files $uri $uri/ /index.html;
 }
 location = /favicon.ico { access_log off; log_not_found off; }
 location = /robots.txt { access_log off; log_not_found off; }
 access_log off;
 error_log /var/log/nginx/quasar.myapp.com-error.log error;
 location ~ /\.(?!well-known).* {
 deny all;
 }
}

Spezifische Deployment-Optionen

Es gibt viele Dienste, die das einfache Deployment von Anwendungen ermöglichen. Eine vollständige Auflistung aller Dienste ist nicht möglich, daher konzentrieren wir uns auf den allgemeinen Deployment-Prozess und einige Besonderheiten für gängige Dienste.

Deployment mit Now

Das Deployment Ihrer Quasar-Anwendung mit Now ist sehr einfach. Alles, was Sie tun müssen, ist die now-cli herunterzuladen und sich anzumelden, indem Sie Folgendes ausführen:

$ now login

Fahren Sie dann fort, Ihre Quasar-Anwendung gemäß den unter „Allgemeines Deployment“ beschriebenen Schritten zu erstellen. Nachdem der Build abgeschlossen ist, wechseln Sie in Ihr Deployment-Root-Verzeichnis (Beispiel: /dist/spa-mat) und führen Sie aus:

$ now

Die Now CLI sollte nun Informationen zu Ihrem Deployment anzeigen, wie z.B. die URL. Das war's. Sie sind fertig.

Deployment mit Heroku

Leider unterstützt Heroku statische Websites nicht direkt. Aber keine Sorge, wir müssen unserem Projekt lediglich einen HTTP-Server hinzufügen, damit Heroku unsere Quasar-Anwendung bereitstellen kann. In diesem Beispiel verwenden wir Express, um einen minimalen Server zu erstellen, den Heroku verwenden kann.

Zuerst müssen wir die erforderlichen Abhängigkeiten in unserem Projekt installieren:

$ npm install express serve-static connect-history-api-fallback

Nachdem wir die erforderlichen Abhängigkeiten installiert haben, können wir unseren Server hinzufügen. Erstellen Sie eine Datei namens server.js im Stammverzeichnis Ihres Projekts:

const
 express = require('express'),
 serveStatic = require('serve-static'),
 history = require('connect-history-api-fallback'),
 port = process.env.PORT || 5000

const app = express()

app.use(history())
app.use(serveStatic(__dirname + '/dist/spa-<theme>'))

app.listen(port)

Stellen Sie sicher, dass Sie <theme> durch das von Ihnen verwendete Theme ersetzen.

Heroku setzt voraus, dass eine Reihe von npm-Skripten verfügbar sind. Daher müssen wir unsere package.json ändern und Folgendes unter dem Skript-Abschnitt hinzufügen:

"build": "quasar build",
"start": "node server.js",
"heroku-postbuild": "npm install --only=dev --no-shrinkwrap && npm run build"

Jetzt ist es an der Zeit, eine App auf Heroku zu erstellen, indem Sie Folgendes ausführen:

$ heroku create

und mit Folgendem auf Heroku bereitzustellen:

$ heroku deploy

Deployment mit Surge

Surge ist ein beliebtes Tool zum Hosten und Bereitstellen statischer Websites. Wenn Sie Ihre Anwendung mit Surge bereitstellen möchten, müssen Sie zuerst das Surge CLI-Tool installieren:

$ npm install -g surge

Als Nächstes verwenden wir Quasar CLI, um unsere App zu erstellen:

$ quasar build

Jetzt können wir unsere Anwendung mit Surge bereitstellen, indem wir Folgendes aufrufen:

$ surge dist/spa-<theme>

Ihre Anwendung sollte nun erfolgreich mit Surge bereitgestellt worden sein. Sie sollten diese Anleitung an jedes andere statische Site-Deployment-Tool anpassen können.

Deployment auf GitHub Pages

Um Ihre Quasar-Anwendung auf GitHub Pages bereitzustellen, ist der erste Schritt die Erstellung eines speziellen Repositorys auf GitHub, das <username>.github.io benannt ist. Klonen Sie dieses Repository auf Ihren lokalen Computer.

Als Nächstes müssen Sie Ihre Quasar-Anwendung wie im Abschnitt „Allgemeines Deployment“ beschrieben erstellen. Dies führt zu einem spa-<theme>-Verzeichnis im dist-Verzeichnis. Kopieren Sie den Inhalt dieses Ordners in Ihr geklontes Repository.

Der letzte Schritt besteht darin, einen Commit in Ihrem Repository hinzuzufügen und auf GitHub zu pushen. Nach kurzer Zeit sollten Sie Ihre Quasar-Anwendung unter https://<username>.github.io/ besuchen können.

Hinzufügen einer benutzerdefinierten Domain zu GitHub Pages: Bitte beachten Sie die GitHub Pages-Anleitungen für eine detaillierte Erklärung zur Einrichtung einer benutzerdefinierten Domain.

Automatisiertes Deployment auf GitHub Pages mit push-dir: Das manuelle Kopieren all Ihrer Dateien in Ihr GitHub Pages-Repository kann eine mühsame Aufgabe sein. Dieser Schritt kann durch die Verwendung des push-dir-Pakets automatisiert werden.

Installieren Sie zuerst das Paket mit:

$ npm install push-dir --save-dev

Fügen Sie dann einen deploy-Skriptbefehl zu Ihrer package.json hinzu:

// ersetzen Sie <theme> durch Ihr tatsächliches Theme (mat, ios)
"scripts": {
 "deploy": "push-dir --dir=dist/spa-<theme> --remote=gh-pages --branch=master"
}

Fügen Sie Ihr GitHub Pages-Repository als Remote namens gh-pages hinzu:

$ git remote add gh-pages [email protected]:<username>/<username>.github.io.git

Jetzt können Sie Ihre Anwendung erstellen und bereitstellen mit:

$ quasar build
$ npm run deploy

Dies wird den Inhalt Ihres Build-Verzeichnisses in Ihren Master-Branch in Ihrem Github Pages-Repository pushen.

Wichtiger Hinweis zu Google Firebase

Obwohl dieser Artikel verschiedene gängige Deployment-Methoden für Quasar SPAs ausführlich behandelt, ist es wichtig zu erwähnen, dass die bereitgestellten Informationen keine spezifischen Anleitungen für das Deployment auf Google Firebase enthalten. Die hier dargestellten Methoden sind die, die in den uns zur Verfügung stehenden Quellen beschrieben wurden. Für ein Deployment auf Firebase müssten Sie die offizielle Firebase-Dokumentation in Kombination mit den allgemeinen Quasar-Build-Schritten konsultieren, da Firebase Hosting statische Inhalte hervorragend unterstützt und typischerweise nur das Hochladen des dist/spa-<theme>-Verzeichnisses erfordert, ähnlich wie bei anderen statischen Hosting-Diensten.

Vergleich der Deployment-Methoden

Häufig gestellte Fragen (FAQs)

Warum kann ich meine Quasar-App nicht einfach durch Öffnen der index.html-Datei im Browser starten?

Moderne Single Page Applications (SPAs) wie die von Quasar erstellten, sind für die Ausführung auf einem Webserver konzipiert, der Inhalte über das HTTP(S)-Protokoll bereitstellt. Wenn Sie die index.html-Datei direkt in Ihrem Browser öffnen, verwenden Sie das file://-Protokoll. Dieses Protokoll hat Einschränkungen hinsichtlich der Sicherheit und des Zugriffs auf bestimmte Browser-APIs (z.B. für Routenführung oder API-Aufrufe), die für das korrekte Funktionieren einer SPA unerlässlich sind. Ein Webserver stellt sicher, dass alle Ressourcen ordnungsgemäß geladen werden und die Anwendung wie beabsichtigt funktioniert.

Was bedeutet es, wenn Vue Router im „history“-Modus gebaut wurde?

Der Vue Router kann URLs auf zwei Arten verwalten: im Standard-„hash“-Modus (z.B. yourdomain.com/#/about) oder im „history“-Modus (z.B. yourdomain.com/about). Der „history“-Modus bietet sauberere URLs, die natürlicher aussehen, erfordert aber eine spezifische Konfiguration auf Ihrem Webserver. Wenn ein Benutzer eine URL im „history“-Modus direkt eingibt oder die Seite neu lädt, muss der Server so konfiguriert sein, dass er alle Anfragen an die index.html Ihrer Anwendung weiterleitet. Ohne diese Konfiguration würde der Server versuchen, eine tatsächliche Datei oder ein Verzeichnis unter dieser URL zu finden und würde wahrscheinlich einen 404-Fehler zurückgeben. Die oben gezeigte nginx-Konfiguration mit try_files $uri $uri/ /index.html; ist ein Beispiel für eine solche Server-Konfiguration.

Was ist eine PWA (Progressive Web App) und wie unterscheidet sie sich von einer SPA?

Eine SPA (Single Page Application) ist eine Webanwendung, die innerhalb eines einzigen HTML-Dokuments ausgeführt wird und Inhalte dynamisch lädt, ohne dass die Seite neu geladen werden muss. Eine PWA (Progressive Web App) ist eine Weiterentwicklung der Webanwendung, die fortschrittliche Webtechnologien nutzt, um ein natives App-ähnliches Erlebnis zu bieten. PWAs können offline funktionieren (dank Service Workern und Caching), Benachrichtigungen senden und sogar auf dem Startbildschirm eines Geräts installiert werden, ohne dass ein App Store erforderlich ist. Eine Quasar SPA kann zu einer PWA erweitert werden, indem die entsprechenden Build-Optionen in Quasar CLI aktiviert werden, was die Vorteile beider Konzepte vereint.

Warum ist der Befehl „quasar build“ notwendig, bevor ich meine Anwendung bereitstellen kann?

Der quasar build-Befehl ist unerlässlich, da er den Entwicklungscode Ihrer Anwendung für die Produktion optimiert. Während der Entwicklung enthält Ihr Code oft zusätzliche Tools, Debugging-Informationen und unoptimierte Ressourcen, die die Leistung beeinträchtigen würden. Der Build-Prozess umfasst Schritte wie Code-Minimierung (Entfernung unnötiger Zeichen und Leerzeichen), Kompilierung von Vue-Komponenten, Transpilierung von modernem JavaScript in eine breiter kompatible Version (z.B. ES5) und die Bündelung aller Assets (CSS, JavaScript, Bilder) in optimierte Dateien. Das Ergebnis ist ein schlankes, schnelles und effizientes Paket, das für die Bereitstellung in einer Live-Umgebung bereit ist.

Fazit

Das Deployment Ihrer Quasar SPA ist ein entscheidender Schritt auf dem Weg zur Veröffentlichung Ihrer Anwendung. Während der Prozess auf den ersten Blick komplex erscheinen mag, bietet Quasar CLI in Kombination mit gängigen Hosting-Diensten eine Vielzahl von Optionen, die auf unterschiedliche Bedürfnisse zugeschnitten sind. Ob Sie sich für die Einfachheit von Now oder Surge, die Flexibilität von Heroku oder die Kontrolle von GitHub Pages entscheiden – das Verständnis des Build-Prozesses und der Anforderungen des Webservers ist der Schlüssel zum Erfolg. Mit der richtigen Vorbereitung können Sie Ihre Quasar-Anwendung mühelos in die digitale Welt tragen und einem breiten Publikum zugänglich machen, auch wenn spezifische Anleitungen für alle Dienste wie Google Firebase nicht in jeder Quelle verfügbar sind.

Wenn du andere Artikel ähnlich wie Quasar SPA: Entspannung im Web-Deployment kennenlernen möchtest, kannst du die Kategorie Wellness besuchen.