Webpack-dev-server: Webpack-dev-server serves a directory list instead of the app page

[acircuit]

My Web app config :
`var webpack = require('webpack');
var path = require('path');

module.exports = {
entry: [
'webpack-dev-server/client?http://127.0.0.1:8080',
'webpack/hot/only-dev-server',
'./src/index.jsx'
],
output: {
path: path.join(__dirname,'public'),
filename: 'bundle.js',
publicPath: 'http://localhost:8080'
},
devServer: {
contentBase: "./public",
hot: true
},
resolve: {
modulesDirectories: ['node_modules','src'],
extensions: ['','.js']
},
module: {
loaders: [
{
test: /.jsx?$/,
exclude: /node_modules/,
loaders: ['react-hot','babel?presets[]=react,presets[]=react,presets[]=es2015']
}

    ]
},
plugins:[
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoErrorsPlugin()
]

};
`
This is my directory structure :

Please help me with this as i am not able to see my index.html. Is there something wrong with my config file

[Jack-Barry]

Have you tried running it without the contentBase: "./public"? It looks like it might be pointing to your public directory when you pull it up in the browser. You might also try moving the index.html into the public directory temporarily to see if it loads as you're expecting to see if that's what's happening.

[KevinHoughton]

I'm getting the same view.

// Dev server
config.devServer = {
    contentBase: '/',
    proxy: {
        // @see: https://github.com/nodejitsu/node-http-proxy#options
        '*': {
            target: 'http://localhost:8000'
        }
    },
    host: '0.0.0.0',
    port: process.env.WEBPACK_PORT || '8080',
    // Serve webpack-dev-server over HTTPS Protocol.
    // Includes a self-signed certificate that is used when serving the requests.
    https: false
};

[SpaceK33z]

@KevinHoughton, you'll get that if there is no index.html in the directory to which you point contentBase. Can you try including the absolute path to the directory that has a index.html?

[yvbeek]

I am having the same problem in the latest version. The contentBase property seems to be ignored. Both relative and absolute path are not working.

In my webpack.config.js (this worked fine before the update):

const CONFIG = {
  bundleDir: path.join(__dirname, 'bundle'),
  mainIndex: 'index.html',
  serverHost: '0.0.0.0',
  serverPort: 8000
}

...

devServer: {
    host: CONFIG.serverHost,
    port: CONFIG.serverPort,
    open: CONFIG.mainIndex,
    contentBase: CONFIG.bundleDir,
    colors: true
}

Now it only works when I specify the contentBase as a command line argument:

"scripts": {
  "server": "webpack-dev-server --content-base bundle",
}

[SpaceK33z]

@Zyphrax, this was a bug in the latest beta and has been fixed with #597.

[SpaceK33z]

I'm closing this issue because of inactivity. Feel free to comment, and we can always re-open it again.

[ajkhatibi]

I have a very similar problem. Is this an issue with webpack?

[alexlevy0]

Same issue as well

[shellscape]

@alexlevy0 please avoid posting "same" or "me too" comments on a thread. Rather, use the reaction button an add a thumbs-up reaction to the OP or another comment. See here for more information on reactions.

[abh4chat]

SpaceK33z answer was solution, when i faced similar problem, which got introduced with file structure reorganization, i moved everything under a src folder which was outside. I moved index.html outside and that worked. Alternative solution use html-webpack-plugin.

[JuxhinB]

I am having the same problem in the latest version. The contentBase property seems to be ignored. Both relative and absolute path are not working.

In my webpack.config.js (this worked fine before the update):

const CONFIG = {
  bundleDir: path.join(__dirname, 'bundle'),
  mainIndex: 'index.html',
  serverHost: '0.0.0.0',
  serverPort: 8000
}

...

devServer: {
    host: CONFIG.serverHost,
    port: CONFIG.serverPort,
    open: CONFIG.mainIndex,
    contentBase: CONFIG.bundleDir,
    colors: true
}

Now it only works when I specify the contentBase as a command line argument:

"scripts": {
  "server": "webpack-dev-server --content-base bundle",
}

can confirm that this way it works

im actually using
webpack-cli serve --content-base public