search

erikras / react-redux-universal-hot-example

A starter boilerplate for a universal webapp using express, react, redux, webpack, and react-transform
MIT License
12k stars 2.5k forks source link

Debugging in Webstorm #1089

Open ballwood opened 8 years ago

ballwood commented 8 years ago

Hi,

Fantastic project. I want to use it as a boilerplate for something I'm working on to save time in getting all the tooling right but finding it difficult to set up a debugging dev session for the api server using Webstorm. I've added a new configuration in Webstorm to run npm dev and edited package.json to look like this

"start-dev-api": {
  "command": "node $NODE_DEBUG_OPTION ./bin/api.js",
  "env": {
    "NODE_PATH": "./api",
    "NODE_ENV": "development",
    "APIPORT": 3030
  }
}

If I click run normally then everything runs ok and I can view the project at localhost:3000 but when I click debug run it just drops out to 

[2] ==> 🌎  API is running on port 3030
[2] ==> 💻  Send requests to http://localhost:3030
[1] ----
[1] ==> ✅  xyz is running, talking to API server on 3030.
[1] ==> 💻  Open http://localhost:3000 in a browser to view the app.

Process finished with exit code 130

does anyone have any pointers on how I could make this work?

frankleng commented 8 years ago

@ballwood try running it from babel-node instead.

richb-hanover commented 8 years ago

@ballwood Can you confirm that using babel-node worked? Would you also describe the Run > Edit configurations... settings you used to use the Webstorm debugger? Thanks.

gmadar commented 8 years ago

@frankleng @richb-hanover I'm having the same problem. What is babel-node?

frankleng commented 8 years ago

@gmadar http://babeljs.io/docs/usage/cli/#babel-node

malhar-trivedi commented 7 years ago

@richb-hanover I tried with babel-node and it worked. Although it requires me to debug from terminal. I would like to debug from webstorm itself.

I tried to use babel-node from webstorm but I got no success

/Users/sample/node_modules/.bin/babel-node --debug-brk=59407 --expose_debug_as=v8debug /Users/sample/bin/api.js
env: node: No such file or directory

Process finished with exit code 127
jasonworden commented 7 years ago

I can't get debugging within Webstorm working either.

Running the npm run dev config works fine in Webstorm:

/usr/local/bin/node /usr/local/lib/node_modules/npm/bin/npm-cli.js run dev

> react-redux-universal-hot-example@0.9.0 dev /Users/jason/code/react/pickems
> concurrent --kill-others "npm run watch-client" "npm run start-dev" "npm run start-dev-api"

