Webpack dev server and react. Only get directory listing when running app

Question

When I run the project through webpack-dev-server, all I see in the browser is the directory listing. I can navigate to the files and see them, but the app isn't actually running.

When I run just webpack, the output file is in the right format, so I don't think that is the issue. I really can't work out what the problem could be.

(The webpack-dev-server and webpack commands are run through adding to scripts in package.json. You can see it in the package.json file below).

I've broken the project down into it's simplest form. It looks like this:

app.js

console.log("Hello");

package.json

{
  "name": "my-app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "react": "^16.3.2",
    "react-dom": "^16.3.2",
    "react-scripts": "1.1.4",
    "webpack-cli": "^2.1.3"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject",
    "webpack": "webpack",
    "webpack-dev-server": "webpack-dev-server --hot -inline"
  },
  "devDependencies": {
    "babel-loader": "^7.1.4",
    "file-loader": "^1.1.11",
    "react-hot-loader": "^4.1.3",
    "webpack": "^4.8.2",
    "webpack-dev-server": "^3.1.4"
  }
}

webpack.config.js

module.exports = {
  context: __dirname + "/app",
  entry: "./app.js",
  output: {
    filename: "app.js",
    path: __dirname + "/dist",
  },
  module: {
  rules: [
        {
          test: /\.js$/,
          exclude: /node_modules/,
          loaders: ['babel-loader?presets[]=es2015,presets[]=react'],         
        },
      ],
    },
  mode: "development"
}

And here is my output in terminal when I run the command

npm run webpack-dev-server

> my-app@0.1.0 webpack-dev-server /home/chasmani/Documents/react/project
> webpack-dev-server --hot -inline

ℹ ｢wds｣: Project is running at http://localhost:8080/
ℹ ｢wds｣: webpack output is served from /
ℹ ｢wdm｣: Hash: 5a0c6d1388d655e14809
Version: webpack 4.8.2
Time: 1100ms
Built at: 2018-05-11 17:19:57
 Asset     Size      Chunks             Chunk Names
app.js  367 KiB  javascript  [emitted]  javascript
Entrypoint main = app.js
[../node_modules/ansi-html/index.js] 4.16 KiB {javascript} [built]
[../node_modules/loglevel/lib/loglevel.js] 7.68 KiB {javascript} [built]
[../node_modules/webpack/hot sync ^\.\/log$] ../node_modules/webpack/hot sync nonrecursive ^\.\/log$ 170 bytes {javascript} [built]
[0] multi ../node_modules/webpack-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./app.js 52 bytes {javascript} [built]
[../node_modules/sockjs-client/dist/sockjs.js] 176 KiB {javascript} [built]
[../node_modules/strip-ansi/index.js] 161 bytes {javascript} [built]
[../node_modules/url/url.js] 22.8 KiB {javascript} [built]
[../node_modules/webpack-dev-server/client/index.js?http://localhost:8080] ../node_modules/webpack-dev-server/client?http://localhost:8080 7.75 KiB {javascript} [built]
[../node_modules/webpack-dev-server/client/overlay.js] 3.58 KiB {javascript} [built]
[../node_modules/webpack-dev-server/client/socket.js] 1.05 KiB {javascript} [built]
[../node_modules/webpack/hot/dev-server.js] 1.66 KiB {javascript} [built]
[../node_modules/webpack/hot/emitter.js] 77 bytes {javascript} [built]
[../node_modules/webpack/hot/log-apply-result.js] 1.31 KiB {javascript} [built]
[../node_modules/webpack/hot/log.js] 1.03 KiB {javascript} [built]
[./app.js] 36 bytes {javascript} [built]
    + 13 hidden modules
ℹ ｢wdm｣: Compiled successfully.

All I get is the file system. Anyone have any ideas?

Answer 1

Thanks to Hamms, who left a comment but not an answer.

The reason you get the directory listing is because webpack-dev-server needs the js files to be called from an index.html file.

html-webpack-plugin is one approach to generating this index.html file.

Answer 2

I faced the exact same problem shown above and then realized that my problem was that I was running the serve command "serve -s" from OUTSIDE the build folder. That is wrong. The correct way is to go into the build folder and then run "serve -s" from there.