Build, Watch and Serve your Node.js App with one Command

When I transitioned away from task runners like Gulp and Grunt in favour of the 'new hotness' of Webpack & NPM, the one thing I missed was the ability to bundle multiple dev tasks like compiling my JS, CSS and running my Dev Server into one command. I needed a few terminal windows open on my Mac to run things like webpack to compile my JS + CSS, node to serve out my webapp, and browsersync to refresh the browser when my assets changed.

After getting frustrated with this messy setup, I decided to look for alternatives. I found a couple of NPM packages that sounded useful for running multiple commands at once, namely npm-run-all and concurrently - both seemed equally popular according to NPM Trends. I'm running with npm-run-all for now, which is working out well so far!

An Example Setup

Here's an example of npm-run-all configured to concurrently run webpack (in watch mode) and my local Node server so I don't have to spin up a bunch of terminal windows just to develop my app (note the --parallel switch):

{
  "name": "react-weather",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "moment": "^2.18.1",
    "whatwg-fetch": "^2.0.3",
    "body-parser": "1.18.3",
    "cookie-parser": "1.4.3",
    "debug": "3.1.0",
    "dotenv": "6.0.0",
    "ejs": "2.6.1",
    "express": "4.16.3",
    "morgan": "1.9.0",
    "node-fetch": "2.2.0",
    "node-geocoder": "3.22.0",
    "serve-favicon": "2.5.0"
  },
  "scripts": {
    "webpack-dev": "webpack --env=dev --watch",
    "webpack-live": "webpack --env=live",
    "serve": "node ./src/bin/www",
    "dev": "npm-run-all --parallel webpack-dev serve"
  },
  "devDependencies": {
    "browsersync": "0.0.1-security",
    "eslint-config-airbnb": "^16.1.0",
    "eslint-plugin-import": "^2.11.0",
    "eslint-plugin-jsx-a11y": "^6.0.3",
    "eslint-plugin-react": "^7.7.0",
    "extract-text-webpack-plugin": "^3.0.2",
    "mini-css-extract-plugin": "^0.4.0",
    "node-sass-chokidar": "^1.3.3",
    "npm": "^5.8.0",
    "npm-run-all": "^4.1.3",
    "react": "^16.2.0",
    "react-dom": "^16.2.0",
    "react-router-dom": "^4.2.2",
    "react-scripts": "^1.1.4",
    "react-transition-group": "^1.2.1",
    "sass-loader": "^6.0.7",
    "webpack": "^4.16.3",
    "webpack-cli": "^2.0.14",
    "webpack-livereload-plugin": "^2.1.1"
  }
}

That's pretty much it! To get started, install via NPM with the command npm install npm-run-all --save-dev and add a new entry to your scripts block in package.json with the tasks you want to run in parallel.

As always, I'm open to questions or comments via @paulaik 👍

Show Comments