Search code examples
vuejs3vitevscode-debuggerwebpack-hmr

Can't run the server with debug Vue3 Vite app in Docker with VS Code

I'm trying to setup development environment and run Vue3 Vite app inside Docker container. I also would like to have ability to "attach" to that app and make use of VS Code debugging. I found some info how to do that, but after I implemented these changes the app is not openning anymore, the page is blank when I go to website. The port (8080) is open, I checked it with telnet.

This is what I've done:

package.json

"debug": "node --inspect-brk=0.0.0.0:9229 node_modules/vite/bin/vite.js",

vite.config.js

server: {
...
hmr: { host: '0.0.0.0' },
}

Dockerfile

EXPOSE $VITE_PORT 9229
CMD  npm run debug

There is no errors in docker logs.


> [email protected] debug
> node --inspect-brk=0.0.0.0:9229 node_modules/vite/bin/vite.js

Debugger listening on ws://0.0.0.0:9229/53fba2df-2147-4ed4-a493-daa9ff2b3a88
For help, see: https://nodejs.org/en/docs/inspector
Debugger attached.

  VITE v4.3.9  ready in 1037 ms

  ➜  Local:   http://localhost:8080/
  ➜  Network: use --host to expose
Debugger ending on ws://0.0.0.0:9229/53fba2df-2147-4ed4-a493-daa9ff2b3a88
For help, see: https://nodejs.org/en/docs/inspector
(venv) user:~/project/frontoffice$

UPDATE:

  1. npm run dev works inside docker
  2. tried both --inspect and --inspect-brk
  3. works if I run npm run debug locally, without docker
  4. netstat from docker
root@c87845a98941:/app# netstat -tuln
Active Internet connections (only servers)
Proto Recv-Q Send-Q Local Address           Foreign Address         State      
tcp        0      0 127.0.0.11:39369        0.0.0.0:*               LISTEN     
tcp        0      0 0.0.0.0:9229            0.0.0.0:*               LISTEN     
tcp        0      0 127.0.0.1:8080          0.0.0.0:*               LISTEN     
udp        0      0 127.0.0.11:56572        0.0.0.0:*
  1. telnet localhost 8080 from host
$ telnet localhost 8080
Trying 127.0.0.1...
Connected to localhost.
Escape character is '^]'.
Connection closed by foreign host.
Solution

  • I finally made it working, I needed --host flag

    "debug": "node --inspect=0.0.0.0:9229 node_modules/vite/bin/vite.js --host --port 8080"