React und Firebase sind alles, was Sie zum Hosten Ihrer Web-Apps benötigen

Viele moderne Webentwicklungsgeschichten haben aufgrund der komplexen Anzahl der beteiligten Technologien und des Entwicklungsansatzes, mit dem die Arbeit erledigt werden soll, kein gutes Ende.

Die eigentliche Frage ist, wie wir diese Reise weniger schmerzhaft machen können oder sollte ich fruchtbarer und effektiver sagen? Idealerweise sollten die von uns ausgewählten Technologien gut etabliert sein und eine hervorragende Unterstützung durch die Community bieten.

In diesem Artikel werden zwei Technologien vorgestellt, die sehr gut etabliert sind und eine starke Community-Unterstützung bieten, mit denen wir Live-Web-Apps effektiver erstellen können.

Voraussetzungen:

  • Sie kennen einige Reaktionen, zumindest die Grundlagen
  • Sie haben Node.js und NPM installiert
  • Sie wissen, wie man die Kommandozeile benutzt

Folgendes werden wir heute behandeln:

  • Erstellen Sie eine einfache React-Anwendung mit create-react-app
  • Melden Sie sich bei der Firebase-Konsole an und erstellen Sie ein neues Projekt
  • Stellen Sie es mit einem einfachen Befehl auf Firebase Hosting bereit

Als ich anfänglich versuchte, eine React- Webanwendung für das Firebase- Hosting bereitzustellen , wollte ich die Webanwendung herunterladenAls ich zum Laufen kam, stand ich vor ein paar Hürden. Ich habe herausgefunden, dass es nützlich sein kann, alle von mir durchgeführten Forschungsarbeiten in einem umfassenden Artikel zusammenzufassen, um der Community zu helfen. Also lasst uns anfangen.

Auf hoher Ebene ist dieser Artikel in drei Teile gegliedert:

  1. Holen Sie sich eine sehr einfache React- App
  2. Erstellen Sie ein Firebase- Konto
  3. Verbinden Sie unsere Firebase- Konsole mit unserer React- App

Teil 1 - Erstellen Sie die React-App

Sie kennen wahrscheinlich die App myapp erstellen-reagieren-Appist der beste Weg, um ein einfaches Boilerplate für eine React-App zu erstellen. Es wird nicht nur eine sehr einfache Boilerplate erstellt, sondern es werden auch die erforderlichen Abhängigkeiten hinzugefügt, die für die Ausführung von React erforderlich sind.

Wenn Sie die wahre Magie und Kraft dieses einzeiligen Befehls nicht erkennen, versuchen Sie, ein Verzeichnis für React von Grund auf neu zu erstellen. Nur dann werden Sie den wahren Schmerz erkennen. Ein großes Dankeschön an die Entwickler, die diesen Befehl überhaupt eingerichtet haben.

Um loszulegen, müssen wir die Create-React-App auf unserem Computer installieren.

$ npm install -g create-react-app

Das Flag -g im obigen Befehl installiert das NPM-Paket global auf dem Computer.

Sobald dies erledigt ist, werden wir dieses Paket verwenden, um uns eine grundlegende Boilerplate für React zu besorgen.

$ create-react-app myapp

Dadurch wird ein Verzeichnis namens myapp erstellt . Jetzt müssen wir in das Verzeichnis navigieren und den folgenden Befehl ausführen.

$ cd myapp$ npm start

Sobald Sie den obigen Befehl ausgeführt haben, sollte ein lokaler Entwicklungsserver die erste React-App am Speicherort localhost: 3000 starten und rendern

Ich hoffe das war schnell und einfach. Wir müssen noch einen letzten Schritt ausführen, aber schauen wir uns zuerst Firebase an . Danach kehren wir mit React zum letzten Schritt zurück.

Teil 2 - Firebase-Setup

Lassen Sie uns zunächst verstehen, was Firebase ist, bevor wir uns mit der Einrichtung befassen .

Firebase ist eine Entwicklungsplattform für Mobilgeräte und Web-Apps, die Entwicklern eine Vielzahl von Tools und Diensten zur Verfügung stellt, mit denen sie hochwertige Apps entwickeln, ihre Benutzerbasis erweitern und mehr Gewinn erzielen können.

Werfen wir einen Blick auf die Geschichte von Firebase, bevor wir es einrichten.

Eine kurze Geschichte

