Webpack - turning off requests to /sockjs-node/info or specifying a different port

Question

I run Django and Vue together and the combination works fairly well. Django runs on http 8000 and webpack dev server chugs along on port 3000, JS or Vue changes get compiled automatically and I just have to reload the page (this is not an SPA app).

Django-webpack loader is used to serve the bundles via tags like:

I do not use Vue-CLI and have no intention to move from a Django to a Node frontend.

Life is good, everything else works fine.

The only annoying bit is repeat requests like this:

http://localhost:8000/sockjs-node/info?t=1607750560606

This is what the devtools show for host:port requests. App is on 8000 w. Django, bundles 3000 with devServer, socksjs needs to be on 3000 too.

Now, Django doesn't find that resource so its log clutters up with 404. I actually coded a 410 instead, but, no, Vue is just going to ping and ping and ping that 410.

#urls.py
url("^sockjs-node/info", views.nodeinfo),

#views.py
def nodeinfo(request):
    return HttpResponseGone()

Now, I have tried to look for this. The answers on the Vue forum are multiple and most involve changing to vue.config.js, located next to package.json.

UPDATE: since I am NOT using Vue-cli, it seems the settings need to go in webpack.config.js instead.

After trying 2 or 3 of the suggestions, most of which don't seem to make much sense (a localhost question ends up with a "fix" consisting of a devserver entry pointing to 0.0.0.0 for example), none of them work.

devServer configs which have NOT helped:

{
    hot: false,
    port: 3000
};

{public: 'localhost:3000'}

{sockPort: 3000}

{sockPort: 3000,sockHost: 'localhost'}

{inline: false}

None of the threads I have seen seem to hold very authoritative answers. Or, more likely, I can't find the correct answer in all the noise that is being posted.

(I did see one suggesting to change the webpack command instead by adding --no-inline flag, but haven't tried it out).

I won't be running node in production, will only run webpack bundling to staticfiles. I don't care about https here. I also don't care to get sockjs working by reconfiguring stuff - things work perfectly well without whatever is missing, so turning it off can't hurt.

I ONLY want those requests to STOP going out from the client code. Entirely. How do I do that?

(P.S. If you want to answer, please indicate in what way your proposed contents of vue.config.js address the issue - I have just seen too many this fixed it with not the slightest bit of info on how the configuration contents serve to turn this off. That means whoever uses that solution doesn't understand it and uses copy-and-pray programming).

Versions:

vue@2.6.11
webpack-dev-server@3.11.0
npm --version 6.14.6
node --version v10.15.0

Last but not least, these are my webpack goals:

Watch and recompilation on the server whenever I change the JS/Vue files, bundles on 3000 are refreshed.
The main server functionality stays with Django serving up html via server-side templates, on a different port than node's devServer.
No need for hot module reload on client. It is perfectly OK for me to keep using the stale bundles until I refresh the page. This is not, and could not be, an SPA or Node frontend app.

user_2185093 · Answer

(OP's edit: this answer got the bounty, because it told me Vue was less relevant here than Webpack and because my investigation of Webpack's relevant configuration option then showed nothing that manage to turn off these requests. The takeaway I have for now is that this can't be done - as far I understand, if Django is serving at :8000 then Webpack HMR's implicitly expects to be able to poll at the same host:port, without an option to re-route or turn it off. So, the tentative answer is more of a no, can't be done).

Since you're not using the Vue CLI, you'd need a webpack.config.js, rather than vue.config.js. Assuming your devServer is running at localhost:3000, (I'm not certain about your non-standard setup) you can try this in webpack.config.js in your project root:

module.exports = {
  devServer: {
    host: 'localhost',
    port: 3000
  }
};

If this doesn't work, I recommend recreating your project with Vue CLI and using a separate repo/package.json for your backend in a server folder.

user_750544 · Answer

To add to the accepted answer: Additional requests to http://localhost:8000/sockjs-node/info?t=123 with the wrong port may be caused by a webpack plugin. In my case the culprit was ReactRefreshWebpackPlugin. The solution was to tell that plugin which port webpack dev server was on:

// …in webpack.config.js…

plugins: [
  isDevelopment && new ReactRefreshWebpackPlugin({
    overlay: {
      sockPort: 3000, // <-- Tell plugin which port WDS is running at
    },
  }),
].filter(Boolean),

devServer: {
  hot: true,
  port: 3000, // I used port 3000 here because of the setup in OP's question
}

Docs: https://github.com/pmmmwh/react-refresh-webpack-plugin

Webpack - turning off requests to /sockjs-node/info or specifying a different port

Last but not least, these are my webpack goals:

2 Answers