Skip to content

paulkoegel/react-redux-webpack-template

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

81 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation


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