React Starter Kit for Firebase a.k.a. Serverless Edition
React Starter Kit for Firebase is a popular project template (aka, boilerplate) for buildingmodern, scalable web applications with React, Relay, and GraphQL using serverless infrastructureprovided by Google Cloud (Cloud SQL, Cloud Functions, CDNhosting, and file storage). It allows you to save time and build upon a solid foundation anddesign 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
- Create React App (★ 73k) for development and test infrastructure (see user guide)
- Material UI (★ 52k) to reduce development time by integrating Google's Material Design
- Passport.js (★ 17k) for authentication configured with stateless JWT tokens for sessions
- GraphQL.js (★ 15k) and Relay (★ 14k) for declarative data fetching and efficient client stage management
- Universal Router (★ 1k) + history (★ 6k) for declarative routing and client-side navigation optimized for Relay
- PostgreSQL database pre-configured with a query builder and migrations using Knex.js (★ 11k)
- Google Cloud & Firebase for serverless architecture - Cloud SQL, Cloud Functions, CDN hosting, file storage (docs)
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
Prerequisites
- Node.js v10.15 or higher + Yarn v1.17 or higher (HINT: On Mac installthem via Brew)
- VS Code editor (preferred) + Project Snippets, EditorConfig,ESLint, Prettier, and Babel JavaScript plug-ins
- Watchman file watcher used by Relay Modern
- PostgreSQL v9.6 or newer, only if you're planning to use a local db for development
Getting Started
Just clone the repo, update environment variables in .env and/or .env.local file, and starthacking:
$ git clone https://github.com/kriasoft/react-firebase-starter.git 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.
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 bycreating a backup of your existing database, making changes to the existingmigration file (see migrations/20180101000000_initial.js), re-apply themigration 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 yourtest or prod database instance using --env=test or --env=prod commandargument.
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 Deploymentguide in the project's Wiki.
How to Update
If you keep the original Git history after cloning this repo, you can always fetch and mergethe recent updates back into your project by running:
$ git remote add rsk https://github.com/kriasoft/react-firebase-starter.git
$ 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 upstreamrepository, 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 projectup to date with the base repository.
Backers
How to Contribute
Anyone and everyone is welcome to contribute to this project. The best way tostart is by checking our open issues,submit a new issues orfeature request,participate in discussions, upvote or downvote the issues you like or dislike, send pullrequests.
Learn React.js and ES6
Related Projects
- React App SDK — Create React App modification thatunlocks server-side rendering
- React Starter Kit — Boilerplate and tooling forbuilding isomorphic web apps with React and Relay
- Node.js API Starter Kit — Boilerplate andtooling for building data APIs with Docker, Node.js and GraphQL
License
Copyright © 2015-present Kriasoft. This source code is licensed under the MIT license found inthe LICENSE.txt file.
Made with
-
通知简介 React Native Firebase的通知模块支持远程（FCM）和本地通知。 远程通知 Firebase云消息传递（FCM）允许您的应用程序远程显示通知。为了使事情变得简单易懂，我们将React Native Firebase功能明确划分为仅限数据和通知消息。 远程通知： 用于在设备上显示可见通知。 包含可选的数据有效负载（键/值对的映射），供应用程序使用（如果它位于前台），或者随
-
In this tutorial, we are going to build a React Native app that is integrated with a Firebase backend. The app will support both the React Native CLI as well as Expo CLI. 在本教程中，我们将构建一个与Firebase后端集成的Re
-
by Nazare Emanuel Ioan 由Nazare Emanuel Ioan 如何将React Design System与Firebase和Redux连接 (How to connect a React Design System with Firebase and Redux) After almost two years of working with ReactJS at Cre
-
ios集成firebase by Ryan Gordon 通过瑞安·戈登(Ryan Gordon) 如何使用Firebase将Google Login集成到Ionic应用程序中 (How to integrate Google Login into an Ionic app with Firebase) A lot of apps these days need to maintain some
-
React Native Firebase React Native Firebase is a collection of official React Native modules connecting you to Firebase services; each module is a light-weight JavaScript layer connecting you to the n
-
React Firebase Admin ⚛️ �� Boilerplate with React ⚛️ and Firebase �� designed to quickly spin up a fully functional admin dashboard with authentication, authorization, Realtime Database / Firestore, b
-
Firebase 3.0 Starter using React Redux This is a Firebase 3.0 start using React and Redux. It uses the latest version of libraries, including the brand new React Hot Loader (still beta) Stack React Re
-
DEPRECATED. This project is not maintained anymore. Starter For Firebase, React Native, Redux Applications With 100% Of Code In Common Between IOS And Android, with built In Authentication, Crud Examp
-
嗨，我想问一个关于React native notifications的问题。我有一个可以显示许多youtube播放列表的应用程序，我想在播放列表中添加新视频时启用推送通知。如果我使用OneSignal或Firebase作为通知是否更好？谢谢
-
今天，我使用“React-Native-Firebase”和“Native-Base”包创建了一个（空的）Android应用程序。它在调试模式下工作，但在释放模式下发生崩溃。 重现问题的步骤： > 创建新应用程序