fireadmin
v0.10.2
Application pour gérer les applications Firebase. Comprend la prise en charge de plusieurs environnements et migrations de données
à venir
Vous souhaitez ajouter une fonctionnalité ou une contribution? Veuillez ouvrir un problème!
Comme il s'agit du code source, un excellent point de départ est de vérifier la version hébergée de FirEadmin disponible sur FirEadmin.io.
En développant, vous comptez probablement principalement sur npm start ; Cependant, il y a des scripts supplémentaires à votre disposition:
yarn <script> | Description |
|---|---|
start | Sert votre application chez localhost:3000 |
start:dist | Construit l'application à ./dist et le sert chez localhost:3000 à l'aide de firebase serve |
functions:start | Exécute les fonctions REPLORALLE (utilise firebase functions:shell |
functions:build | Construit des fonctions de cloud sur ./functions/dist |
functions:test | Exécute des tests d'unité de fonctions avec mocha |
build | Construit l'application sur ./dist |
test | Effectue des tests E2E avec Cypress. Voir les tests |
lint | Lint le projet pour des erreurs potentielles |
lint:fix | Lint le projet et corrige toutes les erreurs corrigées |
Husky est utilisé pour permettre la capacité de crochet prepush . Le script prepush exécute actuellement eslint , ce qui vous empêchera de pousser en cas de peluche dans votre code. Si vous souhaitez désactiver cela, supprimez le script prepush de 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 (Node 10 suggéré afin de correspondre à l'exécution des fonctions de cloud les plus récentes)npm i -g firebase-tools Installation des dépendances: yarn install
Créer une application Web dans la console Firebase de votre projet (la configuration sera utilisée à l'étape suivante)
Créez un .env.local qui a le format suivant (avec vos valeurs remplies à partir de l'étape précédente):
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= < - - > Créer functions/.runtimeconfig.json Fichier qui ressemble à:
{
"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 -> "
}
}Définir les variables de configuration des fonctions pour correspondre au fichier que vous venez de faire (pour la version déployée de vos fonctions):
firebase functions:config:set $( jq -r ' to_entries[] | [.key, (.value | tojson)] | join("=") ' < functions/.runtimeconfig.json ) Projet de construction: yarn build
Déployer sur Firebase: firebase deploy (déploie, fonctions cloud, règles et hébergement)
SERVICE DE DÉVELOPPEMENT: npm start Remarque: Vous pouvez également utiliser yarn start:dist pour tester le fonctionnement de votre application lorsque vous êtes déployé sur Firebase
Afficher la version déployée du site en exécutant firebase open hosting:site
Remarque : la configuration est située dans .github/workflows/app-deploy.yml . firebase-ci a été ajouté pour simplifier le processus de déploiement CI en obtenant des paramètres à partir du .firebaserc . Tout ce qui est nécessaire est de fournir une authentification avec Firebase:
Avoir au moins deux projets de base de feu à l'emploi, un pour chaque environnement (mise en scène et production)
Remplacer les informations dans .firebaserc dans les deux projects , ci , et targets des sections
Connexion: firebase login:ci pour générer un jeton d'authentification. Ce jeton sera utilisé pour donner le droit du fournisseur CI de déployer en votre nom. Des paramètres sont fournis pour Gitlab, mais tout fournisseur CI peut être utilisé.
Définir la variable d'environnement FIREBASE_TOKEN dans GitHub Actions Secrets
Ajoutez les variables d'environnement suivantes aux variables de GitHub Actions (dans /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 testsExécutez une construction sur les actions GitHub en poussant le code vers votre télécommande Git (très probablement GitHub)
Pour plus d'options sur les paramètres CI, consultez les documents Firebase-CI.
yarn buildfirebase deploy Remarque: Vous pouvez utiliser firebase serve pour tester le fonctionnement de votre application lors du déploiement sur Firebase, mais assurez-vous d'exécuter d'abord yarn build .La documentation est disponible sur fireadmin.io/docs
Tout le code source et le contenu de DOCS se trouvent dans le dossier docs . Les documents sont générés à partir de Markdown dans des fichiers statiques à l'aide de GATSBY en fonction des paramètres de gatsby-config.js .
Visitez le Docs Readme pour plus d'informations.
Remarque : Si vous avez la configuration du déploiement CI, les tests E2E et les tests unitaires peuvent fonctionner automatiquement par rapport à votre environnement de stadification avant d'exécuter la construction de production.
Les tests d'unité de fonctions de cloud sont écrits en moka avec couverture de code générée par Istanbul. Ces tests couvrent les "fonctionnalités backend" gérées par les fonctions de cloud en décrochant l'environnement des fonctions (y compris les dépendances).
cd functionsnpm inpm testyarn test:cov Les tests de bout en bout sont effectués à l'aide de Cypress et vivent dans le dossier cypress . Ces tests couvrent les fonctionnalités de l'interface utilisateur et sont exécutés directement sur l'environnement hébergé de FirEadmin. Les tests de bout en bout sont exécutés automatiquement dans les actions GitHub, après le déploiement dans l'environnement de stadification avant de se déployer en production.
Créer un compte de service dans la console Firebase
Enregistrez le compte de service en tant que serviceAccount.json dans la racine du projet
Obtenez l'UID de l'utilisateur que vous souhaitez utiliser lors des tests à partir de l'onglet Authentification de la console Firebase
Créez cypress.env.json avec le format suivant:
{
"TEST_UID" : " <- user account's UID -> "
} Exécutez yarn emulators . Cela démarrera les émulateurs (pointés pendant les tests)
Dans un autre terminal, yarn start:emulate . Cela va démarrer l'application pointée des émulateurs
Dans un onglet de terminal différent, exécutez yarn test:emulate:run . Cela exécutera des tests d'intégration de cyprès pointés sur les émulateurs (pour l'ensemencement et la vérification)
Pour ouvrir l'interface utilisateur locale de test local de Cypress où vous pouvez exécuter des tests uniques ou tous les tests utilisent yarn test:emulate .
12 au lieu d'une version plus récente? Cloud Fonctions Runtime prend en charge jusqu'à 12 , c'est pourquoi c'est ce qui est utilisé pour la version CI Build. Cela sera commuté lorsque l'exécution des fonctions sera mise à jour
