React Redux Webpack Template

Demo / see it in action: https://paulkogel.github.io/react-redux-webpack-template

Comprises:

• React
• Babel (ES6)
• Webpack
• Redux
• React Router
• Foundation
• ES Lint

Redux code is based on https://github.com/sadams/todo-redux-react-webpack, which is a transcription of Dan Abramov's excellent egghead.io Redux video course.

Includes only essentials to:

• compile ES6 to ES5 (with Babel)
• use ES6 modules (with Webpack)
• load React and Redux
• uses static CSS (not processed/loaded via Webpack).

Recommended Node version

• Node 5.0.0 (best install via nvm)
• npm 3.3.6

Both are set in package.json - feel free to remove the version numbers there should your setup require it.

Setup

npm install
npm run devserver

Production build & deploy

1. To transpile the JavaScript run:

   npm run build

Check dist/built/js for output:

• application.js (transpiled source code)
• application.js.map (source map)

2. Commit changes to git (dist must be checked in):

   git add dist && git commit -m 'Your commit message'

3. Then push just the /dist folder to the gh-pages branch like so:

   git subtree push --prefix dist origin gh-pages

Github Pages Setup

• merge current master branch to gh-pages-preparation - we need to use hashHistory (/#/foo) instead of browserHistory (/foo) to build the page for Github pages. This is because the page is hosted in a subdirectory (https://paulkogel.gihub.io/react-redux-webpack-template/index.html). Alternative solutions might be found here: remix-run/react-router#353.
• git subtree push --prefix dist origin gh-pages

Good to know

• the Webpack dev server's port can be changed in package JSON's devserver script (--port option). Make sure you don't forget to set the same port in /webpack/development.config.js - otherwise hot module replacement won't work and you'll get lots of connection errors in your browser's JS console.
• Webpack dev server's base directory (/dist for this repository) is set in package.json's devserver script with content-base.