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?

Answer 1

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.