Anwendung zur Verwaltung von Firebase -Anwendungen. Beinhaltet die Unterstützung mehrerer Umgebungen und Datenmigrationen
bald kommen
Möchten Sie eine Funktion oder einen Beitrag hinzufügen? Bitte öffnen Sie ein Problem!
Da es sich um Quellcode handelt, ist ein großartiger Ort, um die gehostete Version von FireaDmin bei FireaDmin.io zu überprüfen.
Während der Entwicklung werden Sie sich wahrscheinlich hauptsächlich auf npm start
verlassen. Es gibt jedoch zusätzliche Skripte zur Verfügung:
yarn <script> | Beschreibung |
---|---|
start | Dient Ihrer App bei localhost:3000 |
start:dist | Baut die Anwendung auf ./dist und serviert sie bei localhost:3000 mit firebase serve |
functions:start | Führt Funktionen aus firebase functions:shell |
functions:build | Erstellt Cloud -Funktionen auf ./functions/dist |
functions:test | Führt Funktionen mit Mokka Funktionen aus. |
build | Baut die Anwendung auf ./dist auf |
test | Läuft E2E -Tests mit Zypressen. Siehe Tests |
lint | Findet das Projekt für potenzielle Fehler fest |
lint:fix | Findet das Projekt ab und behebt alle korrigierbaren Fehler |
Husky wird verwendet, um prepush
-Hakenfunktion zu ermöglichen. Das prepush
-Skript läuft derzeit eslint
, das Sie davon abhält, zu drücken, wenn sich in Ihrem Code ein FINT befindet. Wenn Sie dies deaktivieren möchten, entfernen Sie das prepush
-Skript aus dem package.json
.
├── .github # Github Settings + Github Actions Workflows
│ ├── deploy.yml # Deploy workflow (called on merges to "master" and "production" branches)
│ └── verify.yml # Verify workflow (run when PR is created)
├── cypress # UI Integration Tests
├── docs # Docs application (built with Gatsby)
│ ├── content # Content of docs (written in markdown)
│ ├── components # React components used in docs app
│ ├── gatsby-config.js # Gatsby plugin settings
│ └── gatsby-node.js # Gatsby node definitions (how templates are combined with content)
│ └── package.json # Docs package file (docs specific dependencies)
├── functions # Cloud Functions (uses Cloud Functions for Firebase)
│ ├── src # Cloud Functions Source code (each folder represents a function)
│ └── index.js # Functions entry point
├── public # Public assets
│ ├── favicon.ico # Favicon
│ ├── firebase-messaging.sw.js # Messaging Service worker (loaded by Firebase SDK)
│ └── index.html # Main HTML page container for app
├── src # Application source code
│ ├── components # Global Reusable Presentational Components
│ ├── containers # Global Reusable Container Components
│ ├── layouts # Components that dictate major page structure
│ │ └── CoreLayout # Global application layout in which to render routes
│ ├── routes # Main route definitions and async split points
│ │ ├── index.js # Bootstrap main application routes with store
│ │ └── Home # Fractal route
│ │ ├── index.js # Route definitions and async split points
│ │ ├── assets # Assets required to render components
│ │ ├── components # Presentational React Components
│ │ ├── modules # Collections of reducers/constants/actions
│ │ └── routes ** # Fractal sub-routes (** optional)
│ ├── static # Static assets
│ └── utils # Application-wide utils (form validation etc)
├── .firebaserc # Firebase project settings (including settings for CI deployment)
├── cypress.json # Cypress Integration Test settings
├── database.rules.json # Firebase Real Time Database Rules
├── firebase.json # Firebase resource settings (including which folders are deployed)
├── firestore.indexes.json # Firestore Indexes
├── firestore.rules # Firestore Database Rules
└── storage.rules # Cloud Storage Rules
^10.18.0
(Knoten 10 vorgeschlagen, um die Laufzeit der neuesten Cloud -Funktionen zu entsprechen)npm i -g firebase-tools
Installieren Sie Abhängigkeiten: yarn install
Erstellen Sie eine Web -App in der Firebase -Konsole Ihres Projekts (Konfiguration wird im nächsten Schritt verwendet)
Erstellen Sie ein .env.local
mit dem folgenden Format (mit Ihren Werten aus dem vorherigen Schritt ausgefüllt):
REACT_APP_FIREBASE_apiKey= < - api key - >
REACT_APP_FIREBASE_authDomain= < - auth domain - >
REACT_APP_FIREBASE_databaseURL= < - database URL - >
REACT_APP_FIREBASE_projectId= < - project ID - >
REACT_APP_FIREBASE_storageBucket= < - storageBucket - >
REACT_APP_FIREBASE_messagingSenderId= < - message sender ID - >
REACT_APP_FIREBASE_appId= < - project app id - >
REACT_APP_FIREBASE_PUBLIC_VAPID_KEY= < - project app id - >
REACT_APP_ALGOLIA_APP_ID= < - - >
REACT_APP_ALGOLIA_API_KEY= < - - >
Erstellen Sie functions/.runtimeconfig.json
-Datei, die so aussieht:
{
"algolia" : {
"api_key" : " <- your API KEY -> " ,
"app_id" : " <- your Algolia APP ID -> "
},
"gmail" : {
"email" : " <- gmail account for sending invite emails -> " ,
"password" : " <- password for ^ email -> "
},
"encryption" : {
"password" : " <- your own made up encryption password for service accounts -> "
}
}
Setzen Sie Funktionen Konfigurationsvariablen so, dass sie der gerade erstellten Datei übereinstimmen (für die bereitgestellte Version Ihrer Funktionen):
firebase functions:config:set $( jq -r ' to_entries[] | [.key, (.value | tojson)] | join("=") ' < functions/.runtimeconfig.json )
Bauprojekt: yarn build
Bereitstellung in Firebase: firebase deploy
(Bereitstellen, Cloud -Funktionen, Regeln und Hosting)
Start Development Server: npm start
Hinweis: Sie können auch yarn start:dist
um zu testen, wie Ihre Anwendung funktioniert, wenn Sie in Firebase bereitgestellt werden
Zeigen Sie die bereitgestellte Version der Website an, indem Sie firebase open hosting:site
ausführen
Hinweis : Konfiguration dafür befindet sich innerhalb von .github/workflows/app-deploy.yml
. firebase-ci
wurde hinzugefügt, um den CI-Bereitstellungsprozess zu vereinfachen, indem Einstellungen aus dem .firebaserc
abgerufen werden. Alles, was erforderlich ist, ist die Authentifizierung mit Firebase:
Haben Sie mindestens zwei Firebase -Projekte zur Verwendung, eine für jede Umgebung (Staging und Produktion)
Ersetzen Sie Informationen innerhalb von .firebaserc
sowohl im Rahmen der Abschnitte projects
, ci
als auch targets
Login: firebase login:ci
um ein Authentifizierungs -Token zu generieren. Dieses Token wird verwendet, um dem CI -Anbieter die Rechte zur Bereitstellung in Ihrem Namen zu geben. Einstellungen für GitLab sind Einstellungen bereitgestellt, aber jeder CI -Anbieter kann verwendet werden.
Stellen Sie die Umgebungsvariable FIREBASE_TOKEN
in GitHub -Aktionen Secrets fest
Fügen Sie den Variablen von GitHub -Aktionen die folgenden Umgebungsvariablen hinzu (innerhalb /settings/ci_cd
):
FIREBASE_TOKEN ; // Used to deploy to Firebase (token generated in last step)
CYPRESS_RECORD_KEY ; // Record key for Cypress Dashboard
SERVICE_ACCOUNT ; // Used to authenticate with database to run hosted tests
Führen Sie einen Build auf Github -Aktionen aus, indem Sie den Code in Ihre Git -Fernbedienung drücken (höchstwahrscheinlich GitHub)
Weitere Optionen für die CI-Einstellungen finden Sie in den Firebase-CI-Dokumenten.
yarn build
firebase deploy
HINWEIS: Sie können firebase serve
um zu testen, wie Ihre Anwendung bei der Bereitstellung in Firebase funktioniert. Stellen Sie jedoch sicher, dass Sie zuerst yarn build
ausführen.Die Dokumentation ist bei FireaDmin.io/docs erhältlich
Alle Quellcode und Inhalte für DOCS finden Sie im Ordner docs
. Dokumente werden von Markdown in statische Dateien generiert, indem sie Gatsby basierend auf Einstellungen in gatsby-config.js
basieren.
Besuchen Sie die Docs Readme, um weitere Informationen zu erhalten.
Hinweis : Wenn Sie die CI -Bereitstellung einrichten, können E2E -Tests und Unit -Tests vor dem Ausführen des Produktionsbaues automatisch mit Ihrer Staging -Umgebung ausgeführt werden.
Cloud -Funktionen Unit -Tests werden in Mokka geschrieben, wobei von Istanbul erzeugt wird. Diese Tests decken "Backend -Funktionalität" ab, die von Cloud -Funktionen behandelt werden, indem die Funktionen für Funktionen gestoppt werden (einschließlich Abhängigkeiten).
cd functions
npm i
npm test
yarn test:cov
End -to -End -Tests werden mit Cypress durchgeführt und leben im cypress
. Diese Tests decken die UI -Funktionalität ab und werden direkt in der gehosteten Umgebung von FireaDmin ausgeführt. Anwendungsend -End -Tests werden automatisch in GitHub -Aktionen ausgeführt, die nach der Bereitstellung in der Staging -Umgebung vor der Bereitstellung zur Produktion.
Erstellen Sie ein Servicekonto innerhalb der Firebase -Konsole
Speichern Sie das Servicekonto als serviceAccount.json
innerhalb der Wurzel des Projekts
Holen Sie sich die UID des Benutzer
Erstellen Sie cypress.env.json
mit dem folgenden Format:
{
"TEST_UID" : " <- user account's UID -> "
}
Rennen Sie yarn emulators
. Dadurch wird die Emulatoren gestartet (auf die während des Tests hingewiesen)
In einem anderen terminalen Yun yarn start:emulate
. Dadurch wird die Anwendung auf die Emulatoren angezeigt
Führen Sie in einer anderen Registerkarte Anschluss yarn test:emulate:run
. Dadurch werden Cypress -Integrationstests durchgeführt, die auf Emulatoren gerichtet sind (zum Aussaat und zur Überprüfung)
Um die lokale Testläufer -Benutzeroberfläche von Cypress zu öffnen, bei der Sie einzelne Tests oder alle Tests ausführen können, verwenden Sie yarn test:emulate
.
12
statt einer neueren Version? Die Laufzeit von Cloud -Funktionen unterstützt bis zu 12
, weshalb dies für die CI -Build -Version verwendet wird. Dies wird umgeschaltet, wenn die Laufzeit der Funktionen aktualisiert wird