Revolutionäre Kombination: Angular Universal mit Firebase

Revolutionäre Kombination: Angular Universal mit Firebase

Table of Contents:

1. Einleitung
2. Was ist serverseitiges Rendern?
3. Die Vorteile von serverseitigem Rendern für SEO
4. Kombination von Firebase und Angular Universal
5. Schritt-für-Schritt-Anleitung für die Implementierung 5.1. Generiere eine neue Angular-App 5.2. Installation von Angular Fire 2 und Firebase 5.3. Erstelle einen SEO-Service 5.4. Erstelle eine Animal-Detail-Komponente 5.5. Konfiguration von Angular Universal 5.6. Erstellung des Server-Codes mit Express.js 5.7. Erstellung eines Webpack-Konfigurationsdatei für den Server 5.8. Konfiguration der angular.json-Datei 5.9. Buildvorgang für die verschiedenen Apps
6. Überprüfung der SEO-Optimierung und Performance
7. Fazit
8. Ressourcen
9. FAQ

Einleitung

In diesem Artikel werden wir die Frage beantworten, wie man Firebase mit Angular Universal kombinieren kann, um eine suchmaschinenoptimierte JavaScript-App zu erstellen. Mit den neuesten Änderungen an Angular Fire 2 ist es nun möglich, serverseitiges Rendern mit Universal durchzuführen. Dadurch können Inhalte unserer App von Suchmaschinen verstanden und von Social-Media-Bots genutzt werden. Zudem können wir möglicherweise Performancevorteile bei der Seitenladegeschwindigkeit erzielen. In diesem Tutorial werde ich Ihnen zeigen, wie Sie von Grund auf eine Angular Universal-App erstellen und den Inhalt mit einer Sammlung von Tieren aus einer Firestore-Datenbank generieren können. Es gibt zwar eine Menge Code zu durchgehen, aber die meisten Teile sind konfigurationsbezogene Informationen, die Sie einfach in Ihr Projekt kopieren und einfügen können. Alles ist jedoch auch Schritt für Schritt in einem ausführlichen Artikel dokumentiert, so dass Sie problemlos folgen können, falls Sie einmal den Überblick verlieren.

Was ist serverseitiges Rendern?

Normalerweise lassen wir den Browser den JavaScript-Code unserer App rendern und zu HTML umwandeln. Dies kann jedoch ein Problem darstellen, wenn unsere App Routen hat, die in einer Suchmaschine indexiert oder in sozialen Medien geteilt werden müssen. Die meisten Bots, die unsere Website besuchen, verstehen nur HTML und unternehmen keine Anstrengung, den JavaScript-Code zu analysieren. Was wir tun können, ist unsere Angular-App so zu gestalten, dass sie sich eher wie eine traditionelle Webanwendung verhält, die HTML von einem Server zurückgibt. Bei einem ersten Seitenbesuch rendert sie die App in HTML und sendet sie dann an den Browser, der sie in eine reguläre Angular-App umwandelt. In diesem Demo werde ich Ihnen zeigen, wie Sie von 0 bis zur Bereitstellung einer Angular Universal-App gelangen und dabei alle Inhalte mit dieser Sammlung von Tieren generieren, die in der Firestore-Datenbank gespeichert sind. Ich möchte Sie jedoch darauf hinweisen, dass wir eine Menge Code durchgehen müssen, aber die meisten davon sind konfigurationsrelevante Informationen, die Sie einfach in Ihr Projekt kopieren und einfügen können. Ich habe jedoch alles Schritt für Schritt in einem ausführlichen Artikel dokumentiert, so dass Sie problemlos mitverfolgen können, falls Sie einmal den Überblick verlieren sollten.