React Firebase Starter

Boilerplate (seed) project for creating web apps with React.js, GraphQL.js and Relay
Alternatives To React Firebase Starter
Project NameStarsDownloadsRepos Using ThisPackages Using ThisMost Recent CommitTotal ReleasesLatest ReleaseOpen IssuesLicenseLanguage
React Starter Kit22,10117a month ago23March 07, 20165mitTypeScript
The web's most popular Jamstack front-end template (boilerplate) for building web applications with React
4 years agomitTypeScript
This repo is suspended.
React Firebase Starter4,47949 months ago25July 22, 2016135mitJavaScript
Boilerplate (seed) project for creating web apps with React.js, GraphQL.js and Relay
3 years ago58otherJavaScript
從零開始學 ReactJS(ReactJS 101)是一本希望讓初學者一看就懂的 React 中文入門教學書,由淺入深學習 ReactJS 生態系 (Flux, Redux, React Router, ImmutableJS, React Native, Relay/GraphQL etc.)。
Relay Starter Kit3,80123 months ago28December 14, 201710mitTypeScript
💥 Monorepo template (seed project) pre-configured with GraphQL API, PostgreSQL, React, Relay, Material UI.
7 hours ago286otherTypeScript
Free online agile retrospective meeting tool
React Transmit1,340147266 years ago41September 21, 201622otherJavaScript
Relay-inspired library based on Promises instead of GraphQL.
Relay Fullstack97526 years ago7October 17, 20166mitJavaScript
:point_up::running: Modern Relay Starter Kit - Integrated with Relay, GraphQL, Express, ES6/ES7, JSX, Webpack, Babel, Material Design Lite, and PostCSS
5 years ago15mitTypeScript
Learn Relay - A comprehensive introduction to Relay (created by Graphcool)
107 years ago33January 13, 20175mitJavaScript
Simple Relay alternative
Alternatives To React Firebase Starter
Select To Compare

Alternative Project Comparisons

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!

Popular Relay Projects
Popular Reactjs Projects
Popular Application Programming Interfaces Categories
Related Searches

Get A Weekly Email With Trending Projects For These Categories
No Spam. Unsubscribe easily at any time.
Styled Components
Server Side Rendering
Create React App
Firebase Functions