Boilerplate (seed) project for creating web apps with React.js, GraphQL.js and Relay
Switch branches/tags
Nothing to show
Clone or download
Permalink
Failed to load latest commit information.
.circleci Enable SSL in database connection Sep 7, 2018
.vscode Extract LoginButton into a separate component (#307) May 18, 2018
migrations Remove Styled Components; add .env/.env.production Sep 7, 2018
public Add GraphQL API endpoint Feb 25, 2018
scripts Tweak dotenv configuration Sep 8, 2018
seeds Refactor open (login) window functionality (#304) May 12, 2018
src Add yarn db-version script Sep 25, 2018
.babelrc Remove Styled Components; add .env/.env.production Sep 7, 2018
.editorconfig Add database migrations Feb 27, 2018
.env Add Google Analytics tracking Sep 8, 2018
.env.production Add Google Analytics tracking Sep 8, 2018
.eslintrc Redirect unauthorized users to /login page (#302) Apr 26, 2018
.firebaserc Remove Styled Components; add .env/.env.production Sep 7, 2018
.flowconfig Add GraphQL API endpoint Feb 25, 2018
.gitattributes Integrate Relay Modern and create-react-app (#238) Aug 7, 2017
.gitignore Update Git/Firebase ignore list Sep 11, 2018
.prettierignore Refactor open (login) window functionality (#304) May 12, 2018
.prettierrc Refactor to integrate with Firebase (#271) Dec 16, 2017
LICENSE.txt Integrate Relay Modern and create-react-app (#238) Aug 7, 2017
README.md Remove Styled Components; add .env/.env.production Sep 7, 2018
firebase.json Update Git/Firebase ignore list Sep 11, 2018
knexfile.js Add yarn db-version script Sep 25, 2018
package.json Add yarn db-version script Sep 25, 2018
schema.graphql Add an auto-updated timeZone field to User (#312) May 27, 2018
storage.rules Refactor to integrate with Firebase (#271) Dec 16, 2017
yarn.lock Remove Styled Components; add .env/.env.production Sep 7, 2018

README.md

React Starter Kit for Firebase   a.k.a. Serverless Edition
Build Status 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 Telegram  |  Visit our sponsors:

Hiring  


This project was bootstraped 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.)
├── 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

Prerequisites

Getting Started

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

$ 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.

npm start

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)

Note: Appending --env=production flag to any of the commands above will force it to use database connection settings from .env.production and/or .env.production.local file(s).

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

  1. Create a new Google Cloud project and Cloud SQL database.
  2. Configure authentication in Firebase dashboard.
  3. Set Firebase project ID in .firebaserc file.
  4. Set API keys, secrets and other settings in .env.production file.
  5. Migrate the database by running NODE_ENV=production yarn db-migrate.
  6. Finally, deploy your application by running yarn deploy.

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 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

License

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!