How to fix directory resolve errors when local project folder structure does not match the webserver folder structure
I have an issue mapping my local project folder structure to the corresponding webserver folder structure in WebStorm. (I currently use WebStorm 2018.2).
My local folder structure is defined by my company's Git repository and a change request will probably be refused, so I am not allowed to change it. The online folder structure is defined by DevOps and the webserver configuration and I am not able to (easily) change that structure either.
So I would prefer a way in WebStorm to "map" the local directory structure to a virtual project structure that fits the webserver structure. Otherwise, references in several HTML/JavaScript files to several other CSS/JavaScript files generate inspection errors ("cannot resolve directory [...]").
The Git repository file structure (simplified) looks like this:
E:\Repositories\MyProject\app\css\app.css
E:\Repositories\MyProject\app\js\app.js
E:\Repositories\MyProject\app\js\app-extra.js
E:\Repositories\MyProject\app\index.html
E:\Repositories\MyProject\library\css\module1.css
E:\Repositories\MyProject\library\css\module2.css
E:\Repositories\MyProject\library\js\helpers.js
E:\Repositories\MyProject\library\js\module1.js
E:\Repositories\MyProject\library\js\module2.js
E:\Repositories\MyProject\library\module1test.html
E:\Repositories\MyProject\library\module2test.html
And the corresponding webserver file structure looks like this:
http://myserver/css/app.css
http://myserver/js/app.js
http://myserver/js/app-extra/js
http://myserver/index.html
http://myserver/lib/css/module1.css
http://myserver/lib/css/module2.css
http://myserver/lib/js/helpers.js
http://myserver/lib/js/module1.js
http://myserver/lib/js/module2.js
http://myserver/lib/module1test.html
http://myserver/lib/module2test.html
The structures above are heavily simplified, but they reflect the actual local folder structure and webserver folder structure accurately enough.
Currently I am restructuring and refactoring our frontend projects (including a migration to TypeScript) so I need simultaneous access to the app sources and the library sources within the same WebStorm project and tune these files' relations/dependencies.
For testing purposes, I have installed a local Apache webserver on my computer, which is freely configurable by myself.
Currently it maps DocumentRoot "E:\Repositories\MyProject\app" to VirtualHost *:8080 and it uses an alias "/lib" that maps to "E:\Repositories\MyProject\library".
So in the above server structure, "myserver" might be replaced by "localhost:8080" for testing purposes.
And everything works fine in both the actual server production environment as well as in my local test environment.
My attempt so far to get WebStorm working correctly is to use "E:\Repositories\MyProject" as WebStorm's project folder and include a mapping for the "lib" server folder in the project's deployment settings, but that does not seem to help fixing my issue. Those annoying errors/warnings in WebStorm still remain. In the project's deployment settings, I tried both "In place" and "Local or mounted folder" as the connection type. Both with no noticeable effect. (I assume that "In place" should be the correct setting in my case.)
The only procedure that fixes my WebStorm errors correctly is to manually rename all file references in the source code by hand during development and change them back again right before testing. (I preferably don't want to express my personal feelings regarding this "solution" for handling this issue...)
Does anybody have any ideas?
Please sign in to leave a comment.
You can mark `app` folder as Resource root (Mark directory as/Resource root) - this would fix the errors for URLs like /css/app.css. But unfortunately there is no simple way to map `lib` to `library`... Webpack and System.js aliases are only supported for javascript imports, they aren't resppected in HTML:(