proxy option not working/webpack-dev-server debugging advice

[partizanos]

Hello I am trying to make the proxy to work for the localhost on the client side.
I don't know why the proxy option on the package.json file of my project does not have the desired effect of forwarding the request to the proxy server, which is running on port
{
{... },
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject",
},
"proxy": "http://localhost:3001"
}

`

(In the same project I had managed to forward it before but I am not sure why it does not work anymore)

To solve the problem above I am trying to put a breakpoint on the start.js script too, on the part that is checking for the proxy option

`

.....['text/html', '/']
}));

debugger;
//start.js script line 87
if (proxy) {
if (typeof proxy !== 'string') {
console.log(chalk.red('When specified, "proxy" in package.json must be a string.'));
console.log(chalk.red('Instead, the type of "proxy" was "' + typeof proxy + '".'));
console.log(chalk.red('Either remove "proxy" from package.json, or make it a string.'));
process.exit(1);`
but the debugger statement doesnt work either.

My two questions are :

1. if anyone has some idea of what could be wrong with the proxy,
   2.how I could breakpoint the webpack dev server or see the its logs apart from the linting errors

Thank you in advance

[codedavinci]

How are you testing it ?

[partizanos]

I am not sure on which one you meant but I will describe for both.

1. About the the proxy:
   For the proxy server I have it running locally on different port.
   It's accessible through chrome so its working normally.
   Yesterday some hours later after writing the commend I managed to have it running but I didn't do any action for it.
   Today again the proxy doesn't work I am trying to restart everything and I will see how it goes.

2. About the web dev server breakpoint:
   I tried with:
   -debugger; (command I put in the node_modules which in my understanding is where the
   -webpack-dev-server code is running from)
   -webstorm breakpoints (possibly configuration error)
   node --debug (which runs a web server in and lets develop at chrome dev tools, i was a bit confused it runs it seperately and I cannot find how to breakpoint when the initial page is requested for example)

[codedavinci]

Could you please post the code or share the repo for some insights please :) ?

[partizanos]

Goodmorning codedavinci and thank you for answering

small Update: Today the proxy redirection works.
I restarted my computer possible that fixed something I am not aware of.
But I am still unable to pause with with a breakpoint the web-dev-server so I will focus on that,
unfortunately I don't have permission to open source... I will try it

For the story
This is the package.json file of the project :
{
"name": "xxx",
"version": "xxxx",
"private": true,
"devDependencies": {
"react-scripts": "0.9.5"
},
"dependencies": {
"jQuery": "^1.7.4",
"react": "^15.5.4",
"react-dom": "^15.5.4"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
},
"proxy": "http://localhost:3001"
}

Running npm install creates a folder of npm_modules one of them is react-scripts.
What I want to do is to manage to pause and see the contents of the variables the script in the runtime of the script.
Specifically I am tryingI want to pause the line 181 in start.js script when there is a an ajax request from the client app.

I will try to create a small project and upload it for the shake of the example.
In general how do you debug npm_modules dependencies because I try doing it like normal nodeJS code but maybe its not the case...

[codedavinci]

No problem at all @dimitrius. Node_modules is the folder of third party dependencies. It's usually not advised to debug or change this code because it is what sustain the react CLI. Think as if it's the config files where magic happens. But if you do go through a case where you need to debug, I advise you to set some console.log() or just go through the log file generated based on the error. Hope it helps you

…

On Jun 20, 2017 4:04 AM, "Dimitrios Proios" ***@***.***> wrote: Goodmorning codedavinci and thank you for answering small Update: Today the proxy redirection works. I restarted my computer possible that fixed something I am not aware of. But I am still unable to pause with with a breakpoint the web-dev-server so I will focus on that, unfortunately I don't have permission to open source... I will try it For the story This is the package.json file of the project : { "name": "xxx", "version": "xxxx", "private": true, "devDependencies": { "react-scripts": "0.9.5" }, "dependencies": { "jQuery": "^1.7.4", "react": "^15.5.4", "react-dom": "^15.5.4" }, "scripts": { "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test --env=jsdom", "eject": "react-scripts eject" }, "proxy": "http://localhost:3001" } Running npm install creates a folder of npm_modules one of them is react-scripts. What I want to do is to manage to pause and see the contents of the variables the script in the runtime of the script. Specifficaly I am tryingI want to pause the line 181 in start.js script when there is a an ajax request from the client app. I will try to create a small project and upload it for the shake of the example. In general how do you debug npm_modules dependencies?? — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#2566 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/ARCUe6FZGfTpCPCtAEXdFJlAWU-yanKsks5sF3z4gaJpZM4N-KnM> .

[partizanos]

console.log() /dir() work fine in debugging. It will help next time I hope.
Is there anyway to run the npm run script with --debug option (that opens chrom dev tools)?

[codedavinci]

@partizanos, I am afraid you may not have this option as the node_modules folder is supposed to be static and untouched, those dependencies are maintained by other repos.
What would be the goal on debugging react-scripts for instance? what would you like to achieve by debbuging react-scripts ?

If you feel that the CLI isn't properly working for you, you could always eject and add your customized configuration; But remember once you eject, there's no way to come back.

[partizanos]

I just thought since the react-scripts it's running on nodeJS environment it might be possible to run it with an option.
I saw it mentioned in stackoverflow too: https://stackoverflow.com/questions/9633280/can-i-add-a-debug-script-to-npm

with something like:
"scripts": { "debug": "node --debug server.js" }
The point of something like this to have the stack trace and breakpointing during development.

[gaearon]

Going to close since the issue appears resolved.