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.
- Create React App (★ 55k) for development and test infrastructure (see user guide)
- Material UI (★ 40k) to reduce development time by integrating Google's Material Design
- Passport.js (★ 14k) for authentication configured with stateless JWT tokens for sessions
- GraphQL.js (★ 11k) and Relay (★ 11k) for declarative data fetching and efficient client stage management
- Universal Router (★ 1k) + history (★ 3k) for declarative routing and client-side navigation optimized for Relay
- PostgreSQL database pre-configured with a query builder and migrations using Knex.js (★ 6k)
- Google Cloud & Firebase for serverless architecture - Cloud SQL, Cloud Functions, CDN hosting, file storage (docs)
├── 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.) ├── seeds/ # Reference and seed data for the database ├── src/ # Application source code │ ├── admin/ # Admin section (Dashboard, User Management etc.) │ ├── common/ # Shared React components and HOCs │ ├── icons/ # Icon components │ ├── news/ # News section (example) │ ├── pages/ # Static pages (landing, about, privacy, etc.) │ ├── server/ # Server-side code (API, authentication, etc.) │ │ ├── db/ # Database client │ │ ├── story/ # Story related schema, queries, and mutations │ │ ├── templates/ # HTML templates for server-side rendering │ │ ├── user/ # User related schema, queries, and mutations │ │ ├── api.js # GraphQL API middleware │ │ ├── Context.js # GraphQL context wrapper │ │ ├── createRelay.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) │ ├── createRelay.js # Relay factory method for browser envrironment │ ├── 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 ├── .env.local # Local (development) overrides ├── graphql.schema # GraphQL schema (auto-generated, used by Relay) └── package.json # The list of project dependencies + NPM scripts
- Node.js v8.11 or higher + Yarn v1.6 or higher (HINT: On Mac install them via Brew)
- Watchman file watcher used by Relay Modern
- PostgreSQL v9.6 or newer, only if you're planning to use a local db for development
Just clone the repo, update environment variables in
.env.local file, and start
$ 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.
How to Migrate Database Schema
$ yarn db-change # Create a new database migration file $ yarn db-migrate # Migrate database to the latest version $ yarn db-rollback # Rollback the latest migration $ yarn db-save # Save data from database to JSON files $ yarn db-seed # Seed database with previously saved data $ yarn db # Open PostgreSQL shell (for testing/debugging)
--env=production flag to any of the commands above will force it to use
database connection settings from
How to Test
How to Deploy
- Create a new Google Cloud project and Cloud SQL database.
- Configure authentication in Firebase dashboard.
- Set Firebase project ID in
- Set API keys, secrets and other settings in
- Migrate the database by running
NODE_ENV=production yarn db-migrate.
- Finally, deploy your application by running
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 react-firebase-starter https://github.com/kriasoft/react-firebase-starter.git git checkout master git fetch react-firebase-starter git merge react-firebase-starter/master yarn install yarn relay
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.
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 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.