react-firebase-starter 正在参加 2021 年度 OSC 中国开源项目评选,请投票支持!
react-firebase-starter 在 2021 年度 OSC 中国开源项目评选 中已获得 {{ projectVoteCount }} 票,请投票支持!
2021 年度 OSC 中国开源项目评选 正在火热进行中,快来投票支持你喜欢的开源项目!
2021 年度 OSC 中国开源项目评选 >>> 中场回顾
react-firebase-starter 获得 2021 年度 OSC 中国开源项目评选「最佳人气项目」 !
授权协议 MIT License
开发语言 Java
操作系统 跨平台
软件类型 开源软件
所属分类 大数据数据查询
地区 不详
投 递 者 首席测试
适用人群 未知
收录时间 2021-11-23


React Starter Kit for Firebase   a.k.a. Serverless Edition
Build Status Dependabot Twitter

React Starter Kit for Firebase is a popular project template (aka, boilerplate) for building modern, scalable web applications with React, Relay, and GraphQL using serverless infrastructure provided by Google Cloud (Cloud SQL, Cloud Functions, CDN hosting, and file storage). It allows you to save time and build upon a solid foundation and design patterns.

View online demo (API, data model)  |  Follow us on Twitter  |  Get FREE support on Discord  |  We're hiring!


This project was bootstrapped with React Starter Kit for Firebase by Kriasoft.

Tech Stack

Also, you need to be familiar with HTML, CSS, JavaScript (ES2015) and React.

Directory Layout

├── build/                         # Compiled output
├── migrations/                    # Database schema migration files
├── node_modules/                  # 3rd-party libraries and utilities
├── public/                        # Static files such as favicon.ico etc.
├── scripts/                       # Automation scripts (yarn update-schema etc.)
├── src/                           # Application source code
│   ├── admin/                     # Admin section (Dashboard, User Management etc.)
│   ├── common/                    # Shared React components and HOCs
│   ├── hooks/                     # React.js hooks and Context providers
│   ├── icons/                     # Icon components
│   ├── legal/                     # Terms of Use, Privacy Policy, etc.
│   ├── misc/                      # Other pages (about us, contacts, etc.)
│   ├── mutations/                 # GraphQL mutations to be used on the client
│   ├── news/                      # News section (example)
│   ├── server/                    # Server-side code (API, authentication, etc.)
│   │   ├── mutations/             # GraphQL mutations
│   │   ├── queries/               # The top-level GraphQL query fields
│   │   ├── templates/             # HTML templates for server-side rendering
│   │   ├── types/                 # GraphQL types: User, UserRole, UserIdentity etc.
│   │   ├── api.js                 # GraphQL API middleware
│   │   ├── app.js                 # Express.js application
│   │   ├── config.js              # Configuration settings to be passed to the client
│   │   ├── context.js             # GraphQL context wrapper
│   │   ├── db.js                  # PostgreSQL database client (Knex.js)
│   │   ├── relay.js               # Relay factory method for Node.js environment
│   │   ├── index.js               # Node.js app entry point
│   │   ├── login.js               # Authentication middleware (e.g. /login/facebook)
│   │   ├── schema.js              # GraphQL schema
│   │   └── ssr.js                 # Server-side rendering, e.g. ReactDOMServer.renderToString(<App />)
│   ├── user/                      # User pages (login, account settings, user profile, etc)
│   ├── utils/                     # Utility functions
│   ├── relay.js                   # Relay factory method for browser environment
│   ├── index.js                   # Client-side entry point, e.g. ReactDOM.render(<App />, container)
│   ├── router.js                  # Universal application router
│   ├── serviceWorker.js           # Service worker helper methods
│   └── theme.js                   # Overrides for Material UI default styles
├── ssl/                           # SSL certificates for connecting to Cloud SQL instance
├── .env                           # Environment variables for local development
├── .env.production                # Environment variables for the production build
├── .env.test                      # Environment variables for the test build
├── graphql.schema                 # GraphQL schema (auto-generated, used by Relay)
└── package.json                   # The list of project dependencies + NPM scripts


