NPM Start not starting local server

Question

I am trying to make an react app using webpack and when I try to run npm start it should load http://localhost:3333 but it says site cannot be reached, here is my webpack config:

module.exports = {
    entry: './main.js',
    output: {
        path: '/',
        filename: 'index.js'
    },
    devServer: {
        inline: true,
        port: 3333
    },
    module: {
        loaders: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                loader: 'babel',
                query: {
                    presets: ['es2015', 'react']
                }
            }
        ]
    }
}

And here is my script object from package.json: "start": "webpack-dev-server". I have already installed webpack & webpack-dev-server globally. Check below image which I am getting:

Edit: My package.json:

{
  "name": "react-app",
  "version": "1.0.0",
  "description": "sample",
  "scripts": {
    "start": "webpack-dev-server"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/dheeraja00/react-app.git"
  },
  "author": "Dheeraj Agrawal",
  "license": "ISC",
  "bugs": {
    "url": "https://github.com/dheeraja00/react-app/issues"
  },
  "homepage": "https://github.comdheeraja00/react-app#readme",
  "dependencies": {
    "material-design-lite": "^1.2.1",
    "react": "^15.3.2"
  },
  "devDependencies": {
    "babel-core": "^6.18.0",
    "babel-loader": "^6.2.5",
    "babel-preset-es2015": "^6.18.0",
    "babel-preset-react": "^6.16.0",
    "css-loader": "^0.25.0",
    "file-loader": "^0.9.0",
    "node-sass": "^3.10.1",
    "raw-loader": "^0.5.1",
    "sass-loader": "^4.0.2",
    "style-loader": "^0.13.1",
    "webpack": "^1.13.2",
    "webpack-dev-server": "^1.16.2"
  }
}

Solution 1

You can run any one of the below mentioned commands to start the node server for your reactJs application:

 npm run-script start
 npm run start
 npm start

Solution 2

npm start will only work when you have a start script.

For the below example webpack-dev-server and webpack packages are required. To add these packages you should install webpack-dev-server and webpack globally.

npm install webpack-dev-server webpack -g

For Example:

"scripts": {
    "start": "webpack-dev-server"
 }

in you package.json, basically when you run npm start it searches your package.json for what to do.

Solution 3

Instead of Trying URL: http://localhost:3333
Try URl: http://127.0.0.1:3333

And, if http://127.0.0.1:3333 works fine.
Then for a permanent fix try adding an entry to /etc/hosts file as if it doesn't exist or commented

127.0.0.1 localhost

Comments

[Dheeraj Agrawal]

it gives me this error: Cannot find module '/Users/dheeraj/Project/reactWeb/webpack-dev-server'

[ppovoski]

Drop the ./ from the path.

[AJS]

@DheerajAgrawal have you installed webpack-dev-server and webpack globally? i tried it and it worked fine when both installed globally.

[AJS]

modified my answer, this works for me add this to package.json

[Dheeraj Agrawal]

@AJS yes I have already installed it globally and tried your new edit also have scripts on my package.json, check it out I have added package.json in my question

[AJS]

what happens when you just run webpack-dev-server in command-line?

[Dheeraj Agrawal]

It gives this chunk {0} index.js (main) 919 kB [rendered] [0] multi main 40 bytes {0} [built] [1] (webpack)-dev-server/client?http://localhost:3333 3.97 kB {0} [built] and whole list of js files & at last webpack: bundle is now VALID.

[AJS]

that means it is working, and it should work with npm with package.json changes as well. not sure whats wrong here, should be something silly.