Handling Multiple source directories in WebStorm


I have newly started using WebStorm for my project. I am using ExtJS libraries for my UI development. I wanted to have multiple source directory inside my project. for e.g.



Index.html uses Main.js file.Inside Main.js, i want to use the header.png like:
       items : [

Is it possible to tell WebStorm that my source files are present inside different folders and it can parse the source folders and search for the file. I was looking at the concept of Content Root with resouce root option. I made the custom and webapp folders as Content root with resource root option. But, Main.js is not able to find out the header.png file defined in other source folder. When i load the index.html file, header.png does not appear.

Could somebody please guide me on this?

Comment actions Permalink

After re-reading your post, I'm not certain the libraries, as I described, will actually help you.  

I'm curious, at this point, if you aren't experiencing more of a directory-structure issue.  I'd have to see more of your implementation, but your JS is referencing the image via incomplete path.  The ORG folder is nested inside the CUSTOM folder, but your JS references the image starting with "org/".

I have a similar situation, in that I have a number of components to work with, with a global set of JS and component-dependent JS.  When I find myself working exclusively on a component, I add the global JS as a library.  Webstorm won't treat it as multiple sources per se - you won't see the files listed in your Project tab - the references will be there in all your suggestions and auto-complete menus.  Extremely handy.

Go to Preferences -> JavaScript Libraries -> Add.  You can choose the source folder for your alternate directories, and even hand-pick which files to include in the library.  More info here: http://www.jetbrains.com/webstorm/webhelp/configuring-javascript-libraries.html

Happy Programming

Message was edited by: Jason Corns

Comment actions Permalink

Hi Jason,

Thanks for replying. My requirement is that i want to keep images, css and other string Resources files inside custom folder. All other JS files which has logic to create the UI components (using EXT-JS) will reside inside the webapp folder. During build time, we ll move the files present inside custom folder to webapp folder (in same folder structure as they are in custom folder) so that they ll be available to JS files when deployed under a Web Server.

But, while development, I want the files present inside webapp folder to be able to access files present inside custom folder as if they are residing inside webapp folder only (in the same folder sturcture as they are inside custom folder). Thats why, In the previous code, i am trying to access org/images/header.png from Main.js as if it is present inside webapp folder (like webapp/org/images/header.png).

While debugging from Webstorm, I want webstorm to resolve this path so that when Main.js tries to find out org/images/header.png, that WebStorm should find it out inside custom folder.

I tried the concept of creating custom library as you suggested below. But, I am not able to include images, css and html files inside the custom library. So, files inside custom folder are not available globally to files under webapp folder.



Please sign in to leave a comment.