Getting Started

Just clone the repo, update environment variables in .env and/or .env.local file, and start hacking:

$ git clone MyApp
$ cd MyApp
$ yarn setup                       # Installs dependencies; creates PostgreSQL database
$ yarn start                       # Compile the app and opens it in a browser with "live reload"

Then open http://localhost:3000/ to see your app.

npm start

In order to re-compile GraphQL fragments, run yarn relay or yarn relay --watch (in watch mode).

How to Migrate Database Schema

While the app is in development, you can use a simplified migration workflow by creating a backup of your existing database, making changes to the existing migration file (see migrations/20180101000000_initial.js), re-apply the migration and restore data from the backup file (backup.sql):

$ yarn db-backup --env=dev         # Or, yarn db-backup --env=test
$ yarn db-reset-dev                # Or, yarn db-reset-test

Upon deployment to production, switch to normal migration workflow:

$ yarn db-change <name>            # Create a new database migration file
$ yarn db-migrate --env=dev        # Migrate database to the latest version

HINT: Test your migration thoroughly with a local instance of the DB first (by using --env=local or --env=dev (default) flag) then apply it to your test or prod database instance using --env=test or --env=prod command argument.

Other helpful database scripts:

$ yarn db-version --env=dev        # Print the version number of the last migration
$ yarn db-rollback --env=dev       # Rollback the latest migration
$ yarn db-restore --env=dev        # Restore database from backup.sql
$ yarn db-seed --env=dev           # Seed database with test data
$ yarn db --env=dev                # Open Knex.js REPL shell (type ".exit" for exit)
$ yarn psql --env=dev              # Open PostgreSQL shell (type "\q" for exit)

How to Test

$ yarn lint                        # Check JavaScript and CSS code for potential issues
$ yarn lint-fix                    # Attempt to automatically fix ESLint warnings
$ yarn test                        # Run unit tests. Or, `yarn test -- --watch`

How to Deploy

$ yarn build                       # Build the in production mode (NODE_ENV=production)
$ yarn deploy-test                 # Deploy the app to TEST environment
$ yarn deploy-prod                 # Deploy the app to PROD environment

For more information refer to the Deployment guide in the project's Wiki.

How to Update

If you keep the original Git history after cloning this repo, you can always fetch and merge the recent updates back into your project by running:

$ git remote add rsk
$ git checkout master
$ git fetch rsk
$ git merge rsk/master
$ yarn install

NOTE: Try to merge as soon as the new changes land on the master branch in the upstream repository, otherwise your project may differ too much from the base/upstream repo. Alternatively, you can use a folder diff tool like Beyond Compare for keeping your project up to date with the base repository.



How to Contribute

Anyone and everyone is welcome to contribute to this project. The best way to start is by checking our open issues, submit a new issues or feature request, participate in discussions, upvote or downvote the issues you like or dislike, send pull requests.

Learn React.js and ES6

🎓   React for Beginners and ES6 Training Course by Wes Bos
📗   React: Up & Running: Building Web Applications by Stoyan Stefanov (Aug, 2016)
📗   Getting Started with React by Doel Sengupta and Manu Singhal (Apr, 2016)
📗   You Don't Know JS: ES6 & Beyond by Kyle Simpson (Dec, 2015)

Related Projects

  • React App SDK — Create React App modification that unlocks server-side rendering
  • React Starter Kit — Boilerplate and tooling for building isomorphic web apps with React and Relay
  • Node.js API Starter Kit — Boilerplate and tooling for building data APIs with Docker, Node.js and GraphQL


Copyright © 2015-present Kriasoft. This source code is licensed under the MIT license found in the LICENSE.txt file.

Made with by Konstantin Tarkus (@koistya, blog) and contributors 👋 Get in touch!




{{o.pubDate | formatDate}}


{{parseInt(o.replyCount) | bigNumberTransform}}
{{parseInt(o.viewCount) | bigNumberTransform}}
{{o.pubDate | formatDate}}


