webpack-dev-server 'Cannot GET /'

Question

I have the following webpack config:

module.exports = {
  entry: "./src/index.js",
  output: {
    path: __dirname + '/dist',
    // publicPath: __dirname + '/dist/',
    filename: "bundle.js"
  },
  devServer: {
    contentBase: "/dist",
    hot: true,
  } 
}

My understanding is that contentBase tells the webpack dev server where to serve files from. So if I go to localhost:8080/test.txt, under this configuration the file at myProjectRoot/dist/test/txt will be sent by the server to the browser. Is that correct? What does output.publicPath have to do with all that?

Now I have index.html and bundle.js sitting in myProjectRoot/dist/ right now. (although I think bundle.js is a bit of a confusing factor because its actually the in memory bundle that is returned by webpack-dev-server but nonetheless). Given my previous paragraph, I'd expect the server to return index.html to the browser. Since the contentBase is /dist and index.html's path on disk is ./dist/index.html.

But instead I see: Cannot GET /

So again, if I go to http://localhost:8080/bundle.js I see the full javascript bundle (up to date with what was last saved in my text editor). But then /index.html wins up with Cannot GET /?

What am I missing?

Alex, did you find a solution? – JCarlosR Apr 15 '18 at 22:08 — JCarlosR, Apr 15 '18 at 22:08

score 14 · Answer 1 · edited Sep 08 '21 at 19:30

14

Maybe you can try to add static to the devServer?

I got this information from: https://webpack.js.org/configuration/dev-server/#devserverwatchfiles

I've put the file in the same folder, so I use ./ for my path.

This is how I did it:

devServer: {
   //....//
   static: {                               
     directory: path.join(__dirname, './'),  
     watch: true
   }
}

edited Sep 08 '21 at 19:30

Richard Kenneth Niescior

1,794
17
24

answered Sep 08 '21 at 01:47

user16856406

141
1
2

score 4 · Answer 2 · edited Mar 20 '20 at 15:13

Alex. You wrote that:

My understanding is that contentBase tells the webpack dev server where to serve files from

this is not exactly right. contentBase option is used to tell server where to serve only static files. But the problem is that when you are working with webpack-dev-server it generates dynamic output (bundle) in memory, so you don't have the static content to serve.

1) You should remove contentBase option as by default webpack-dev-server uses output.path value as the path to serve files from.

2) Then, right now you don't have index.html in your ./dist folder. If you want your index.html file to be generated and served by dev server you should use html-webpack-plugin that generates index.html file with all bundled files included as links in it. If you need more than default markup that this plugin generates you should look at its template option

so your webpack cofig might look like:

const HtmlWebpackPlugin = require("html-webpack-plugin")
const path = require("path")

module.exports = {
    entry: "./src/index.js",
    output: {
        path: path.resolve(__dirname, "dist"),
        filename: "bundle.js"
    },
    // module: { rules: [ ... ] }
    devServer: {
        index: index.html
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: "./src/index.html"
        })
    ]
}

This almost fixed the issue for me. Not sure if webpack has updated since this post but I used this instead: devServer: { static: { directory: path.join(__dirname, './') } } — Jason, Aug 22 '21 at 18:18
Results in error `[webpack-cli] ReferenceError: index is not defined` — Phalgun, Feb 28 '22 at 21:18

score 3 · Answer 3 · answered Nov 17 '17 at 11:54

3

You need to set relative or absolute path in devServer.contentBase.
webpack-dev-server do not use your project as root directory, so it does not resolve /dist to folder within your project directory.

Try this:

module.exports = {
  entry: "./src/index.js",
  output: {
    path: __dirname + '/dist',
    filename: "bundle.js"
  },
  devServer: {
    contentBase: __dirname + '/dist'
    // contentBase: 'dist'
  } 
}

answered Nov 17 '17 at 11:54

p.m.jakubowski

51
3

It's not working for me. Even if I use publicPath instead of contentBase. – JCarlosR Apr 15 '18 at 22:08

JobJob · Answer 4 · 2021-10-19T13:46:12.143

1

I put index.html in the /public folder and that seemed to do the trick.

edited Oct 19 '21 at 13:46

answered Oct 19 '21 at 13:16

JobJob

3,822
3
33
34

score 0 · Answer 5 · edited Dec 30 '21 at 07:00

0

I tried different solutions for about two hours and couldn't fix the problem. My solution is to use your text editor's live server plugin. For example, I use Atom and the plugin is atom-live-server. VS Code has also a plugin.

edited Dec 30 '21 at 07:00

seantsang

1,123
2
7
20

answered Dec 26 '21 at 08:40

Alvand

111
2
7

score 0 · Answer 6 · answered Jan 19 '22 at 14:54

0

I used the static solution 3 above this. It did the trick for: webpack: 5.66.0 webpack-cli: 4.9.1 webpack-dev-server: 4.7.3

answered Jan 19 '22 at 14:54

SakerCobalt

39
7

Please don't add "thank you" as an answer. Once you have sufficient [reputation](https://stackoverflow.com/help/whats-reputation), you will be able to [vote up questions and answers](https://stackoverflow.com/help/privileges/vote-up) that you found helpful. - [From Review](/review/late-answers/30857413) – Luca Kiebel Jan 24 '22 at 09:00

webpack-dev-server 'Cannot GET /'

6 Answers6

Linked