generator-react-firebase

Yeoman generator for starting projects using 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 (project will be named after current folder)
Start application by running npm run start

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

Features

Application Navbar (with Avatar)
Full Authentication (through Email, Google or Github)
Login/Signup Pages with input validation
Route protection (only view certain pages when logged in)
Account Page

Uses

react - Rendering + Components
react-router - Routing (including async route loading)
material-ui - Google Material Styling React Components
eslint - Linting (also implements prettier)
webpack-dashboard - Improve CLI experience for Webpack

When opting into redux

redux - Client Side state optional
react-redux-firebase - Easily Persist results of Firebase queries to redux state
redux-auth-wrapper - Easily create HOCs for route/component protection based on auth state
redux-form - Form input validation + state
redux-form-material-ui - Material UI components that work nicely with redux-form

Generated Project

Project outputted from generator has a README explaining the full structure and details specific to settings you choose. The following scripts are included:

`npm run <script>`	Description
`start`	Serves your app at `localhost:3000`
`build`	Builds the application to ./dist
`test`	Runs unit tests with Karma. See testing
`test:watch`	Runs `test` in watch mode to re-run tests when changed
`lint`	Lints the project for potential errors
`lint:fix`	Lints the project and fixes all correctable errors

View the example application README for more details.

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.

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
Choose to go to a either the CI section(suggested) or the Manual section

CI

If opting into Travis-CI, config is included within travis.yml that uses firebase-ci to simplify the CI deployment process. All that is required is providing authentication with Firebase:

Select yes to question Would to include config for Travis CI? when generating
Select Firebase under deploy options
Login: firebase login:ci to generate an authentication token (will be used to give Travis-CI rights to deploy on your behalf)
Set FIREBASE_TOKEN environment variable within Travis-CI environment
Run a build on Travis-CI
To deploy to different Firebase instances for different branches (i.e. prod), change ci settings within .firebaserc

For more options on CI settings checkout the firebase-ci docs

Manual

Run 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 (make sure you run npm run build first)
Deploy to firebase: firebase deploy

AWS S3

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

Select yes to question Would to include config for Travis CI? when generating
Select AWS under deploy options
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. If you choose yes when offered travis, as deploy configs will be included in .travis.yml for out of the box deployment.

Select yes to question Would to include config for Travis CI? when generating
Select Heroku under deploy options
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
------index.js
------Car.js
------Car.scss

/app/components/Car.js:

import React from 'react'
import PropTypes from 'prop-types'
import classes from './Car.scss'

export const Car = ({ car }) => (
  <div className={classes.container}>
    <span>Car Component</span>
    <pre>{JSON.stringify(car, null, 2)}</pre>
  </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 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
--/containers
----/Cars
------index.js
------Cars.js
------Cars.scss

/app/containers/Cars.js:

import React, { Component } from 'react'
import PropTypes from 'prop-types'
import { connect } from 'react-redux'
import {
  firebaseConnect,
  dataToJS,
  isLoaded,
  isEmpty
} from 'react-redux-firebase'
import LoadingSpinner from 'components/LoadingSpinner'
import classes from './Cars.scss'

@firebaseConnect([
  'cars'
])
@connect(
  ({ firebase }) => ({
    cars: dataToJS(firebase, 'cars')
  })
)
export default class Cars extends Component {
  static propTypes = {
    cars: PropTypes.object
  }

  render () {
    const { cars } = this.props

    if (!isLoaded(cars)) {
      return <LoadingSpinner />
    }

    if (isEmpty(cars)) {
      return (
        <div>
          No Cars found
        </div>
      )
    }

    return (
      <div className={classes.container}>
        <p>Cars</p>
        <pre>{JSON.stringify(cars, null, 2)}</pre>
      </div>
    )
  }
}

Examples

Complete examples of generator output available in Examples

Projects Started Using This

open an issue or reach out over gitter if you would like your project to be included

In the future

Option to not include tests
Option to include tests when using sub-generators
Non-decorators implementation for props binding
Airbnb linting option (currently only standard)
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

alexmattson/generator-react-firebase