Missing proxy context entry in webpack dev config causes 404 for websocket tracker requests

[HereThereBeMonsters]

Overview of the issue

There's a missing entry in the proxy config in webpack.dev.js for the websocket endpoint. This causes all websocket requests to get 404 errors in dev mode.

Motivation for or Use Case

Websockets tracker doesn't work.

Reproduce the error

Generate project with (see full .yo-rc file for details) Kotlin + Vue + Websockets. Start the backend, and the front end using npm start. Open app in browser. Check the console.

Suggest a Fix

Add '/websocket/tracker' in the list of contexts for the proxy for the webpack dev server.

JHipster Version(s)

└─┬ generator-jhipster-vuejs@1.7.0
  └── generator-jhipster@6.8.0 

JHipster configuration, a .yo-rc.json file generated in the root folder

.yo-rc.json file

{
  "generator-jhipster": {
    "promptValues": {
      "packageName": "",
      "nativeLanguage": "en"
    },
    "jhipsterVersion": "6.8.0",
    "applicationType": "monolith",
    "baseName": "ardezo",
    "packageName": "",
    "packageFolder": "",
    "serverPort": "8080",
    "authenticationType": "jwt",
    "cacheProvider": "caffeine",
    "enableHibernateCache": true,
    "websocket": "spring-websocket",
    "databaseType": "sql",
    "devDatabaseType": "h2Disk",
    "prodDatabaseType": "postgresql",
    "searchEngine": false,
    "messageBroker": false,
    "serviceDiscoveryType": false,
    "buildTool": "maven",
    "enableSwaggerCodegen": false,
    "jwtSecretKey": "",
    "embeddableLaunchScript": false,
    "useSass": true,
    "clientPackageManager": "npm",
    "clientFramework": "vue",
    "clientTheme": "flatly",
    "clientThemeVariant": "primary",
    "creationTimestamp": 1588378448422,
    "testFrameworks": [],
    "jhiPrefix": "jhi",
    "entitySuffix": "",
    "dtoSuffix": "DTO",
    "otherModules": [
      {
        "name": "generator-jhipster-vuejs",
        "version": "1.7.0"
      },
      {
        "name": "generator-jhipster-kotlin",
        "version": "1.6.0"
      }
    ],
    "enableTranslation": true,
    "nativeLanguage": "en",
    "languages": ["en", "fr", "es"],
    "blueprints": [
      {
        "name": "generator-jhipster-vuejs",
        "version": "1.7.0"
      },
      {
        "name": "generator-jhipster-kotlin",
        "version": "1.6.0"
      }
    ]
  }
}

JDL for the Entity configuration(s) entityName.json files generated in the .jhipster directory

JDL entity definitions

Environment and Tools

openjdk version "11.0.6" 2020-01-14 OpenJDK Runtime Environment AdoptOpenJDK (build 11.0.6+10) Eclipse OpenJ9 VM AdoptOpenJDK (build openj9-0.18.0, JRE 11 Linux amd64-64-Bit Compressed References 20200116_433 (JIT enabled, AOT enabled) OpenJ9 - 6968c18d7 OMR - 7a1b0239a JCL - 104cab2452 based on jdk-11.0.6+10)

git version 2.25.1

node: v12.14.1

npm: 6.13.4

yeoman: 3.1.1

Browsers and Operating System

OS: Kubuntu 20.04

[HereThereBeMonsters]

:+1: That was fast!

[HereThereBeMonsters]

@ruddell I found another problem in the webpack config: the proxy config for webpack dev server and for browser sync were both missing the "ws: true" parameter for websockets proxying to work.

After adding it to both, the user tracker works fine, using websocket transport, on port 9060 (webpack dev server) and 9000 (browsersync).

[ruddell]

@HereThereBeMonsters Those cases should be covered by my above PR. I tested the master version of the vuejs blueprint and could successfully use WebSockets on port 8080, 9060, and 9000. Note that the fix is not released yet, so testing will require you to link the generator locally (or just apply the changes from the PR).

If there's still an issue with WebSockets and the Vue blueprint, please open a PR or issue at the repo https://github.com/jhipster/jhipster-vuejs

[HereThereBeMonsters]

OK, thanks for the feedback. I actually haven't re-tested, I fixed it in my config and got going with my project. Just wanted to mention it in case you missed it.