Webpack Dev Server (webpack-dev-server) Hot Module Replacement (HMR) Not Working

Question

I have gone through many answers on StackOverflow & on GitHub issues as well but, I am still stuck in Hot Module Replacement in Webpack. I am using npm start to run my server with webpack-dev-server --hot --inline. I am trying to change code in my React component, but nothing happens in the browser.

I am using Google Chrome Version 49.0.2623.87 (64-bit) on Ubuntu 14.04LTS.

In my browser console, I am getting log messages as

[HMR] Waiting for update signal from WDS...

[WDS] Hot Module Replacement enabled.

But, no hot/live reload is happening. Nothing gets displayed when I change code in my React component file. I was following first video of this tutorial, Egghead.io/ReactFundamentals where everything worked fine.

Following are my package.json & webpack.config.js files.

package.json

{
  "name": "react-fundamentals",
  "version": "1.0.0",
  "description": "Fundamentals of ReactJS",
  "main": "index.js",
  "scripts": {
    "start": "webpack-dev-server --hot --inline"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "react": "^15.0.0-rc.2",
    "react-dom": "^15.0.0-rc.2"
  },
  "devDependencies": {
    "babel": "^6.5.2",
    "babel-core": "^6.7.2",
    "babel-loader": "^6.2.4",
    "babel-preset-es2015": "^6.6.0",
    "babel-preset-react": "^6.5.0",
    "react-hot-loader": "^1.3.0",
    "webpack": "^1.12.14",
    "webpack-dev-server": "^1.14.1"
  }
}

webpack.config.js

module.exports = {
  context: __dirname,
  entry: "./main.js",
  output: {
    path: __dirname,
    filename: "bundle.js"
  },
  devServer: {
    port: 7777
  },
  module: {
    loaders: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: "babel",
        query: {
          presets: ["es2015", "react"]
        }
      }
    ]
  }
}

It will be great if someone can guide me through this issue as I am not able to proceed further efficiently with the tutorial.

Update I have posted the answer below.

Answer 1

I figured out the solution myself.

I have to run my server with sudo. Instead of npm start, it has to be sudo npm start.

Hope it helps!

Answer 2

devServer: {
 inline: true, // you missed this line which will reload the browser
 port : 7777
}