Need help with simple-static-react-firebase?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

419 Stars 47 Forks MIT License 33 Commits 9 Opened issues


Minimal boilerplate and configuration for the development of firebase websites with react & es6

Services available


Need anything else?

Contributors list

Simple Static React Firebase

This repo is minimal boilerplate for static react & es6 site with firebase authentication and cloud database, and a router. If you don't need all that, check out Simple Static React -

The intention is to provide a basic boilerplate setup that doesnt inundate the new user with complexity, and stays out of the way of the more comfortable who just want an ES6/React environment with persistent user data, to bang out an idea.

You get: - ES6/React (with sourcemaps) - CSS modules - Google/Facebook/Twitter/Github/Email user login - Firebase database - hash based, client side routing - watchfile'd development builds

That's it.

Now, this isn't as simple as I'd like, but federated authentication and wiring up a realtime db isn't either. Additionally, Firebase's authentication system requires a static page and doesn't play nicely with single page apps. So, we redirect back and forth to

during login.

Set up

Clone the repo locally and run npm install.

git clone
cd simple-static-react-firebase
npm i

Add your firebase project info to the head of both

, replacing this code:
const config = {
  apiKey: "apiKey",
  authDomain: "",
  databaseURL: "",
  storageBucket: "",

Configure whichever login providers you want to use, and remove the remaining references in

  // Leave the lines as is for the providers you want to offer your users.

You're done. Time to begin the real work on your amazing idea!



Run the npm script

to develop.
npm run dev

A webpack server will now be running on

, serving the contents of the
directory. The
files are in

NOTE: this is using webpack-dev-server, not actually overwriting the files in

. For that, you will need to run the build script.


Run the npm script 'build' to update

in the
directory. Upload this directory to your web server.
npm run build

Wiring up firebase components

The data module has two endpoints for wiring up components. One,

takes an url string and callback, and returns a cancel callback. It sets up a listener to your firebase db.

The other,

, is a convenience method that takes a reference string and the component's parents reference string (handed down via props), and returns a concatenated version. If you don't pass it a parent, it concatenates the root node for your firebase app. This is created after login and can, as it does in this example, include the user's id in the ref.
    const fbref ={fbref:'ROOT_DATA_NODE_FOR_THIS_APP'})


<examplecomponent fbref="{this.state.fbref}" data="{}/">

This makes wiring up a components as simple as setting up a listener and tear down as simple as: ``` componentWillMount() { const fbref ={fbref:'THISCOMPONENTSFIREBASE_REF', parentRef:this.props.fbref}) this.cancelListener ={ref:fbref, callback:(data) => this.setState({data})}) this.setState({fbref}) }

componentWillUnmount() { if (this.cancelListener) this.cancelListener() } ```


The architecture is as follows:

* loads route.js and hands it the contents of data.js, along with route hash. If the route hash changes, it triggers a rerenders with the new hash.

* delivers routes based on the passed in hash prop. * dynamically checks the data passed in, and matches any events

* listens for login changes and serves up data

_Note: As is, this uses a traditional 'top down' React style data management - ie - passing down state via props from the top, rather than passing down Firebase database references.

  • contains the route containers

* Hello World page

* Hello Again, World page

* css stylesheets

* output directory. Put your assets in here next to the compiled js and css.

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.