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 v6.10.0, since that is the version used to write this starter.

Step 1: Get the Repository

git clone git@github.com:michaelcheng429/react-redux-fullstack-starter.git

Step 2: Install Dependences

npm i

You may also need to install some packages globally: npm i -g nodemon webpack webpack-dev-server

For better debugging, install Redux DevTools for Chrome here: https://chrome.google.com/webstore/detail/redux-devtools/lmhkpmbekcpmknklioeibfkpmmfibljd?hl=en

Step 3: Start the MongoDB daemon

This will involve installing MongoDB and then running mongod from the terminal.

Step 4: 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!

Note: For Windows, you will need to run webpack-dev-server and nodemon . in separate terminals.

Step 5: 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. Create App: heroku create (APPNAME)
5. Set up MongoDBheroku addons:create mongolab
heroku config:get MONGODB_URI
heroku config:set MONGODB_URI=VALUE_FROM_LAST_STEP(COPY HERE)
6. Build the files: npm run build
7. Push to Herokugit push heroku master
8. 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
• Redux-Thunk - Used for asynchronous actions in Redux
• 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.
• MongoDB - Easy to use database for Node
• Mocha + Chai (testing) - Great testing framework and assertion library (Not up to date)

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