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

Question

I can only see the actual app under /public.

The configs in webpack.config.js are below:

var path    = require('path');
var webpack = require('webpack');

module.exports = {

  entry: [
    'webpack-dev-server/client?http://localhost:8080',
    'webpack/hot/only-dev-server',
    './app/js/App.js'
],

  output: {
    path: path.join(__dirname, 'public'),
    filename: 'bundle.js',
    publicPath: 'http://localhost:8080'
  },

  module: {
    loaders: [
      {
        test: /\.js$/,
        loaders: ['react-hot', 'babel-loader'],
        exclude: /node_modules/
      }
     ]
   },

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

};

The project hierarchy is:

app
- js
node_modules
public
- css
- img
bundle.js

index.html
package.json
webpack.config.js

How can I modify to make sure the http://localhost:8080/ entry is for the application per se?

score 93 · Accepted Answer · edited Feb 01 '18 at 11:31

93

If you're using webpack's dev server you can pass in options to use /public as a base directory.

devServer: {
    publicPath: "/",
    contentBase: "./public",
    hot: true
},

See the webpack configuration docs, and specifically the webpack dev server docs for more options and general information.

edited Feb 01 '18 at 11:31

SkorpEN

2,491
1
22
28

answered Oct 28 '15 at 06:32

Sandals

955
7
9

1

Thanks for this answer, it got me unstuck. Also thanks for posting the links to both documentations. – Chris Schmitz Mar 15 '16 at 13:16
4

What about webpack 2? I read the docs and couldn't figure it out myself. – Shahar 'Dawn' Or Mar 13 '17 at 17:55
@mightyiam you're going to want to set publicPath property as well. I'll update to answer to include that. – Sandals Mar 13 '17 at 20:25
1

I don't know how anyone could figure this out from the documentation. Thank you. Perhaps consider rewriting some of the documentation on those properties? – Shahar 'Dawn' Or Mar 14 '17 at 07:03

score 21 · Answer 2 · answered Jul 07 '16 at 00:34

21

You can also add the --content-base flag to your start-up script, e.g.

    "scripts": {
        "start:dev": "webpack-dev-server --inline --content-base ./public"
    }

answered Jul 07 '16 at 00:34

kcstricks

1,489
3
17
32

score 4 · Answer 3 · answered May 20 '17 at 21:59

4

In my case, I misspelled 'index.html' when I set up the HTMLWebpackPlugin. Double check your filenames if you're using this plugin.

var HTMLWebpackPlugin = require('html-webpack-plugin');
var HTMLWebpackPluginConfig = new HTMLWebpackPlugin({
  template: __dirname + '/app/index.html',
  filename: 'index.html',
  inject: 'body'
});

answered May 20 '17 at 21:59

spencer.sm

19,173
10
77
88

this helped me to fix the fact that I was getting an autogenerated HTML by webpack. Now, by setting this `template` param I can specify my own html with no problem. Thanks a lot! – danivicario May 03 '20 at 19:20
This is quite hard to debug, any tip to check what final path are used by webpack-dev-server? – Eric Burel Nov 18 '22 at 16:25

score 1 · Answer 4 · answered Feb 02 '19 at 09:29

1

I had accidently removed index.html and then I got only the directory list.

answered Feb 02 '19 at 09:29

otto

1,815
7
37
63

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

4 Answers4

Linked