Your One-Stop solution for a full-stack app with ES6/ES2015 React.js featuring universal Redux, React Router, React Router Redux Hot reloading, CSS modules, Express 4.x, and multiple ORMs.
npm install react-webpack-node[![Dependency Status][dep-status-img]][dep-status-link] [![devDependency Status][dev-dep-status-img]][dev-dep-status-link]
[![Gitter][gitter-img]][gitter-link] [![npm version][npm-badge]][npm-link]
> Your One-Stop solution for a full-stack app with ES6/ES2015 React.js featuring universal Redux, React Router, React Router Redux Hot reloading, CSS modules, Express 4.x, and multiple ORMs. :rocket:
_Formerly known as choonkending/react-webpack-node_
[dep-status-img]: https://david-dm.org/choonkending/react-webpack-node.svg
[dep-status-link]: https://david-dm.org/choonkending/react-webpack-node
[dev-dep-status-img]: https://david-dm.org/choonkending/react-webpack-node/dev-status.svg
[dev-dep-status-link]: https://david-dm.org/choonkending/react-webpack-node#info=devDependencies
[gitter-img]: https://badges.gitter.im/Join%20Chat.svg
[gitter-link]: https://gitter.im/choonkending/react-webpack-node?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge
[npm-badge]: https://badge.fury.io/js/react-webpack-node.svg
[npm-link]: http://badge.fury.io/js/react-webpack-node
#### Demo site: https://demo-reactgo.herokuapp.com/
- Unit Testing with jsdom, mocha, sinon & enzyme
- Reducers
- Components (Enzyme)
- Synchronous and Asynchronous Actions
- Express 4.x server with a ton of middleware
- Mongoose for MongoDB
- Sequelize for Postgres
- Procfile to enable deployment to Heroku & Docs on Salt configurations + Deployment for Digital Ocean
The motivation is simple: best practices and a wonderful development experience. Our ultimate goal is to provide a boilerplate for building non-trivial applications that are secure, performant and free of bugs. Believing a mixture of React.js, Webpack and Node was the best way to accomplish this, we created react-webpack-node.
react-webpack-node also works great as a learning tool for anyone interested in learning how to implement a large React application, or those who want a modern setup ASAP.
We've had extensive community additions to this boilerplate over time as practices have evolved, and are always interested in hearing new ideas or contributions.
We're really big fans of this implementation of flux for state management. The main principles of having:
- a single store
- state being read-only (you have to express an intent to mutate being creating actions)
- mutations written as pure functions
make it very fun and easy to write predictable code! There's a ton of reasons why, but you should head to the Redux docs to dive in!
Or if you are more of a visual learner watch the free egghead video series narrated by the creator of redux:
1. Getting Started
2. Building Idiomatically
#### Data Flow
A simplistic representation of data flow from server to client is:
``
Express app.use() receives a request
-> Calls a pre-built webpack file for the server
-> Runs matching of routes in react-router for server
-> Makes async data fetching request
-> Renders Route component to string
-> Construct HTML file (with Meta, Link tags using helmet)
-> Browser receives html file with initial state
-> Client side React.JS kicks in and initializes with given state
-> Continues where it left off
-> Everyone is happy :)
More TBD
#### Redux DevTools
You will have to install redux devtools extension from here and then everything should just work!
#### Database
We currently support MongoDB and Postgres, as well as the ability to not use any database. Learn about how to configure your app.
#### Development
Development is a breeze. Once you have installed all your dependencies all the configuration is done for you. using simple The process is outlined here.
#### Unit Tests
Testing with:
- mocha as the test framework-test.js
- We find all the files we need that have a suffix in the /app directory.jsdom
- as my test environment
`bashRun test once
npm test
We have unit tests for async (redux) actions, reducers, and stateless components with enzyme.
#### Deployment
Currently we support Heroku and Digital Ocean and AWS
#### Roadmap
We have an outline of our roadmap here
Yeoman Generator
If you like using yeoman generators, you could check out this cool yeoman generator by @iiegor!
FAQ
We have assembled an FAQ here
Check out what people have done
We have a list of projects that have been created with this boilerplate. Check
them out to see what can be done or to get some inspiration.
How to Contribute:
Best way to keep up to date is check the issues. I really welcome improvements for all aspects of an app.
1. Any suggestions/improvements/bugs can be in the form of Pull Requests, or creating an issue.
2. Coding guidelines:
- Airbnb's Style Guide
- bendc's frontend guidelines
Credits to webpack-server-side-example, example-app, flux-examples, node-express-mongo-demo, hackathon-starter, web-starter-kit, awesome material-ui, alt and iso, react-starter, reap, isomorphic-redux-app and mxstbr/react-boilerplate
Easter Eggs :egg:
This boilerplate has gone through an evolution
React.js -> Facebook Flux -> Alt -> Redux
We have two implementations of universal flux:
- Redux is on our active master branch
- Alt (previously implemented) on flux/alt branch. It features iso, react-router and ImmutableJS.
> Note: If you have previously used an alt implementation of this repository, please refer to this branch. I will not be updating it as frequently as master, but definitely welcome suggestions!
License
===============
MIT