Im Jahr 2011, bevor es als Firebase bekannt wurde, war es ein Startup namens Envolve. Envolve als Produkt stellte Entwicklern eine API zur Verfügung, die die Integration von Online-Chat-Funktionen in ihre Website ermöglichte.

Das Unternehmen stellte fest, dass Entwickler Envolve verwendeten, um Anwendungsdaten wie den Spielstatus in Echtzeit über ihre Benutzer hinweg zu synchronisieren und nicht nur Chat-Nachrichten.

Dies veranlasste die Gründer von Envolve, James Tamplin und Andrew Lee, das Chat-System und die Echtzeit-Architektur zu trennen. Im April 2012 wurde Firebase als eigenständiges Unternehmen gegründet, das Backend-as-a-Service mit Echtzeitfunktionen ausstattete.

Nach der Übernahme durch Google im Jahr 2014 entwickelte sich Firebase schnell zum multifunktionalen Giganten einer Mobil- und Webplattform, die es heute ist.

Dieses einzelne Bild beschreibt Firebase in seiner ganzen Kraft.

Firebase Login

Beginnen wir also damit: Gehen Sie zu //firebase.google.com/ und melden Sie sich mit Ihrem Google-Konto an. Sobald Sie angemeldet sind, klicken Sie auf Zur Konsole wechseln . Sie erhalten eine Option zum Erstellen eines neuen Projekts .

Sobald das Projekt erstellt wurde, können Sie Firebase zu jeder mobilen Android- oder iOS-App und sogar zu einer Web-App hinzufügen.

Teil 3 - Firebase & React

Klicken Sie auf die Option zum Hinzufügen von Firebase zu Ihrer Web-App . Sie erhalten ein Dialogfeld mit einem Code-Snippet.

Fügen Sie dieses Code-Snippet ganz unten in Ihrer index.html- Datei in Ihrem Projekt hinzu. Stellen Sie sicher, dass dieses Codefragment vor allen anderen Skript-Tags in Ihrer index.html- Datei hinzugefügt wird .

Wenn Sie sich das Bild oben genau ansehen, sehen Sie, dass ganz unten einige Links vorhanden sind. Klicken Sie auf den ersten Link und lesen Sie den Abschnitt Erste Schritte mit Firebase für Web-Apps . Der folgende Bildschirm wird angezeigt.

Klicken Sie auf Erste Schritte.

Gehen Sie in Ihr Stammverzeichnis und geben Sie den obigen Befehl in Ihr Terminal ein. Dadurch werden die Firebase-Tools lokal auf Ihren Computer heruntergeladen.

Der nächste und letzte Schritt besteht darin, Firebase zu initialisieren und den Quellcode in Ihrem Verzeichnis für Firebase bereitzustellen.

Sobald Sie auf "Fertig stellen" geklickt und alle oben genannten Schritte ausgeführt und in Ihr Terminal eingegeben haben, sollte auf der Webseite eine Liste der letzten Bereitstellungsdatensätze angezeigt werden.

Reagieren Sie erneut, wie versprochen

Erinnern Sie sich, dass ich im obigen Teil "Reagieren" sagte, wir würden zurückkehren, um eine letzte Sache zu tun? Das machen wir jetzt.

Navigieren Sie zu dem Verzeichnis, in dem Ihre App erstellt wurde.

React funktioniert so, dass Sie eine Build-Version erstellen können. Dies ist eine stark reduzierte Version der gesamten Mammut-Codebibliothek, die eingerichtet wird, wenn Sie eine ziemlich dichte Anwendung haben.

Um diese minimierte und komprimierte Version zu erhalten, können wir unser Terminal und einen sehr nützlichen Befehl verwenden:

$ npm run build

Dadurch wird in Ihrem App-Verzeichnis ein neuer Ordner mit dem Namen build erstellt . Dieser Ordner enthält einige Dateien, die die wichtigsten Bestandteile Ihrer gesamten React-Anwendung sind.

Fazit

Wenn Sie alle Schritte sorgfältig befolgt und ein wenig von der offiziellen Dokumentation gelesen haben, sollte dies alles ein Kinderspiel sein.

Ich persönlich bin der Meinung, dass Firebase die Art und Weise, wie Entwickler Hosting als Service testen und nutzen, bereits revolutioniert hat . Dies ist eine viel einfachere und entspanntere Möglichkeit, Ihre Apps effizient zu hosten, ohne sich mit den Details des Hostings zu befassen.