July 10, 2018

Firebase Hosting

Firebase gibt uns Werkzeuge an die Hand, um qualitativ hochwertige Anwendungen zu entwickeln, unsere User Base zu vergrößern und unsere Applikation zu monetarisieren mit Werbeanzeigen.

Um unsere Applikation zu bauen, können wir beispielsweise folgende Firebase Werkzeuge nutzen:

Google Cloud Funktionen
Real-time-Datenbank
Firebase Auth, um unsere Nutzer zu identifizieren und Social Logins zu unserer Applikation hinzuzufügen
Firebase Hosting,um statische Webseiten zu hosten

Um die Qualität unserer Applikation zu verbessern stehen folgende Werkzeuge zur Verfügung:

Test Lab mit dem man die Funktionwsweise und Erscheinung der Anwendung auf verschiedenen Endgeräten testen kann
Crashlytics
Performance Monitoring

Um unseren Kundenstamm zu erweitern stehen darüber hinaus auch Tools zur Verfügung wie beispielsweise A/B Testing oder App Referrals.

Wir konzentrieren uns aber im Folgenden auf Firebase Hosting. Wenn ihr mehr über die anderen Firebase Produkte wissen wollt, besucht einfach die Firebase Webseite.

Wir nutzen Firebase, weil wir nicht unseren eigenen Server verwenden wollen und es eine kostenfreie Möglichkeit ist, unsere Webseiten zu hosten (neben anderen Möglichkeiten wie beispielsweise Github Pages https://pages.github.com/).

Firebase Hosting: Getting started

1 Um die Firebase Command Line Interface (CLI) zu installieren, musst du dich zunächst für den Account bei Firebase anmelden. Hier ist der Link zu Firebase

2 Dann musst du Node.js und npm installieren. Zu beachten ist, dass bei der Installation von Node.js auch npm installiert wird, Du Dich darum also nicht kümmern musst. Hier ist der Link für die Node JS Installation . Nutze die neueste Version von NodeJS. Nach der Installation gehe in dein Terminal/Eingabeaufforderung und schreibe npm. Wenn die Installation erfolgreich war, sollte die Version erscheinen.

Navigiere mit dem Terminal/Eingabeaufforderung in Deinen Projektordner (Tipps hierzu unter für Windows und unter für Mac)

3 Du befindest Dich in Deinem Projektordner. Jetzt können wir die Firebase CLI mit Hilfe von npm installieren. In dem Terminal /Eingabeaufforderung gebe ein: npm install -g firebase-tools

4 Erstelle einen Google Account und logge Dich in Deinem Terminal /Eingabeaufforderung in Firebase ein mit dem Befehl firebase login

5 Jetzt wechsle wieder in den Browser und gehe zu www.firebase.com und logge Dich auch dort ein.

6 Klicke auf “Projekt hinzufügen”

7 Wechsle wieder in das Terminal/Eingabeaufforderung und gebe ein firebase init. Später selektiere hosting durch drücken der Leertaste bei Database um Database zu entselektieren und dann Enter bei Hosting (nutze die Pfeiltasten zum navigieren).

8 Anschliessend musst Du das Projekt auswählen, für das Du die Webseite einrichten möchtest

9 Dann wählst Du den Ordner aus, der deine statische Seite enthält. Wähle den default “Public” durch clicken von Enter

10 Anworte “N” auf die Frage nach einer Single-Page-App

11 Good to go! Firebase hat jetzt einen Public Ordner in Deinem Projektordner erstellt mit zwei Dateien: index.html und 404.html

12 Tausche Deine eigene index.html mit der von Firebase erstellten aus

13 In Deinem Terminal /Eingabeaufforderung gebe firebase deploy ein, um deine Webseite live zu stellen. Die URL wird dir in dem Dialog kommuniziert.

14 Eine Anleitung für deine eigene Webadresse findest Du hier

By Anja Schumann