[WebStorm]: Change Debugging WebServer Project Root

Question

Since recently, I've been using JetBrains WebStorm and I absolutely love it, but I do have an issue, and after hours of searching here and in the documentation, I decided to open my own question because I just don't find it.

I do have a project which is stored on my Local Machine on the following location: C:\Projects\Github\OfficeUI.Beta

Now, I've opened up this folder in WebStorm, which causes it to looks like the following:

When I debug the WebSite right now, everything is running under the following Uri: http://localhost:63342/OfficeUI.Beta/

And there is the issue with it, because it's running in this Directory, in every CSS, JavaScript and other files, I need to place the following: /OfficeUI.Beta/Resources/..., while I would like to use: /Resources/...

How should this be done? I guess I need to modify WebStorm configuration to run the website under the root http://localhost/ but I don't manage to find it.

Any help is highly appreciated.

Answer 1

According to the Help page the URL has to be http://localhost:<built-in server port>/<project root>. There is however a workaround:

Edit your /etc/hosts file:

127.0.0.1 projectName

And set custom port: Settings -> Debugger -> JavaScript -> Built-in server port 8090. In newer version it should be: Settings -> Build, Execution, Deployment -> Debugger

The URL will be: http://projectName:8090

Another workaround would be to use the PHP built-in server, where it's possible to define the document root. But this doesn't offer Javascript debugging.

Answer 2

As Darek Kay already suggested, the only "workaround" I'm aware of in order to use WebStorm's Built-in Server with absolute URLs is to edit your /etc/hosts file (on Mac/Linux) or C:\Windows\System32\drivers\etc\hosts file (on Windows). In your case, you would change the line 127.0.0.1 localhost to 127.0.0.1 OfficeUI.Beta. Then, you would set a custom port for the Built-in Server by going to Settings -> Debugger -> JavaScript -> Built-in server port 8090 (on older versions of WebStorm) or by going to Settings -> Build, Execution, Deployment -> Debugger -> Built-in server port 8090 (on newer versions of WebStorm). Once you've done this, you should be able to go to http://OfficeUI.Beta:8090 and absolute URLs should work.

I would opt in for a local web server setup (Apache, MAMP, WAMP, etc) to host your web project since WebStorm's Built-in Server is very basic and doesn't address this use case.

I got this information by visiting http://blog.jetbrains.com/webstorm/2013/03/built-in-server-in-webstorm-6/ and looking at the comment by Vladimir Krivosheev on July 2, 2013 at 6:52 am.