React Starter Kit for Firebase Β a.k.a. Serverless Edition
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
- 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 scriptsPrerequisites
- Node.js v10.15 or higher + Yarn v1.17 or higher Β (HINT: On Mac install them 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 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.
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-testUpon 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 versionHINT: 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 environmentFor 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 https://github.com/kriasoft/react-firebase-starter.git
$ git checkout master
$ git fetch rsk
$ git merge rsk/master
$ yarn installNOTE: 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.
Backers
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!