React / Firebase / Typescript Boilerplate

A minimal way to get started and build a simple full-stack web app using create-react-app and Firebase.

Boilerplate project setup using:

• React frontend (through create-react-app): Typescript, functional components, hooks

• Firebase w/ Node.js Cloud Functions, in Typescript

• Comes with Twitter Login

• Skeleton structure and context implementation influenced by the structure used by Robin Wieruch in his React/Firebase tutorials. This boilerplate translates that tutorial's Class Components and HOCs into their functional component / hook counterparts.

Implementation Details

Frontend

• React frontend initialized with create-react-app with Typescript. Functional Components and Hooks.
• Firebase client SDK is implemented via a wrapper/gateway class in ./src/components/Firebase.
• Convenient React Contexts and hooks set up to provide the Firebase client instance and current user Auth session throughout the React app (useFirebase() and useSession())
• Twitter Redirect Login implemented
• Uses react-router for routing
• Comes with react-boostrap

Backend

• Firebase backend
• Cloud Functions can connect to Firestore with admin privileges due to them executing on Firebase servers
• Provided sample Cloud Functions are of the type called directly via the client SDK
• Node.js Cloud Functions, also written in Typescript

How to use

• Clone this repo

• Run npm install to install the packages declared in package.json

• Learn how to set up a firebase project here: Add Firebase to your Javascript project

  • Note that Step 3 is partially taken care of with the 'Using module bundlers' approach. See ./src/components/Firebase.
  • To initialize Firebase, Create a .env file and put your firebase config details there, as labelled in src/components/Firebase/firebase.ts (example being REACT_APP_API_KEY={your API key here}). .env is excluded in .gitignore

  • REACT_APP_API_KEY=
    REACT_APP_AUTH_DOMAIN=
    REACT_APP_DATABASE_URL=
    REACT_APP_PROJECT_ID=
    REACT_APP_STORAGE_BUCKET=
    REACT_APP_MESSAGING_SENDER_ID=
    REACT_APP_APP_ID=
    REACT_APP_MEASUREMENT_ID=

  • After changing environment variables, you need to restart your development server

• After installing the firebase CLI, make sure to run firebase init to create a .firebaserc file, which points your Firebase CLI (deploying functions, firestore/storage rules, etc.) to the right project. Note this might rewrite the ./functions folder though. Learn more here: Firebase CLI reference

• Twitter login

  • Get started with Twitter Developer: Getting started
  • Make sure to configure your Firebase project to allow auth through Twitter. Authenticate Using Twitter

• Run npm run start

Other Resources

• Typescript in 5m
• Intro to React Hooks

Questions?

• Have questions? Please open an issue and I'll get back to you by EOD. These are highly welcome--then the readme can be updated to provide this information and be more clear.
• PRs are welcome!
• Good luck on building!