{{parseInt(o.replyCount) | bigNumberTransform}}
{{parseInt(o.viewCount) | bigNumberTransform}}
kind-of是一款JavaScript类型检查软件包。 kind-of v6.0.2版本中的index.js文件的‘ctorName’函数存在注入漏洞,攻击者可利用该漏洞覆盖内部属性,操纵类型检查的结果。
CVE-2019-20149 MPS-2019-17164
2022-08-08 18:32
json-bigint 资源管理错误漏洞
json-bigint(json-bigint)是一个基于js语言的json解析库该解析库可以解决前后端传递大数的精度损失问题。 json-bigint npm package 1.0.0 版本之前存在资源管理错误漏洞,攻击者可利用该漏洞导致denial-of-service (DoS)攻击。
CVE-2020-8237 MPS-2020-13314
2022-08-08 18:32
lodash是一款开源的JavaScript实用程序库。 lodash 4.17.15及之前版本中存在输入验证错误漏洞。远程攻击者可借助'merge'、'mergeWith'和'defaultsDeep'函数利用该漏洞在系统上执行任意代码。
CVE-2020-8203 MPS-2020-15679
2022-08-08 18:32
Indutny Elliptic 加密问题漏洞
Indutny Elliptic是Indutny个人开发者的一个基于Javascript为应用提供快速椭圆曲线加密的代码库。 Indutny Elliptic 存在安全漏洞,该漏洞源于没有检查来确认公钥。
CVE-2020-28498 MPS-2021-1176
2022-08-08 18:32
Npm Braces资源管理错误漏洞
Npm Braces是美国Npm公司的一个应用程序。Bash的括号扩展,以JavaScript实现。 Braces 2.3.1之前版本存在安全漏洞,攻击者可利用该漏洞使用正则表达式拒绝服务(ReDoS)攻击。
CVE-2018-1109 MPS-2021-3692
2022-08-08 18:32
nodejs 资源管理错误漏洞
nodejs是是一个基于ChromeV8引擎的JavaScript运行环境通过对Chromev8引擎进行了封装以及使用事件驱动和非阻塞IO的应用让Javascript开发高性能的后台应用成为了可能。 nodejs-glob-parent 存在安全漏洞,该漏洞源于正则表达式拒绝服务。
CVE-2020-28469 MPS-2021-7827
2022-08-08 18:32
Sindre Sorhus IS-SVG 安全漏洞
Sindre Sorhus is-svg是 (Sindre Sorhus)开源的一个应用软件。提供检查字符串或缓冲区是否为SVG功能。 IS-SVG 存在安全漏洞,该漏洞源于当应用程序检查一个精心制作的无效SVG字符串时,就会出现正则表达式拒绝服务(ReDOS)。
CVE-2021-29059 MPS-2021-8684
2022-08-08 18:32
js-yaml 存在代码注入漏洞
js-yaml 是一种人性化的数据序列化语言。此软件包的受影响版本容易受到任意代码执行的影响。
2022-08-08 18:32
Digital Bazaar Forge 数据伪造问题漏洞
Digital Bazaar Forge是美国Digital Bazaar公司的一个 Tls 在 Javascript 中的本机实现以及用于编写基于加密和网络密集型 Web 应用程序的开源工具。 Forge 1.3.0 版本之前 RSA PKCS 存在数据伪造问题漏洞,该漏洞源于 RSA PKCS 签名验证码对摘要算法结构的检查较为宽松。攻击者可以通过精心设计的结构窃取填充字节并在使用低公共指数时使用 PKCS#1 编码消息的未检查部分来伪造签名。
CVE-2022-24771 MPS-2022-3738
2022-08-08 18:32
SockJS 输入验证错误漏洞
SockJS是一款浏览器JavaScript库。 SockJS 0.3.20之前版本中存在安全漏洞,该漏洞源于程序没有正确处理Upgrade标头。攻击者可利用该漏洞导致托管sockjs应用程序的容器崩溃。
CVE-2020-7693 MPS-2020-10001
2022-08-08 18:32
Immer 安全漏洞
Immer是Immer社区的一个基于Javascript的状态管理库。。 immer 9.0.6之前版本存在安全漏洞,该漏洞源于当path参数中使用的用户提供的密钥是数组时,可能导致绕过CVE-2020-28477。
CVE-2021-23436 MPS-2021-19475
2022-08-08 18:32
shell-quote 安全漏洞
shell-quote是开源的一个软件包。用于解析和引用 shell 命令。 shell-quote package存在安全漏洞,攻击者可利用该漏洞可以植入任意代码从而执行相关操作。
CVE-2021-42740 MPS-2021-34136
2022-08-08 18:32
handlebars 安全漏洞
handlebars是一款语义化的Web模板系统。 handlebars 4.7.7版本之前存在安全漏洞,该漏洞源于在选择某些编译选项来编译来自不受信任的源的模板时,handlebars容易受到远程代码执行(Remote Code Execution, RCE)的攻击。
CVE-2021-23369 MPS-2021-4548
2022-08-08 18:32
merge-deep 安全漏洞
merge-deep是开源的一个工具。用于递归合并 JavaScript 对象中的值。 merge-deep 3.0.3之前存在安全漏洞,该漏洞源于merge-deep库可能会被欺骗到覆盖Object的属性,merge-deep库可能会被欺骗到覆盖Object的属性。、
CVE-2021-26707 MPS-2021-7924
2022-08-08 18:32
validator 存在拒绝服务漏洞
验证器是一个字符串验证器和消毒器库。此软件包的受影响版本通过 isSlug 函数容易受到正则表达式拒绝服务 (ReDoS) 的攻击。
2022-08-08 18:32
Google Firebase Js Sdk原型污染漏洞
Google Firebase Js Sdk是美国谷歌(Google)公司的一个用于连接Firebase后端服务的客户端代码库。firebase/util 0.3.4之前版本存在原型污染漏洞,该漏洞源于DeepCopy.ts中的deepExtend函数。攻击者可利用该漏洞可以覆盖和污染程序的对象原型。
CVE-2020-7765 MPS-2020-16553
2022-08-08 18:32
Digital Bazaar Forge 输入验证错误漏洞
Digital Bazaar Forge是美国Digital Bazaar公司的一个 Tls 在 Javascript 中的本机实现以及用于编写基于加密和网络密集型 Web 应用程序的开源工具。 Digital Bazaar Forge 中存在输入验证错误漏洞,该漏洞源于产品允许URL重定向到不受信任的站点。
CVE-2022-0122 MPS-2022-0421
2022-08-08 18:32
pathval 输入验证错误漏洞
pathval是Chai.js团队的一个用于基于 String 字符串来检索和设置对象的 Npm 代码库 pathval 1.1.1之前版本存在输入验证错误漏洞。该漏洞源于网络系统或产品未对输入的数据进行正确的验证。
CVE-2020-7751 MPS-2020-15246
2022-08-08 18:32
lodash 命令注入漏洞
lodash是一个提供模块化、性能和附加功能的现代 JavaScript 实用程序库。 4.17.21 之前的 Lodash 版本容易通过模板函数进行命令注入。
CVE-2021-23337 MPS-2021-2638
2022-08-08 18:32
Digital Bazaar Forge数据伪造问题漏洞
Digital Bazaar Forge是美国Digital Bazaar公司的一个Tls在Javascript中的本机实现以及用于编写基于加密和网络密集型Web应用程序的开源工具。Digital Bazaar Forge1.3.0之前版本存在数据伪造问题漏洞,该漏洞源于SA PKCS#1 v1.5签名验证码无法正确检查DigestInfo以获得正确的 ASN.1 结构。攻击者可以发送特殊的签名利用该漏洞以验证包含无效结构但有效摘要的签名。
CVE-2022-24773 MPS-2022-3740
2022-08-08 18:32
0 评论
0 收藏