https://github.com/Jon-Biz/simple-static-react-firebase

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

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 - https://github.com/jon-biz/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 auth.html during login.

Set up

Clone the repo locally and run npm install.

git clone https://github.com/Jon-Biz/simple-static-react-firebase
cd simple-static-react-firebase
npm i

Add your firebase project info to the head of both public/auth.html and src/data.js, replacing this code:

const config = {
  apiKey: "apiKey",
  authDomain: "projectId.firebaseapp.com",
  databaseURL: "https://databaseName.firebaseio.com",
  storageBucket: "bucket.appspot.com",
};

Configure whichever login providers you want to use, and remove the remaining references in public/auth.html:

  // Leave the lines as is for the providers you want to offer your users.
  firebase.auth.GoogleAuthProvider.PROVIDER_ID,
  firebase.auth.FacebookAuthProvider.PROVIDER_ID,
  firebase.auth.TwitterAuthProvider.PROVIDER_ID,
  firebase.auth.GithubAuthProvider.PROVIDER_ID,
  firebase.auth.EmailAuthProvider.PROVIDER_ID

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

Usage

Development

Run the npm script dev to develop.

npm run dev

A webpack server will now be running on 4000, serving the contents of the public directory. The entry files are in src - index.js and style.css.

NOTE: this is using webpack-dev-server, not actually overwriting the files in public. For that, you will need to run the build script.

Production

Run the npm script 'build' to update style.css and index.js in the public 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, setupListener takes an url string and callback, and returns a cancel callback. It sets up a listener to your firebase db.

The other, getRef, 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 = this.props.data.getRef({fbref:'ROOT_DATA_NODE_FOR_THIS_APP'})
    this.setState({fbref})

    ...

    <ExampleComponent fbref={this.state.fbref} data={this.props.data}/>

This makes wiring up a components as simple as setting up a listener and tear down as simple as:

  componentWillMount() {
    const fbref = this.props.data.getRef({fbref:'THIS_COMPONENTS_FIREBASE_REF', parentRef:this.props.fbref})
    this.cancelListener = this.props.data.setListener({ref:fbref, callback:(data) => this.setState({data})})
    this.setState({fbref})
  }

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

Architecture

The architecture is as follows:

/src/index.js

• 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.

/src/router.js

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

/src/data.js

• 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.

/src/containers

• contains the route containers

/src/containers/HelloWorld.js

• Hello World page

/src/containers/HelloAgainWorld.js

• Hello Again, World page

/src/containers/helloWorld.css /src/containers/helloAgainWorld.css

• css stylesheets

/public/

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