Webpack Server with JavaScript not Working in the AWS Amplify Getting Started Tutorial

Question

I follow the exact steps described here:

https://aws-amplify.github.io/docs/js/start?platform=purejs

Up to

Open a browser and navigate to http://localhost:8080. The ‘Add data’ button does not work yet. We’ll work on that next.

However, visiting localhost in Chrome does not show any content. On reload, I can see these 3 different errors in Chrome:

ERR_CONNECTION_RESET

ERR_EMPTY_RESPONSE

ERR_SOCKET_NOT_CONNECTED

I tried different configurations including public path etc. but nothing worked so far.

The output after npm start looks normal:

➜  amplify-js-app npm start

> amplify-js-app@1.0.0 start /Users/richardsteinmetz/code/src/untracked/amplify-js-app
> webpack && webpack-dev-server --mode development

Hash: 69b3a23591f47068a3cc
Version: webpack 4.41.2
Time: 49ms
Built at: 26/11/2019 11:12:39
         Asset      Size  Chunks             Chunk Names
    index.html  1.62 KiB          [emitted]
main.bundle.js  28.8 KiB    main  [emitted]  main
Entrypoint main = main.bundle.js
[./src/app.js] 0 bytes {main} [built]
ℹ ｢wds｣: Project is running at http://localhost:8080/
ℹ ｢wds｣: webpack output is served from /
ℹ ｢wds｣: Content not from webpack is served from ./dist
ℹ ｢wdm｣: Hash: 64e4b1c18737d7ef1928
Version: webpack 4.41.2
Time: 298ms
Built at: 26/11/2019 11:12:40
         Asset      Size  Chunks             Chunk Names
    index.html  1.62 KiB          [emitted]
main.bundle.js   390 KiB    main  [emitted]  main
Entrypoint main = main.bundle.js
[0] multi (webpack)-dev-server/client?http://localhost:8080 (webpack)/hot/dev-server.js ./src/app.js 52 bytes {main} [built]
[./node_modules/webpack-dev-server/client/index.js?http://localhost:8080] (webpack)-dev-server/client?http://localhost:8080 4.29 KiB {main} [built]
[./node_modules/webpack-dev-server/client/overlay.js] (webpack)-dev-server/client/overlay.js 3.51 KiB {main} [built]
[./node_modules/webpack-dev-server/client/socket.js] (webpack)-dev-server/client/socket.js 1.53 KiB {main} [built]
[./node_modules/webpack-dev-server/client/utils/createSocketUrl.js] (webpack)-dev-server/client/utils/createSocketUrl.js 2.89 KiB {main} [built]
[./node_modules/webpack-dev-server/client/utils/log.js] (webpack)-dev-server/client/utils/log.js 964 bytes {main} [built]
[./node_modules/webpack-dev-server/client/utils/reloadApp.js] (webpack)-dev-server/client/utils/reloadApp.js 1.59 KiB {main} [built]
[./node_modules/webpack-dev-server/client/utils/sendMessage.js] (webpack)-dev-server/client/utils/sendMessage.js 402 bytes {main} [built]
[./node_modules/webpack-dev-server/node_modules/strip-ansi/index.js] (webpack)-dev-server/node_modules/strip-ansi/index.js 161 bytes {main} [built]
[./node_modules/webpack/hot sync ^\.\/log$] (webpack)/hot sync nonrecursive ^\.\/log$ 170 bytes {main} [built]
[./node_modules/webpack/hot/dev-server.js] (webpack)/hot/dev-server.js 1.59 KiB {main} [built]
[./node_modules/webpack/hot/emitter.js] (webpack)/hot/emitter.js 75 bytes {main} [built]
[./node_modules/webpack/hot/log-apply-result.js] (webpack)/hot/log-apply-result.js 1.27 KiB {main} [built]
[./node_modules/webpack/hot/log.js] (webpack)/hot/log.js 1.34 KiB {main} [built]
[./src/app.js] 0 bytes {main} [built]
    + 20 hidden modules
ℹ ｢wdm｣: Compiled successfully.

Desktop (please complete the following information): - OS: MaOS - Browser Chrome, Safari

Answer 1

try specifically setting the port in the webpack devServer config:

 devServer: {
    contentBase: "./dist",
    overlay: true,
    hot: true,
    port: 9000
    }