Starter that uses React and Firebase (Redux optional)

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

1. Create a project folder and enter it: mkdir myProject && cd myProject
2. Generate project: yo react-firebase (project will be named after current folder)
3. Start application by running npm run start

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

Run npm start to start live reloading development server

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 based on Travis settings.

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

1. Login to Firebase (or Signup if you don't have an account) and create a new project
2. Install cli: npm i -g firebase-tools
3. Login: firebase login
4. 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? -> dist
• 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

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

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

1. Get your AWS Key and Secret from the AWS Console Credentials page
2. 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

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:

1. Enable Repo on Travis-CI Account
2. Get API Key from Heroku Dashboard
3. Create a new App (this name will be used in travis env var)
4. 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 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

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>
    )
  }
}

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 by default.

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, isLoaded, isEmpty, dataToJS } from 'react-redux-firebase'

@firebaseConnect([
  // Syncs todos root to redux
  '/todos'
])
@connect(
  ({firebase}) => ({
    // Place list of todos into this.props.todos
    todos: dataToJS(firebase, '/todos'),
  })
)
export default 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>
    )
  }
}

Complete example of generator out available in Examples

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

• 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

MIT © Scott Prue