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.