[0] 
[0] > react-redux-universal-hot-example@0.9.0 watch-client /Users/jason/code/react/pickems
[0] > better-npm-run watch-client $NODE_DEBUG_OPTION
[0] 
[1] 
[1] > react-redux-universal-hot-example@0.9.0 start-dev /Users/jason/code/react/pickems
[1] > better-npm-run start-dev $NODE_DEBUG_OPTION
[1] 
[2] 
[2] > react-redux-universal-hot-example@0.9.0 start-dev-api /Users/jason/code/react/pickems
[2] > better-npm-run start-dev-api $NODE_DEBUG_OPTION
[2] 
[0] running better-npm-run in /Users/jason/code/react/pickems
[0] Executing script: watch-client
[0] 
[0] to be executed: node webpack/webpack-dev-server.js 
[1] running better-npm-run in /Users/jason/code/react/pickems
[1] Executing script: start-dev
[1] 
[1] to be executed: node ./bin/server.js 
[2] running better-npm-run in /Users/jason/code/react/pickems
[2] Executing script: start-dev-api
[2] 
[2] to be executed: node ./bin/api.js 
[1] (node:73527) DeprecationWarning: `DEBUG_FD` is deprecated. Override `debug.log` if you want to use a different log function (https://git.io/vMUyr)
[0] ==> 🚧  Webpack development server listening on port 3001
[0] (node:73526) DeprecationWarning: `DEBUG_FD` is deprecated. Override `debug.log` if you want to use a different log function (https://git.io/vMUyr)
[1] [webpack-isomorphic-tools] [error] `.development()` method is now deprecated (for server-side instance only, not for webpack plugin instance) and has no effect. Set up a proper `process.env.NODE_ENV` variable instead: it should be "production" for production, otherwise it assumes development. The currently used mode is: development. `process.env.NODE_ENV is: development
[1] (node:73530) DeprecationWarning: `DEBUG_FD` is deprecated. Override `debug.log` if you want to use a different log function (https://git.io/vMUyr)
[2] (node:73529) DeprecationWarning: `DEBUG_FD` is deprecated. Override `debug.log` if you want to use a different log function (https://git.io/vMUyr)
[2] ----
[2] ==> 🌎  API is running on port 3030
[2] ==> 💻  Send requests to http://localhost:3030
[1] ----
[1] ==> ✅  Pick-ems is running, talking to API server on 3030.
[1] ==> 💻  Open http://localhost:3000 in a browser to view the app.
[0] Hash: dde6978d936d550fc11a
[0] Version: webpack 1.14.0
[0] Time: 25042ms
[0]                                  Asset     Size  Chunks             Chunk Names
[0]   674f50d287a8c48dc19ba404d20fe713.eot   166 kB          [emitted]  
[0]   f4769f9bdb7466be65088239c12046d1.eot  20.1 kB          [emitted]  
[0]  fa2772327f55d8198301fdb8bcfc8158.woff  23.4 kB          [emitted]  
[0]   e18bbf611f2a2e43afc071aa2f4e1512.ttf  45.4 kB          [emitted]  
[0]   89889688147bd7575d6327160d64e760.svg   109 kB          [emitted]  
[0] 448c34a56d699c29117adc64c43affeb.woff2    18 kB          [emitted]  
[0] af7ae505a9eed503f8b8e6982036873e.woff2  77.2 kB          [emitted]  
[0]  fee66e712a8a08eef5805a46892932ad.woff    98 kB          [emitted]  
[0]   b06871f281fee6b241d60582ae9369b9.ttf   166 kB          [emitted]  
[0]   912ec66d7572ff821749319396470bde.svg   444 kB          [emitted]  
[0]           main-dde6978d936d550fc11a.js  9.63 MB       0  [emitted]  main
[0] webpack built dde6978d936d550fc11a in 25042ms

But running npm run dev in debug mode always ends abruptly about 5 seconds after things seems to be up and running (note how there is no sign of Webpack outputting its builds).

/usr/local/bin/node /usr/local/lib/node_modules/npm/bin/npm-cli.js run dev

To debug the "dev" script, make sure the $NODE_DEBUG_OPTION string is specified as the first argument for the node command you'd like to debug.
For example:
 { "start": "node $NODE_DEBUG_OPTION server.js" }

> react-redux-universal-hot-example@0.9.0 dev /Users/jason/code/react/pickems
> concurrent --kill-others "npm run watch-client" "npm run start-dev" "npm run start-dev-api"

[1] 
[1] > react-redux-universal-hot-example@0.9.0 start-dev /Users/jason/code/react/pickems
[1] > better-npm-run start-dev $NODE_DEBUG_OPTION
[1] 
[0] 
[0] > react-redux-universal-hot-example@0.9.0 watch-client /Users/jason/code/react/pickems
[0] > better-npm-run watch-client $NODE_DEBUG_OPTION
[0] 
[2] 
[2] > react-redux-universal-hot-example@0.9.0 start-dev-api /Users/jason/code/react/pickems
[2] > better-npm-run start-dev-api $NODE_DEBUG_OPTION
[2] 
[1] running better-npm-run in /Users/jason/code/react/pickems
[0] running better-npm-run in /Users/jason/code/react/pickems
[1] Executing script: start-dev
[1] 
[1] to be executed: node ./bin/server.js --debug-brk=65314 --expose_debug_as=v8debug
[0] Executing script: watch-client
[0] 
[0] to be executed: node webpack/webpack-dev-server.js --debug-brk=65314 --expose_debug_as=v8debug
[2] running better-npm-run in /Users/jason/code/react/pickems
[2] Executing script: start-dev-api
[2] 
[2] to be executed: node ./bin/api.js --debug-brk=65314 --expose_debug_as=v8debug
[1] (node:73503) DeprecationWarning: `DEBUG_FD` is deprecated. Override `debug.log` if you want to use a different log function (https://git.io/vMUyr)
[0] ==> 🚧  Webpack development server listening on port 3001
[0] (node:73504) DeprecationWarning: `DEBUG_FD` is deprecated. Override `debug.log` if you want to use a different log function (https://git.io/vMUyr)
[1] [webpack-isomorphic-tools] [error] `.development()` method is now deprecated (for server-side instance only, not for webpack plugin instance) and has no effect. Set up a proper `process.env.NODE_ENV` variable instead: it should be "production" for production, otherwise it assumes development. The currently used mode is: development. `process.env.NODE_ENV is: development
[1] (node:73507) DeprecationWarning: `DEBUG_FD` is deprecated. Override `debug.log` if you want to use a different log function (https://git.io/vMUyr)
[2] (node:73506) DeprecationWarning: `DEBUG_FD` is deprecated. Override `debug.log` if you want to use a different log function (https://git.io/vMUyr)
[2] ----
[2] ==> 🌎  API is running on port 3030
[2] ==> 💻  Send requests to http://localhost:3030
[1] ----
[1] ==> ✅  Pick-ems is running, talking to API server on 3030.
[1] ==> 💻  Open http://localhost:3000 in a browser to view the app.

Process finished with exit code 130 (interrupted by signal 2: SIGINT)

I've tried multiple variants of the npm scripts in package.json. The results above are from using the scripts as the following:

"scripts": {
    "start": "concurrent --kill-others \"npm run start-prod\" \"npm run start-prod-api\"",
    "start-prod": "better-npm-run start-prod",
    "start-prod-api": "better-npm-run start-prod-api",
    "build": "better-npm-run build",
    "postinstall": "npm run build",
    "lint": "eslint -c .eslintrc src api",
    "start-dev": "better-npm-run start-dev $NODE_DEBUG_OPTION",
    "start-dev-api": "better-npm-run start-dev-api $NODE_DEBUG_OPTION",
    "watch-client": "better-npm-run watch-client $NODE_DEBUG_OPTION",
    "dev": "concurrent --kill-others \"npm run watch-client\" \"npm run start-dev\" \"npm run start-dev-api\"",
    "test": "karma start",
    "test-node": "./node_modules/mocha/bin/mocha $(find api -name '*-test.js') --compilers js:babel-core/register",
    "test-node-watch": "./node_modules/mocha/bin/mocha $(find api -name '*-test.js') --compilers js:babel-core/register --watch"
  },

I haven't tried babel-node... I'll give that a whirl.

eric-xujun commented 7 years ago

I have the same problem! @jasonworden @gmadar

stephshelley commented 7 years ago

Same problem here - @jasonworden @gmadar were you able to figure out a solution?

gmadar commented 7 years ago

@eric-xujun @stephshelley - try: "start-dev-api": { "command": "node $NODE_DEBUG_OPTION --expose_debug_as=v8debug --debug ./bin/api.js", "env": { "NODE_PATH": ".:./api", "APIPORT": 3030 } }, in the better-npm script. I haven't tested it but a colleague of mine said it worked for him