twitter-boiler404

Isomorphic, React, ES6, Webpack based starter kit for quickly starting twitter based web app projects tailored for art404.

Based off a fork of Richard Krawll's react-starter

Usage

Environment Variables

Create an env.json in the root of the folder with the following keys:

{
  "CONSUMER_KEY": "XXX",
  "CONSUMER_SECRET": "XXX",
  "COOKIE_NAME": "my-app-name"
}

in production you'll need the following environment variables:

Variable	Description
API	host name + api route eg: http://mysite.com/api
CALLBACK_URL	route for oauth to call back to , eg http://mysite.com
CONSUMER_KEY	twitter app consumer key
CONSUMER_SECRET	twitter app consumer secret
COOKIE_NAME	name of app cookie, eg; 'MY-APP'

$ npm install

Start development server:

$ npm run start:dev

Start production server:

$ npm start

DEPLOY:

$ git push heroku master

Features

• Twitter login/logout oAuth flow handled with serialized cookie
• Twitter api calls available
• react-tweet for quickly rendering tweets
• Isomorphic server rendering for faster load times + seo benefits
• Pre-render data-fetching
• Mobile + Cookie detection as top-level props
• SCSS + bourbon framework
• Redux developer tools + Hot Reloading
• EZ Deploy to Heroku with npm start

Tech Stack

• firebase
• Babel
• ESLint
• Express
• Mocha
• React
• React Router
• React Transform HMR
• Redux
• Redux DevTools Extension
• Webpack

Structure

.
├── client                    # Source code for client-side application
│   ├── actions               # Redux action creators
│   ├── components            # Presentational/dumb components
│   ├── constants             # Global constants (action types etc.)
│   ├── containers            # Stateful/smart components
│   ├── reducers              # Redux reducers
│   ├── routes                # Routes used by React Router (shared with server)
│   ├── store                 # Redux store
│   └── index.js              # Entry point for client-side application
├── server                    # Source code for Express server
│   ├── api                   # Mock API
│   ├── middleware            # Server middleware
│   ├── views                 # Server views (Jade templates)
│   ├── index.js              # Entry point for server (with babel-register etc.)
│   └── server.js             # Express server
├── test                      # Test setup and helpers
├── .babelrc                  # Babel configuration
├── .eslintrc                 # ESLint configuration
└── webpack.config.babel.js   # Webpack configuration