I have been following this tutorial online: .

I am about 10 minutes in, where we are starting the webpack dev server for the first time. I do this and when I travel to: http://localhost:8080/ I receive a white webpage with just the text Cannot GET /.

These are the only packages I have installed so far:

"devDependencies": { "webpack": "^5.52.0", "webpack-cli": "^4.8.0", "webpack-dev-server": "^4.1.0" }

I have a script called "start" that runs webpack serve, which runs successfully and displays:

<i> [webpack-dev-server] Project is running at: <i> [webpack-dev-server] Loopback: http://localhost:8080/

As per the tutorial I have no webpack config, I have however messed around with other webpack things in other coding projects, could one of these be using my 8080 port? I work in firefox mostly but this issue persists across all browsers.

I have also looked at my hosts file and added a line, if you think it could help I will paste it here.

As requested here is my package.json (most of it already posted above):

{ "private": true, "scripts": { "start": "webpack serve", "watch": "webpack --watch", "build": "webpack" }, "devDependencies": { "webpack": "^5.52.0", "webpack-cli": "^4.8.0", "webpack-dev-server": "^4.1.0" } }

I have been following this tutorial online: https://www.youtube./watch?v=TOb1c39m64A.

I am about 10 minutes in, where we are starting the webpack dev server for the first time. I do this and when I travel to: http://localhost:8080/ I receive a white webpage with just the text Cannot GET /.

These are the only packages I have installed so far:

"devDependencies": { "webpack": "^5.52.0", "webpack-cli": "^4.8.0", "webpack-dev-server": "^4.1.0" }

I have a script called "start" that runs webpack serve, which runs successfully and displays:

<i> [webpack-dev-server] Project is running at: <i> [webpack-dev-server] Loopback: http://localhost:8080/

As per the tutorial I have no webpack config, I have however messed around with other webpack things in other coding projects, could one of these be using my 8080 port? I work in firefox mostly but this issue persists across all browsers.

I have also looked at my hosts file and added a line, if you think it could help I will paste it here.

As requested here is my package.json (most of it already posted above):

{ "private": true, "scripts": { "start": "webpack serve", "watch": "webpack --watch", "build": "webpack" }, "devDependencies": { "webpack": "^5.52.0", "webpack-cli": "^4.8.0", "webpack-dev-server": "^4.1.0" } }

• javascript
• webpack
• localhost
• webpack-dev-server
• webpack-cli

• add the code snippet of your package.json – Sachin Ananthakumar Commented Sep 4, 2021 at 11:44
• Please provide enough code so others can better understand or reproduce the problem. – Community Bot Commented Sep 8, 2021 at 17:01

2 Answers 2

Seems even in 7 months the tutorial has gone out of date.

Fix for anyone like me who is following it on a windows pc.

Added a webpack.config.js file in my root directory that looked like this:

module.exports = {
  mode: "development",

  devServer: {
    static: "./dist",
  },
};

In the tutorial it uses contentBase as the key in the devServer object, a property that appears to have been deprecated in a recent update, so static is used as a replacement.

Now everything is served to localhost and it works.

You just have to create "public" directory in root folder and move your html, css and images files and folder there and your error will be resolved