8

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: enter image description here

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"
  }
}
7
  • 1
    Please show the output in the console when you run that command.
    – Niyoko
    Nov 8, 2016 at 3:49
  • That's the problem its not showing anything in console, when I run npm start it gives all valid output in command line saying (webpack)-dev-server/client?http://localhost:3333 3.97 kB {0} [built] but when I load that in browser nothing happens Nov 8, 2016 at 3:56
  • 1
    nothing happens. Do you mean a blank page, 404 or 'This site can't be reached'? Check your route if you use react-router. Check if the js file is loaded. Check your chrome dev tools for sources and console.
    – Khang Lu
    Nov 8, 2016 at 5:15
  • 1
    How about 127.0.0.1:3333 Or 0.0.0.0:3333 ? Nov 8, 2016 at 5:15
  • @KhangLu check the screenshot I have added Nov 8, 2016 at 7:05

5 Answers 5

4

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
4

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.

8
  • it gives me this error: Cannot find module '/Users/dheeraj/Project/reactWeb/webpack-dev-server' Nov 8, 2016 at 7:42
  • Drop the ./ from the path.
    – ppovoski
    Nov 8, 2016 at 7:45
  • @DheerajAgrawal have you installed webpack-dev-server and webpack globally? i tried it and it worked fine when both installed globally.
    – AJS
    Nov 8, 2016 at 8:28
  • modified my answer, this works for me add this to package.json
    – AJS
    Nov 8, 2016 at 8:29
  • @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 Nov 8, 2016 at 8:58
2

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
0

Answering as this happened to me with a new installation of Ubuntu 18.04 where localhost did not exist in my hosts file and had to be added.

You can check if this is your issue by navigating the browser to 127.0.0.1:3333 instead. If it is available you need to add the following line to your /etc/hosts file

127.0.0.1 localhost
0

you need a global version of webpack and then run script again.

    use: https://127.0.01:3333

If this is still not working then change port or stop services running on this port

Not the answer you're looking for? Browse other questions tagged or ask your own question.