React Starter Kit for Firebase is a popular project template (aka, boilerplate) for building modern, scalable web applications with React.js, GraphQL, and GraphQL using serverless infrastructure provided by Firebase (Cloud Functions, hosting, CDN, authentication, etc.). It allows you to save time and build upon a solid foundation and design patterns.
View online demo | Follow us on Twitter | Get FREE support on Telegram | Visit our sponsors:
This project was bootstraped with React Starter Kit for Firebase by Kriasoft.
- Create React App for development and test infrastructure (see user guide)
- Firestore and/or Cloud SQL (PostgreSQL) hosted database service
- GraphQL and Relay for declarative data fetching and maximum performance
- Material UI to reduce development time by integrating Google's Material Design
- Styled Components for component friendly CSS styles (docs)
- Firebase for serverless architecture, authentication and free CDN hosting (docs)
- Universal Router + history for declarative routing and client-side navigation
Also, you need to be familiar with HTML, CSS, JavaScript (ES2015) and React.
├── build/ # Compiled output
├── node_modules/ # 3rd-party libraries and utilities
├── public/ # Static files such as favicon.ico etc.
├── src/ # Application source code
│ ├── account/ # User account (settings, profile, etc)
│ ├── admin/ # Admin dashboard
│ ├── components/ # Shared React components
│ ├── graphql/ # GraphQL API endpoint
│ ├── news/ # News section (example)
│ ├── pages/ # Static pages (landing, about, privacy etc.)
│ ├── templates/ # HTML templates for server-side rendering
│ ├── app.browser.js # Client-side rendering, e.g. ReactDOM.render(<App />, container)
│ ├── app.node.js # Server-side rendering, e.g. ReactDOMServer.renderToString(<App />)
│ ├── auth.js # Authentication manager
│ ├── createRelay.browser.js # Relay factory method for browser envrironment
│ ├── createRelay.node.js # Relay factory method for Node.js envrironment
│ ├── router.js # Universal application router
│ ├── graphql.schema # GraphQL schema (auto-generated, used by Relay)
│ ├── server.json # Node.js entry point
│ ├── serviceWorker.js # Service worker helper methods
│ ├── ssr.js # Express.js middleware for server-side rendering
│ └── theme.js # Overrides for Material UI default styles
├── .env # Environment variables
├── override.js # Configuration overrides for Babel and Webpack
└── package.json # The list of project dependencies + NPM scripts
- Node.js v8.9 or higher + Yarn v1.3 or higher (HINT: On Mac install them via Brew)
- VS Code editor (preferred) + Project Snippets, EditorConfig, ESLint, Flow, Prettier, and Babel JavaScript plug-ins
- Watchman file watcher used by Relay Modern
Just clone the repo, update environment variables in .env
, and start hacking:
$ git clone https://github.com/kriasoft/react-firebase-starter.git MyApp
$ cd MyApp
$ yarn install # Install project dependencies listed in package.json
$ yarn relay # Compile GraphQL queries
$ yarn start # Compile the app and opens it in a browser with "live reload"
Then open http://localhost:3000/ to see your app.
$ 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 lint # Check JavaScript and CSS code for potential issues
$ yarn fix # Attempt to automatically fix ESLint warnings
$ yarn test # Run unit tests. Or, `yarn test -- --watch`
Set Firebase project IDs for production and development environments in .firebaserc
file, then:
$ yarn deploy # Build the app and deploy to development environment
$ yarn deploy-prod # Build the app and deploy to production
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 Node.js API Starter repository, otherwise your project may differ too much from the base/upstream repo.
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.
🎓 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)
- 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