Skip to content

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

Closed
@partizanos

Description

@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

Activity

codedavinci

codedavinci commented on Jun 20, 2017

@codedavinci

How are you testing it ?

partizanos

partizanos commented on Jun 20, 2017

@partizanos
Author

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

codedavinci commented on Jun 20, 2017

@codedavinci

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

partizanos

partizanos commented on Jun 20, 2017

@partizanos
Author

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

codedavinci commented on Jun 20, 2017

@codedavinci
partizanos

partizanos commented on Jun 20, 2017

@partizanos
Author

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

codedavinci commented on Jun 20, 2017

@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

partizanos commented on Jun 20, 2017

@partizanos
Author

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

gaearon commented on Jun 22, 2017

@gaearon
Contributor

Going to close since the issue appears resolved.

locked and limited conversation to collaborators on Jan 21, 2019
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

      Development

      No branches or pull requests

        Participants

        @gaearon@partizanos@codedavinci

        Issue actions

          proxy option not working/webpack-dev-server debugging advice · Issue #2566 · facebook/create-react-app