No description, website, or topics provided.
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
dist
src
webpack
.babelrc
.eslintrc
.gitignore
README.mdown
npm-shrinkwrap.json
package.json

README.mdown

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)
  1. Commit changes to git (dist must be checked in):

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

  2. 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: https://github.com/rackt/react-router/issues/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.