ATTRIBUTION I borrowed heavily from tsaiDavid's excellent boilerplate
I created this project in response to Dan Abramov's medium article about react-transform hmr, and how it is not needed in projects with global state (Redux).
I followed the steps he suggests in his pull-request about how to use regular HMR with Redux.
Designed to keep style/structure as un-opinionated as possible, to offer you - the user - as much creativity and flexibility when it comes to your needs. As this is still a work-in-progress, do reach out if you have suggestions, fixes, etc!
This project features a super simple UI - just for you to see how everything is wired up, using the classic counter example.
- React + Redux
- React Router
- Babel 6 w/ basic presets and transform (NO react-transform-hmre)
- Webpack w/ basic dev and prod configurations
- Express development server; easily roll out a production enabled server of your own
- Eslint w/ basic configs
- Redux DevTools + Logger middleware - easily removable/replaceable based on your needs
- stock vanilla hot module reload
- sass compilation
node 5.0.0
and higher!
- Why another React and Redux boilerplate?
Abramov's commentary on react-transform was relatively recent, so I incorporated this change into my favorite boilerplate. I was also setting up Redux for a project and needed somewhere to start.
- Why not use WebpackDevServer?
The included
devServer.js
is a Node/Express server - mainly because most people will end up creating applications that rely on a Node server! Using thewebpack-dev-middleware
andwebpack-hot-middleware
allow us to get syntax errors displayed in an overlay, which using WebpackDevServer doesn't allow for.
To begin, fork this repo and then clone those contents down!
Ideally, fork this boilerplate, then clone.
$ git clone https://github.com/YOUR_GITHUB_USERNAME_HERE/simple-redux-boilerplate.git
Install required dependencies. (Did you make sure you have the right version of Node?)
npm install
Run development server, complete with DevTools and related configuration.
npm run dev
You're now ready to get working! (enter command or visit via browser directly)
open http://localhost:3005/
Now that your development server is up and running, you will see that you have your Redux DevTools available for you to use. The keyboard shortcuts available follow the generally accepted config - but you're free to make changes to them here: containers/DevTools.js
.
To toggle the DevTool panel during development: CTRL + H
Change the DevTool panel's position during development: CTRL + Q
Code style can be a tricky subject - I've instead decided to rely on the ever trustworthy configurations that AirBnb follows!
This project relies on eslint-config-airbnb
.
Learn more here: AirBnb Style Guide
This boilerplate is initially based on tsaiDavid's awesome simple-redux-boilerplate.
This project supports Babel 6