Proxy server problem when debugging express server

Hi,
I have a vue-cli project with vue.config.js as follows:

const path = require('path');
function resolve(dir) {
  return path.join(__dirname, dir);
}

module.exports = {
  configureWebpack: {
    resolve: {
      alias: {
        'style': resolve('src/css')
      }
    }
  },
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:3000/',
        ws: true,
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  },
  chainWebpack: (config) => {
    // Remove the standard entry point
    config.entryPoints.delete('app');

    // Then add custom entries
    config.entry('app')
      .add('./src/main.ts')
      .end()
      .entry('styling')
      .add('./src/css/base.scss')
      .add('animate.css')
      .end();
  },
  productionSourceMap: false
};

I am proxying api calls to an express server running on localhost. This all works until I try to attach a debugger to the server. When I start the express server with the inspect, flag, the proxying from the vue app fails. The first API call returns the message: ‘WebSockets request was expected’.

I have tried debugging express using Jetbrains and just running it from the command line:

node --inspect=3000 backend

Thanks in advance!

1 Like

I will answer my own question here:

The debugger needs to run on a separate port from the server. So one can run the server just using:

node --inspect myserverscript

without specifying the port. By default the debugger runs on port 9229, while express does its thing on port 3000. I found that if I set up a node.js debug configuration in Intellij / Webstorm, I had to specify the port for the breakpoints to work, i.e.:

node --inspect=9229 myserverscript

So not strictly related to the Vue proxy server, but this may be useful to someone.