管理壁炉应用程序的申请。包括对多种环境和数据迁移的支持
即将推出
有兴趣添加功能还是贡献?请打开一个问题!
由于这是源代码,因此一个很好的起点是在Fireadmin.io上检查托管版的Fireadmin。
在开发过程中,您可能主要依靠npm start
;但是,您可以使用其他脚本:
yarn <script> | 描述 |
---|---|
start | 在localhost:3000 |
start:dist | 构建到./dist localhost:3000 firebase serve |
functions:start | 在本地运行功能depp(使用firebase functions:shell |
functions:build | 将云功能构建为./functions/dist |
functions:test | 运行摩卡咖啡的功能单元测试 |
build | 将应用程序构建为./dist |
test | 使用柏树运行E2E测试。参见测试 |
lint | 绒毛可能会出现潜在错误 |
lint:fix | 棉绒项目并修复所有可更正错误 |
沙哑用于启用prepush
能力。当前, prepush
脚本运行eslint
,如果您的代码中有任何棉布,这将使您无法推动。如果您想禁用此功能,请从package.json
中删除prepush
脚本。
├── .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
(建议的10个节点10是为了匹配最新的云功能运行时)npm i -g firebase-tools
安装依赖项: yarn install
在您的项目的Firebase控制台内创建Web应用程序(配置将在下一步中使用)
创建一个.env.local
,该局部具有以下格式(您的值填充了上一步):
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= < - - >
创建functions/.runtimeconfig.json
文件,看起来像:
{
"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 -> "
}
}
设置函数配置变量以匹配您刚刚制作的文件(用于函数的部署版本):
firebase functions:config:set $( jq -r ' to_entries[] | [.key, (.value | tojson)] | join("=") ' < functions/.runtimeconfig.json )
构建项目: yarn build
部署到firebase: firebase deploy
(部署,云功能,规则和托管)
启动开发服务器: npm start
注:您也可以使用yarn start:dist
来测试您的应用程序在部署到Firebase时的工作方式
通过运行firebase open hosting:site
注意:为此,配置位于.github/workflows/app-deploy.yml
中。添加了firebase-ci
来通过从.firebaserc
获得设置来简化CI部署过程。所需要的只是为firebase提供身份验证:
至少有两个壁炉项目准备使用,一个用于每个环境(分期和生产)
在两个projects
, ci
和targets
部分中替换.firebaserc
中的信息
登录: firebase login:ci
生成身份验证令牌。该令牌将用于赋予CI提供者的权利代表您部署。为GitLab提供了设置,但是可以使用任何CI提供商。
将FIREBASE_TOKEN
环境变量设置在github操作中
将以下环境变量添加到GitHub Actions的变量(在/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
通过将代码推向git遥控器(很可能是github),在github操作上运行构建
有关CI设置上的更多选项,请查看Firebase-CI文档。
yarn build
firebase deploy
注:您可以使用firebase serve
来测试您的应用程序在部署到firebase时的工作方式,但请确保先运行yarn build
。文档可在fireadmin.io/docs获得
所有文档的源代码和内容都位于docs
文件夹中。文档是根据gatsby-config.js
中的设置使用gatsby生成静态文件的。
请访问DOCS README以获取更多信息。
注意:如果您进行了设置CI部署,则在运行生产构建之前,E2E测试和单元测试可以自动违反分期环境。
云功能单元测试用摩卡咖啡编写,并由伊斯坦布尔生成的代码覆盖范围编写。这些测试涵盖了通过将功能环境(包括依赖性)固定来处理的“后端功能”。
cd functions
npm i
npm test
yarn test:cov
端到端测试是使用柏树完成的,它们生活在cypress
文件夹中。这些测试涵盖了UI功能,并直接在Fireadmin的托管环境上运行。应用程序到最终测试将在GitHub操作中自动运行,然后部署到分期登台环境之前,然后部署到生产之前。
在Firebase控制台内创建服务帐户
将服务帐户作为serviceAccount.json
保存在项目的根源中
从Firebase Console的“身份验证”选项卡进行测试时,请获取要使用的用户的UID
创建具有以下格式的cypress.env.json
:
{
"TEST_UID" : " <- user account's UID -> "
}
运行yarn emulators
。这将启动模拟器(在测试期间指向)
在不同的终端Yun yarn start:emulate
。这将启动指向模拟器的应用程序
在不同的终端选项卡中,运行yarn test:emulate:run
。这将运行指向仿真器的柏树集成测试(用于播种和验证)
要打开Cypress的本地测试跑者UI,您可以在其中运行单个测试或所有测试使用yarn test:emulate
。
12
而不是较新版本?云功能运行时最多支持12
,这就是为什么这是CI构建版本使用的原因。当功能运行时更新时,此功能将被切换