A moderately advanced webpack boilerplate for Node, React, React-Router, Redux, and Sass. Includes Hot Module Reloading, code splitting, treeshaking and separate API server.
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.


dustDevil 1.2.0 - Build 2017

This Build is no longer being maintained. Please use Create-React-App instead.

David David

Dustdevil is a Node, React, React-Router, Redux, and Sass SPA starter kit. It features a moderately advanced webpack config that supports Hot Module Replacement, code splitting, tree shaking, and optimized production builds. It also features a separate API server for front-end requests.

If you are looking for a no build configuration option checkout Facebook's excellent Create React App.



v1.2.0, October 22, 2017

  • updated outdated packages


  • npm install install packages
  • npm run startserver starts up the express server for api backend
  • npm run dev starts up backend server on port 3031 and runs webpack front-end in development mode
  • npm run build create a production build
  • npm run clean removes build folder, automatically run as part of build command
  • npm start this script is used to run after you have a build folder (npm run build). Also used by heroku as start script. Defaults to http://localhost:5000/ locally.
  • npm run deploy removes build folder, rebuilds build folder, creates a commit locally, uploades to heroku. Make sure to add heroku remote to git and UNCOMMENT build in .gitignore.

Server / Front-end relationship

Note: The api server must use a different port than webpack-dev-server.

Dustdevils backend and front-end are completely separate from one another. The server runs on port:3031 locally, and the front-end runs in dev-mode on port:3000, managed by Webpack. When deployed to Heroku the app is run from server/index.js using static assets compiled from the front-end and copied to the build folder.

Deploy to Heroku

Install Heroku CLI

  1. heroku create
  2. UNCOMMENT build/ in .gitignore
  3. npm run deploy
  4. RECOMMENT build/ in .gitignore
  5. run `npm run clean'
  6. commit back to master repo

File Structure

  • /client will be compiled into build folder and using babel.
  • /server is servered directly out of the server folder.


  • Webpack-Dev-Server Source Maps

    I have noticed that sometimes WDS will not correctly show source maps in development mode. If you see <style></style> in your console instead of line numbers to the source, manually refresh the browser. This will usually fix the problem.