All Projects → kriasoft → React Firebase Starter

kriasoft / React Firebase Starter

Licence: mit
Boilerplate (seed) project for creating web apps with React.js, GraphQL.js and Relay

Programming Languages

javascript
184084 projects - #8 most used programming language
EJS
674 projects
shell
77523 projects
Dockerfile
14818 projects

Projects that are alternatives of or similar to React Firebase Starter

React App
Create React App with server-side code support
Stars: ✭ 614 (-85.94%)
Mutual labels:  graphql, relay, create-react-app, boilerplate, ssr, server-side-rendering
Ssr Sample
A minimum sample of Server-Side-Rendering, Single-Page-Application and Progressive Web App
Stars: ✭ 285 (-93.47%)
Mutual labels:  graphql, ssr, styled-components, spa, server-side-rendering
Firebase Gcp Examples
🔥 Firebase app architectures, languages, tools & some GCP things! React w Next.js, Svelte w Sapper, Cloud Functions, Cloud Run.
Stars: ✭ 470 (-89.23%)
Mutual labels:  graphql, serverless, gcp, firebase-functions, firebase
Rpg Boilerplate
Relay (React), Postgres, and Graphile (GraphQL): A Modern Frontend and API Boilerplate
Stars: ✭ 62 (-98.58%)
Mutual labels:  graphql, relay, postgresql, ssr, server-side-rendering
Preact Redux Isomorphic
preact-redux-isomorphic PWA SPA SSR best practices and libraries in under 80kB page size (for live demo click the link below)
Stars: ✭ 85 (-98.05%)
Mutual labels:  graphql, seo, boilerplate, ssr, spa
Pup
The Ultimate Boilerplate for Products.
Stars: ✭ 563 (-87.1%)
Mutual labels:  graphql, boilerplate, ssr, styled-components
Razzle Material Ui Styled Example
Razzle Material-UI example with Styled Components using Express with compression
Stars: ✭ 117 (-97.32%)
Mutual labels:  boilerplate, ssr, styled-components, server-side-rendering
Graphql Starter
💥 Monorepo template (seed project) pre-configured with GraphQL API, PostgreSQL, React, Relay, and Material UI.
Stars: ✭ 3,377 (-22.65%)
Mutual labels:  graphql, postgresql, boilerplate, relay
Rendora
dynamic server-side rendering using headless Chrome to effortlessly solve the SEO problem for modern javascript websites
Stars: ✭ 1,853 (-57.56%)
Mutual labels:  seo, ssr, spa, server-side-rendering
Integrify
🤝 Enforce referential and data integrity in Cloud Firestore using triggers
Stars: ✭ 74 (-98.31%)
Mutual labels:  serverless, firebase-functions, firebase, firestore
Project Webcube
Continuously updated JS infrastructure for modern web dev
Stars: ✭ 141 (-96.77%)
Mutual labels:  graphql, boilerplate, styled-components, server-side-rendering
React Starter Kit
React Starter Kit — front-end starter kit using React, Relay, GraphQL, and JAM stack architecture
Stars: ✭ 21,060 (+382.36%)
Mutual labels:  graphql, boilerplate, ssr, relay
angular-universal-firebase
angular-universal-firebase.firebaseapp.com/
Stars: ✭ 30 (-99.31%)
Mutual labels:  ssr, server-side-rendering, firebase-functions
example-app
Example app showcasing fulls1z3's Angular libraries
Stars: ✭ 27 (-99.38%)
Mutual labels:  spa, hmr, seo
elegant-react-ssr
Server-side rendering with create-react-app, React Router v4, Helmet, Redux, and Thunk boilerplate, without ejecting CRA
Stars: ✭ 16 (-99.63%)
Mutual labels:  create-react-app, ssr, server-side-rendering
React Social Network
Simple React Social Network
Stars: ✭ 409 (-90.63%)
Mutual labels:  create-react-app, firebase, boilerplate
universal-react-relay-starter-kit
A starter kit for React in combination with Relay including a GraphQL server, server side rendering, code splitting, i18n, SEO.
Stars: ✭ 14 (-99.68%)
Mutual labels:  relay, seo, server-side-rendering
Nuxt Ssr Firebase
Nuxt.js Universal App with SSR via Firebase Functions and Firebase Hosting
Stars: ✭ 273 (-93.75%)
Mutual labels:  firebase-functions, firebase, ssr
Cra Universal
🌏 Create React App companion for universal app. No eject, auto SSR, zero config, full HMR, and more (inactive project)
Stars: ✭ 419 (-90.4%)
Mutual labels:  create-react-app, ssr, server-side-rendering
Ice
🚀 The Progressive App Framework Based On React(基于 React 的渐进式应用框架)
Stars: ✭ 16,961 (+288.48%)
Mutual labels:  serverless, ssr, spa

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

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

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 https://github.com/kriasoft/react-firebase-starter.git
$ 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.

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!

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].