generator-react-firebase

Starter that uses React and Firebase (Redux optional)

Installation

Install Yeoman and generator-react-firebase using npm (we assume you have pre-installed node.js):

npm install -g yo
npm install -g generator-react-firebase

Getting Started

Create a project folder and enter it: mkdir myProject && cd myProject
Generate project: yo react-firebase

NOTE: Project will default to being named with the name of the folder that it is generated within (in this case myProject)

Project

Development

Run npm run dev to start live reloading development server

Production

Build code before deployment by running npm run build. There are multiple options below for types of deployment, if you are unsure, checkout the Firebase section.

A Travis-CI file has been included to enable CI builds. The correct configuration for the type of deployment you selected (S3 or Heroku) has been added to .travis.yml automatically basied on Travis settings.

Note: Deployment to Firebase through Travis-CI is not yet functional, but is on the roadmap

Deployment

Firebase

Login to Firebase (or Signup if you don't have an account) and create a new project
Install cli: npm i -g firebase-tools
Login: firebase login
Initialize project with firebase init then answer:

What file should be used for Database Rules? -> database.rules.json
What do you want to use as your public directory? -> build
Configure as a single-page app (rewrite all urls to /index.html)? -> Yes
What Firebase project do you want to associate as default? -> your Firebase project name

Build Project: npm run build
Confirm Firebase config by running locally: firebase serve
Deploy to firebase: firebase deploy

AWS S3

Selecting AWS S3 from the deploy options when running the generator adds deploy configs in .travis.yml.

Get your AWS Key and Secret from the AWS Console Credentials page
Set the following environment vars within the Travis-CI repo settings page:

AWS_KEY - Your AWS key
AWS_SECRET - Your AWS secret
S3_BUCKET - Your S3 Bucket

Heroku

Selecting Heroku from the deploy options when running the generator adds a Procfile as well as deploy configs in .travis.yml for out of the box deployment.

To deploy:

Enable Repo on Travis-CI Account
Get API Key from Heroku Dashboard
Create a new App (this name will be used in travis env var)
Set the following environment vars within the Travis-CI repo settings page:

HEROKU_KEY - Your Heroku API key
HEROKU_APP - Your Heroku App name

Sub generators

Sub generators are included to help speed up the application building process. You can run a sub-generator by calling yo react-firebase:<name of sub-generator> <param1>.

Example: To call the component sub-generator with "SomeThing" as the first parameter write: yo react-firebase:component SomeThing

Component

Generates a React component along with a matching scss file and places it within /components

A component is best for things that will be reused in multiple places. Our example

result

/app
--/components
----/Car
------Car.js
------Car.scss

/app/components/Car.js:

import React, { Component, PropTypes } from 'react'
import classes from './Car.scss'

export default class Car extends Component {
  render () {
    return (
      <div className={classes['container']}>

      </div>
    )
  }
}

Container

NOTE: Containers are synonymous with Smart Components and Linked-State Components

Redux is seen as one of the best state managers so it is implemented as the default state manager. redux-react-firebase

To create a container named Cars run: yo react-firebase:container Cars

Creates a folder within /containers that matches the name provided. Below is the result of the command above being run:

/app
--/conatiners
----/Cars
------Cars.js
------Cars.scss

/app/containers/Cars.js:

import React, { Component, PropTypes } from 'react'
import { connect } from 'react-redux'
import { firebase, helpers } from 'redux-firebasev3'
const { isLoaded, isEmpty, dataToJS } = helpers

// Props decorators
@firebase([
  // Syncs todos root
  '/todos'
])
@connect(
  ({firebase}) => ({
    // Place list of todos into this.props.todos
    todos: dataToJS(firebase, '/todos'),
  })
)
class Todos extends Component {
  static propTypes = {
    todos: PropTypes.object,
    firebase: PropTypes.object
  }

  render() {
    const { firebase, todos } = this.props;

    // Add a new todo to firebase
    const handleAdd = () => {
      const {newTodo} = this.refs
      firebase.push('/todos', { text:newTodo.value, done:false })
      newTodo.value = ''
    }

    // Build Todos list if todos exist and are loaded
    const todosList = !isLoaded(todos)
                        ? 'Loading'
                        : isEmpty(todos)
                          ? 'Todo list is empty'
                          : Object.keys(todos).map(
                              (key, id) => (
                                <TodoItem key={key} id={id} todo={todos[key]}/>
                              )
                            )

    return (
      <div>
        <h1>Todos</h1>
        <ul>
          {todosList}
        </ul>
        <input type="text" ref="newTodo" />
        <button onClick={handleAdd}>
          Add
        </button>
      </div>
    )
  }
}
export default Todos

Examples

Complete example of generator out available in Examples

Server-side Rendering

You have the option to enable Server-side Rendering through React and NodeJS. Server-side rendering allows pre-population of data into your application, which can improve SEO (Google is improving static crawling).

In order to enable server-side rendering with React, you must host a NodeJS server. This server is included and can be run using npm run production (runs if deployed to Heroku).

In the future

Non-decorators implementation for props binding (pure redux and firebase implementations)
Option to use simple file structure instead of fractal pattern
Smart Container Generator - Prompt for props/state vars (which Firebase location to bind to props)
Store previous answers and use them as defaults
Open to ideas

missioeric/generator-react-firebase