Remote Webpack debugging Angular-cli v6 / WebPack on Apache

I am using PhpStorm 2018.1.6 and need to debug and Angular-CLI v6 application running on a remote Apache server.  I am unable to get the breakpoints to fire although the debug console displays console.log messages.

I can run and debug when using the development server using the following command:

"ng serve --disable-host-check --public-host=myserver.com --host=0.0.0.0"

The he following build command will create a development build and put the .js and .map files in dist/test3/dist. 

"ng build --watch --base-href=/PHP/test3/dist/test3/"

The URL to access this build is

http://myserver.com/PHP/test3/dist/test3/

The app will run as expected but will not stop on set break points.

The source is in

http://myserver.com/PHP/test3

How can I configure PhpStorm to use the local source and the remote map files to fire breakpoints.

Thanks for all your help.

6 comments

Just checked this - debugging works out of the box:

my debug condiguration:

 

I have deployment mappings set up as follows (I'm deploying files located in C:\downloads\test3 to Apache server):

 

Build is started with

"ng build --watch --base-href=/PHP/test3/dist/test3/"

 

 

0

Thank you for your assistance.  Using your example, I was able to do the same with a windows based Apache server local to my work PC.  Debugging worked as you indicated.  When running you will notice a similar scripts configuration in the debug tool:

 

Note the mapping of the ng:// and webpack://. URLs

When the debug is configured to use a remote (Linux) Apache server connected using SSH, the webpack:// mapping is missing.:

 

I have tried following the suggestions found here by adding webpack://. with various numbers of slashes (/) to no effect.

 

Suggestions?

0

I don't actually think that the server location makes any difference here... What do your deployment settings look like? Please provide screenshots of Settings | Build, Execution, Deployment | Deployment, Connection and Mappings tabs, and screenshot of your run configuration

0

Just checked - debugging works on remote Apache accessed through ssh (sftp). My deployment preferences:

0

Thank you for your post. I rebuild a clean angular-cli 6 project and now both local and remote debugging works as expected.

 

Now if I could only get the live reload feature to work when use ng build --watch like it does when doing ng serve.

0

Live reload functionality is something that the server provides. ng build -w only builds files and not serve them. And Apache, AFAIK, doesn't provide its own hot reload support, unlike webpack dev server that is used by ng serve

0

Please sign in to leave a comment.