{"id":13403195,"url":"https://github.com/kriasoft/react-firebase-starter","last_synced_at":"2025-05-14T12:09:02.289Z","repository":{"id":1090352,"uuid":"37616442","full_name":"kriasoft/react-firebase-starter","owner":"kriasoft","description":"Boilerplate (seed) project for creating web apps with React.js, GraphQL.js and Relay","archived":false,"fork":false,"pushed_at":"2024-01-04T13:51:54.000Z","size":5102,"stargazers_count":4513,"open_issues_count":134,"forks_count":758,"subscribers_count":90,"default_branch":"master","last_synced_at":"2025-04-09T22:29:54.469Z","etag":null,"topics":["boilerplate","create-react-app","firebase","firebase-functions","firestore","gcp","graphql","hmr","javascript","postgresql","react","reactjs","relay","relay-modern","seo","server-side-rendering","serverless","spa","ssr","styled-components"],"latest_commit_sha":null,"homepage":"https://firebase.reactstarter.com","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/kriasoft.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE.txt","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null},"funding":{"github":"koistya","open_collective":"react-firebase-starter"}},"created_at":"2015-06-17T19:33:23.000Z","updated_at":"2025-04-07T22:30:05.000Z","dependencies_parsed_at":"2024-01-09T14:12:56.043Z","dependency_job_id":"2cc11628-6a25-4ea9-b9b9-7785827b71dd","html_url":"https://github.com/kriasoft/react-firebase-starter","commit_stats":{"total_commits":393,"total_committers":47,"mean_commits":8.361702127659575,"dds":"0.46564885496183206","last_synced_commit":"69328e57cbc832c87b9cce9a9955fa21515545de"},"previous_names":["kriasoft/react-static-boilerplate"],"tags_count":1,"template":true,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kriasoft%2Freact-firebase-starter","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kriasoft%2Freact-firebase-starter/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kriasoft%2Freact-firebase-starter/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kriasoft%2Freact-firebase-starter/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/kriasoft","download_url":"https://codeload.github.com/kriasoft/react-firebase-starter/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248148665,"owners_count":21055631,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["boilerplate","create-react-app","firebase","firebase-functions","firestore","gcp","graphql","hmr","javascript","postgresql","react","reactjs","relay","relay-modern","seo","server-side-rendering","serverless","spa","ssr","styled-components"],"created_at":"2024-07-30T19:01:26.661Z","updated_at":"2025-04-11T04:57:58.201Z","avatar_url":"https://github.com/kriasoft.png","language":"JavaScript","funding_links":["https://github.com/sponsors/koistya","https://opencollective.com/react-firebase-starter"],"categories":["JavaScript","Boilerplate","Front-end"],"sub_categories":["Web DB","React Firebase starter [↗](https://awesomestacks.dev/react-firebase-starter)"],"readme":"\u003ch1\u003e\n  React Starter Kit for Firebase \u0026nbsp; \u003csup\u003e\u003ci\u003ea.k.a. Serverless Edition\u003c/i\u003e\u003c/sup\u003e\u003cbr\u003e\n  \u003ca href=\"https://circleci.com/gh/kriasoft/react-firebase-starter\"\u003e\u003cimg src=\"https://circleci.com/gh/kriasoft/react-firebase-starter.svg?style=svg\" alt=\"Build Status\" height=\"20\" /\u003e\u003c/a\u003e\n  \u003cimg src=\"https://api.dependabot.com/badges/status?host=github\u0026repo=kriasoft/react-firebase-starter\" alt=\"Dependabot\" height=\"20\" /\u003e\n  \u003ca href=\"https://opencollective.com/react-firebase-starter\"\u003e\u003cimg src=\"https://opencollective.com/react-firebase-starter/backers/badge.svg?maxAge=3600\" height=\"20\"\u003e\u003c/a\u003e\n  \u003ca href=\"https://twitter.com/ReactStarter\"\u003e\u003cimg src=\"https://img.shields.io/twitter/follow/ReactStarter.svg?style=social\u0026amp;label=Follow\u0026amp;maxAge=3600\" alt=\"Twitter\" height=\"20\"\u003e\u003c/a\u003e\n  \u003ca href=\"https://discord.gg/2nKEnKq\"\u003e\u003cimg src=\"https://img.shields.io/badge/chat-Discord-green.svg?style=social\u0026amp;maxAge=3600\" height=\"20\"\u003e\u003c/a\u003e\n\u003c/h1\u003e\n\n**React Starter Kit** _for Firebase_ is a popular project template (aka, boilerplate) for building\nmodern, scalable web applications with React, Relay, and GraphQL using serverless infrastructure\nprovided by \u003ca href=\"https://cloud.google.com/\"\u003eGoogle Cloud\u003c/a\u003e (Cloud SQL, Cloud Functions, CDN\nhosting, and file storage). It allows you to save time and build upon a solid foundation and\ndesign patterns.\n\n\u003cp align=\"center\"\u003e\u003cstrong\u003eView\u003c/strong\u003e \u003ca href=\"https://firebase.reactstarter.com\"\u003eonline demo\u003c/a\u003e (\u003ca href=\"https://firebase.reactstarter.com/graphql\"\u003eAPI\u003c/a\u003e, \u003ca href=\"https://firebase.reactstarter.com/graphql/model\"\u003edata model\u003c/a\u003e) \u0026nbsp;|\u0026nbsp; \u003cstrong\u003eFollow us\u003c/strong\u003e on \u003ca href=\"https://twitter.com/ReactStarter\"\u003eTwitter\u003c/a\u003e \u0026nbsp;|\u0026nbsp; \u003cstrong\u003eGet FREE support\u003c/strong\u003e on \u003ca href=\"https://discord.gg/2nKEnKq\"\u003eDiscord\u003c/a\u003e \u0026nbsp;|\u0026nbsp; \u003ca href=\"https://angel.co/company/kriasoft/jobs/\"\u003e\u003cstrong\u003eWe're hiring!\u003c/strong\u003e\u003c/a\u003e\u003c/p\u003e\n\n\u003ca href=\"https://reactstarter.com/s/1\"\u003e\u003cimg src=\"https://reactstarter.com/s/1.png\" height=\"60\" /\u003e\u003c/a\u003e\u0026nbsp;\u0026nbsp;\u003ca href=\"https://reactstarter.com/s/2\"\u003e\u003cimg src=\"https://reactstarter.com/s/2.png\" height=\"60\" /\u003e\u003c/a\u003e\u0026nbsp;\u0026nbsp;\u003ca href=\"https://reactstarter.com/s/3\"\u003e\u003cimg src=\"https://reactstarter.com/s/3.png\" height=\"60\" /\u003e\u003c/a\u003e\n\n---\n\nThis project was bootstrapped with [React Starter Kit for Firebase][rfs] by [Kriasoft][kriasoft].\n\n### Tech Stack\n\n- [Create React App][cra] (★ 73k) for development and test infrastructure (see [user guide][cradocs])\n- [Material UI][mui] (★ 52k) to reduce development time by integrating Google's [Material Design][material]\n- [Passport.js][passport] (★ 17k) for authentication configured with stateless JWT tokens for sessions\n- [GraphQL.js][gqljs] (★ 15k) and [Relay][relay] (★ 14k) for declarative data fetching and efficient client stage management\n- [Universal Router][router] (★ 1k) + [history][history] (★ 6k) for declarative routing and client-side navigation optimized for [Relay][relay]\n- [PostgreSQL][psql] database pre-configured with a query builder and migrations using [Knex.js][knex] (★ 11k)\n- [Google Cloud][gcp] \u0026 [Firebase][firebase] for serverless architecture - Cloud SQL, Cloud Functions, CDN hosting, file storage ([docs][fbdocs])\n\nAlso, you need to be familiar with [HTML][html], [CSS][css], [JavaScript][js] ([ES2015][es2015]) and [React](https://reactjs.org/docs/).\n\n### Directory Layout\n\n```bash\n├── build/                         # Compiled output\n├── migrations/                    # Database schema migration files\n├── node_modules/                  # 3rd-party libraries and utilities\n├── public/                        # Static files such as favicon.ico etc.\n├── scripts/                       # Automation scripts (yarn update-schema etc.)\n├── src/                           # Application source code\n│   ├── admin/                     # Admin section (Dashboard, User Management etc.)\n│   ├── common/                    # Shared React components and HOCs\n│   ├── hooks/                     # React.js hooks and Context providers\n│   ├── icons/                     # Icon components\n│   ├── legal/                     # Terms of Use, Privacy Policy, etc.\n│   ├── misc/                      # Other pages (about us, contacts, etc.)\n│   ├── mutations/                 # GraphQL mutations to be used on the client\n│   ├── news/                      # News section (example)\n│   ├── server/                    # Server-side code (API, authentication, etc.)\n│   │   ├── mutations/             # GraphQL mutations\n│   │   ├── queries/               # The top-level GraphQL query fields\n│   │   ├── templates/             # HTML templates for server-side rendering\n│   │   ├── types/                 # GraphQL types: User, UserRole, UserIdentity etc.\n│   │   ├── api.js                 # GraphQL API middleware\n│   │   ├── app.js                 # Express.js application\n│   │   ├── config.js              # Configuration settings to be passed to the client\n│   │   ├── context.js             # GraphQL context wrapper\n│   │   ├── db.js                  # PostgreSQL database client (Knex.js)\n│   │   ├── relay.js               # Relay factory method for Node.js environment\n│   │   ├── index.js               # Node.js app entry point\n│   │   ├── login.js               # Authentication middleware (e.g. /login/facebook)\n│   │   ├── schema.js              # GraphQL schema\n│   │   └── ssr.js                 # Server-side rendering, e.g. ReactDOMServer.renderToString(\u003cApp /\u003e)\n│   ├── user/                      # User pages (login, account settings, user profile, etc)\n│   ├── utils/                     # Utility functions\n│   ├── relay.js                   # Relay factory method for browser environment\n│   ├── index.js                   # Client-side entry point, e.g. ReactDOM.render(\u003cApp /\u003e, container)\n│   ├── router.js                  # Universal application router\n│   ├── serviceWorker.js           # Service worker helper methods\n│   └── theme.js                   # Overrides for Material UI default styles\n├── ssl/                           # SSL certificates for connecting to Cloud SQL instance\n├── .env                           # Environment variables for local development\n├── .env.production                # Environment variables for the production build\n├── .env.test                      # Environment variables for the test build\n├── graphql.schema                 # GraphQL schema (auto-generated, used by Relay)\n└── package.json                   # The list of project dependencies + NPM scripts\n```\n\n### Prerequisites\n\n- [Node.js][nodejs] v10.15 or higher + [Yarn][yarn] v1.17 or higher \u0026nbsp; (_HINT: On Mac install\n  them via [Brew][brew]_)\n- [VS Code][vc] editor (preferred) + [Project Snippets][vcsnippets], [EditorConfig][vceditconfig],\n  [ESLint][vceslint], [Prettier][vcprettier], and [Babel JavaScript][vcjs] plug-ins\n- [Watchman][watchman] file watcher used by Relay Modern\n- [PostgreSQL][postgres] v9.6 or newer, only if you're planning to use a local db for development\n\n### Getting Started\n\nJust clone the repo, update environment variables in `.env` and/or `.env.local` file, and start\nhacking:\n\n```bash\n$ git clone https://github.com/kriasoft/react-firebase-starter.git MyApp\n$ cd MyApp\n$ yarn setup                       # Installs dependencies; creates PostgreSQL database\n$ yarn start                       # Compile the app and opens it in a browser with \"live reload\"\n```\n\nThen open [http://localhost:3000/](http://localhost:3000/) to see your app.\u003cbr\u003e\n\n\u003cp align='center'\u003e\u003cimg src='https://camo.githubusercontent.com/506a5a0a33aebed2bf0d24d3999af7f582b31808/687474703a2f2f692e696d6775722e636f6d2f616d794e66434e2e706e67' width='600' alt='npm start'\u003e\u003c/p\u003e\n\nIn order to re-compile GraphQL fragments, run `yarn relay` or `yarn relay --watch` (in watch mode).\n\n### How to Migrate Database Schema\n\nWhile the app is in development, you can use a simplified migration workflow by\ncreating a backup of your existing database, making changes to the existing\nmigration file (see `migrations/20180101000000_initial.js`), re-apply the\nmigration and restore data from the backup file (`backup.sql`):\n\n```bash\n$ yarn db-backup --env=dev         # Or, yarn db-backup --env=test\n$ yarn db-reset-dev                # Or, yarn db-reset-test\n```\n\nUpon deployment to production, switch to normal migration workflow:\n\n```bash\n$ yarn db-change \u003cname\u003e            # Create a new database migration file\n$ yarn db-migrate --env=dev        # Migrate database to the latest version\n```\n\n**HINT**: Test your migration thoroughly with a local instance of the DB first\n(by using `--env=local` or `--env=dev` (default) flag) then apply it to your\n`test` or `prod` database instance using `--env=test` or `--env=prod` command\nargument.\n\nOther helpful database scripts:\n\n```bash\n$ yarn db-version --env=dev        # Print the version number of the last migration\n$ yarn db-rollback --env=dev       # Rollback the latest migration\n$ yarn db-restore --env=dev        # Restore database from backup.sql\n$ yarn db-seed --env=dev           # Seed database with test data\n$ yarn db --env=dev                # Open Knex.js REPL shell (type \".exit\" for exit)\n$ yarn psql --env=dev              # Open PostgreSQL shell (type \"\\q\" for exit)\n```\n\n### How to Test\n\n```bash\n$ yarn lint                        # Check JavaScript and CSS code for potential issues\n$ yarn lint-fix                    # Attempt to automatically fix ESLint warnings\n$ yarn test                        # Run unit tests. Or, `yarn test -- --watch`\n```\n\n### How to Deploy\n\n```bash\n$ yarn build                       # Build the in production mode (NODE_ENV=production)\n$ yarn deploy-test                 # Deploy the app to TEST environment\n$ yarn deploy-prod                 # Deploy the app to PROD environment\n```\n\nFor more information refer to the [Deployment](https://github.com/kriasoft/react-firebase-starter/wiki/deployment)\nguide in the project's Wiki.\n\n### How to Update\n\nIf you keep the original Git history after cloning this repo, you can always fetch and merge\nthe recent updates back into your project by running:\n\n```bash\n$ git remote add rsk https://github.com/kriasoft/react-firebase-starter.git\n$ git checkout master\n$ git fetch rsk\n$ git merge rsk/master\n$ yarn install\n```\n\n_NOTE: Try to merge as soon as the new changes land on the `master` branch in the upstream\nrepository, otherwise your project may differ too much from the base/upstream repo.\nAlternatively, you can use a folder diff tool like [Beyond Compare][bc] for keeping your project\nup to date with the base repository._\n\n### Backers\n\n\u003ca href=\"https://reactstarter.com/b/1\"\u003e\u003cimg src=\"https://reactstarter.com/b/1.png\" height=\"60\" /\u003e\u003c/a\u003e\u0026nbsp;\u0026nbsp;\u003ca href=\"https://reactstarter.com/b/2\"\u003e\u003cimg src=\"https://reactstarter.com/b/2.png\" height=\"60\" /\u003e\u003c/a\u003e\u0026nbsp;\u0026nbsp;\u003ca href=\"https://reactstarter.com/b/3\"\u003e\u003cimg src=\"https://reactstarter.com/b/3.png\" height=\"60\" /\u003e\u003c/a\u003e\u0026nbsp;\u0026nbsp;\u003ca href=\"https://reactstarter.com/b/4\"\u003e\u003cimg src=\"https://reactstarter.com/b/4.png\" height=\"60\" /\u003e\u003c/a\u003e\u0026nbsp;\u0026nbsp;\u003ca href=\"https://reactstarter.com/b/5\"\u003e\u003cimg src=\"https://reactstarter.com/b/5.png\" height=\"60\" /\u003e\u003c/a\u003e\u0026nbsp;\u0026nbsp;\u003ca href=\"https://reactstarter.com/b/6\"\u003e\u003cimg src=\"https://reactstarter.com/b/6.png\" height=\"60\" /\u003e\u003c/a\u003e\u0026nbsp;\u0026nbsp;\u003ca href=\"https://reactstarter.com/b/7\"\u003e\u003cimg src=\"https://reactstarter.com/b/7.png\" height=\"60\" /\u003e\u003c/a\u003e\u0026nbsp;\u0026nbsp;\u003ca href=\"https://reactstarter.com/b/8\"\u003e\u003cimg src=\"https://reactstarter.com/b/8.png\" height=\"60\" /\u003e\u003c/a\u003e\n\n### How to Contribute\n\nAnyone and everyone is welcome to [contribute](https://github.com/kriasoft/react-firebase-starter/wiki/Contributing) to this project. The best way to\nstart is by checking our [open issues](https://github.com/kriasoft/react-firebase-starter/issues),\n[submit a new issues](https://github.com/kriasoft/react-firebase-starter/issues/new?labels=bug) or\n[feature request](https://github.com/kriasoft/react-firebase-starter/issues/new?labels=enhancement),\nparticipate in discussions, upvote or downvote the issues you like or dislike, send [pull\nrequests](https://github.com/kriasoft/react-firebase-starter/wiki/Contributing#pull-requests).\n\n### Learn React.js and ES6\n\n:mortar_board: \u0026nbsp; [React for Beginners](https://reactforbeginners.com/friend/konstantin) and [ES6 Training Course](https://es6.io/friend/konstantin) by Wes Bos\u003cbr\u003e\n:green_book: \u0026nbsp; [React: Up \u0026 Running: Building Web Applications](http://amzn.to/2bBgqhl) by Stoyan Stefanov (Aug, 2016)\u003cbr\u003e\n:green_book: \u0026nbsp; [Getting Started with React](http://amzn.to/2bmwP5V) by Doel Sengupta and Manu Singhal (Apr, 2016)\u003cbr\u003e\n:green_book: \u0026nbsp; [You Don't Know JS: ES6 \u0026 Beyond](http://amzn.to/2bBfVnp) by Kyle Simpson (Dec, 2015)\u003cbr\u003e\n\n### Related Projects\n\n- [React App SDK](https://github.com/kriasoft/react-app) — Create React App modification that\n  unlocks server-side rendering\n- [React Starter Kit](https://github.com/kriasoft/react-starter-kit) — Boilerplate and tooling for\n  building isomorphic web apps with React and Relay\n- [Node.js API Starter Kit](https://github.com/kriasoft/nodejs-api-starter) — Boilerplate and\n  tooling for building data APIs with Docker, Node.js and GraphQL\n\n### License\n\nCopyright © 2015-present Kriasoft. This source code is licensed under the MIT license found in\nthe [LICENSE.txt](https://github.com/kriasoft/react-firebase-starter/blob/master/LICENSE.txt) file.\n\n---\n\nMade with ♥ by Konstantin Tarkus ([@koistya](https://twitter.com/koistya), [blog](https://medium.com/@tarkus))\nand [contributors](https://github.com/kriasoft/react-firebase-starter/graphs/contributors) :wave:\n[Get in touch!](https://twitter.com/messages/compose?recipient_id=16394396)\n\n[rfs]: https://github.com/kriasoft/react-firebase-starter\n[kriasoft]: https://github.com/kriasoft\n[telegram]: https://t.me/ReactStarter\n[cra]: https://github.com/facebook/create-react-app\n[cradocs]: https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/template/README.md\n[psql]: https://www.postgresql.org/\n[cloudsql]: https://cloud.google.com/sql/\n[knex]: http://knexjs.org/\n[gqljs]: http://graphql.org/graphql-js/\n[relay]: http://facebook.github.io/relay/\n[mui]: https://material-ui-next.com/\n[material]: https://material.io/\n[passport]: http://www.passportjs.org/\n[html]: https://developer.mozilla.org/en-US/docs/Web/HTML\n[css]: https://developer.mozilla.org/en-US/docs/Web/CSS\n[js]: https://developer.mozilla.org/en-US/docs/Web/JavaScript\n[es2015]: http://babeljs.io/learn-es2015/\n[react]: https://facebook.github.io/react/\n[relay]: https://facebook.github.io/relay/\n[gcp]: https://cloud.google.com/\n[firebase]: https://firebase.google.com/\n[fbdocs]: https://firebase.google.com/docs/web\n[router]: https://github.com/kriasoft/universal-router\n[history]: https://github.com/ReactTraining/history\n[nodejs]: https://nodejs.org/\n[yarn]: https://yarnpkg.com/\n[brew]: https://brew.sh/\n[wm]: https://facebook.github.io/watchman/\n[relaycompiler]: http://facebook.github.io/relay/docs/relay-compiler.html\n[vc]: https://code.visualstudio.com/\n[vcsnippets]: https://marketplace.visualstudio.com/items?itemName=rebornix.project-snippets\n[vceditconfig]: https://marketplace.visualstudio.com/items?itemName=EditorConfig.EditorConfig\n[vceslint]: https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint\n[vcprettier]: https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode\n[vcjs]: https://marketplace.visualstudio.com/items?itemName=mgmcdermott.vscode-language-babel\n[watchman]: https://github.com/facebook/watchman\n[postgres]: https://www.postgresql.org/\n[bc]: https://www.scootersoftware.com/\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkriasoft%2Freact-firebase-starter","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkriasoft%2Freact-firebase-starter","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkriasoft%2Freact-firebase-starter/lists"}