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.
Permalink
Failed to load latest commit information.
client
server
.babelrc
.eslintrc.json
.gitignore
Procfile
README.md
package-lock.json
package.json
postcss.config.js
webpack.config.js

README.md

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.

dustdevilcover

CHANGELOG

v1.2.0, October 22, 2017

  • updated outdated packages

Commands

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

Issues

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