#react-redux-fullstack-starter

1. Getting Started
2. Stack
3. Features

Getting Started

Here's how you get started:

Requirements

Make sure you have node + npm installed. Preferably, use node v5.4.1, since that is the version used to write this starter.

Step 1: Get the Repository

There are two ways to download the source code. Both ways will give you the same code.

First way: Clone the Repository

git clone [email protected]:michaelcheng429/react-redux-fullstack-starter.git

Second way: Yeoman Generator

1. npm install -g yo
2. npm install -g generator-react-redux-fullstack
3. In your app's folder: yo react-redux-fullstack

Step 2: Install Dependences

npm i

Using the yeoman generator should install the dependencies automatically.

Step 3: Start the webpack-dev-server to view the app and start developing

npm run dev

Then, go to localhost:8080 in your browser and start developing with live reload/react hot loading!

Step 4: Deploy to Heroku

To easily deploy to Heroku, just follow these simple steps:

1. Download the Heroku toolbelt and create a Heroku account
2. Log in with heroku login
3. git init
4. heroku create (APPNAME)
5. git push heroku master
6. Go to APPNAME.herokuapp.com

Stack

This starter includes the following (among other smaller dependencies):

• React - Great framework for building scalable, performant web apps
• react-router - Routing library for React
• Redux - Great philosophy for managing data, data flow, and state with a single state tree
• Immutable - Prevents mutation of state. Always return brand new states when state updates.
• Webpack - Amazing module bundler that basically replaces Grunt and Gulp
• webpack-dev-server + react-hot-loader - Makes development a joy with easy testing and live reload
• Node + Express - Asynchronous JavaScript back-end. Node is fast, and Express makes writing Node easier and more fun.
• Mocha + Chai (testing) - Great testing framework and assertion library

Features

Why use this starter/stack?

• React + Redux is awesome - React and Redux go together beautifully. Uni-directional data flow. Have a single immutable state tree for your app, pass what you need into top level components, and then let these props trickle into lower level, "dumb" components. Know exactly where all data-manipulation happens, and prevent unintended side effects.
• Isomorphic - Server side rendering for improved load times and easy server-side routing
• Save hours of setting up the stack above to work together - One of the primary obstacles to using this great stack is how long it takes to get set up. Get all of the basics of this stack, without a ton of fancy junk you don't want.
• Comments and examples to help you learn and get started - There is some complexity to this stack. That's why there is so much information here about how to use this stack and this starter.
• Easy deployment to Heroku - Everything is set up for you to easily deploy your app to Heroku (or another place of your choice).