Develop Reference

JavaScript getting under other JavaScript's hierarchy - PhpStorm

I am trying to work PHP project using PhpStorm.
I am having an issue that one JavaScript file does not show up properly under Project folder.
According to Windows folder structure, this js file (bootstrap.min.js) exists on same folder (without any hierarchy structure).
But, inside PhpStorm, it shows up under other js file.
Is there any reason it behaves like this?
Is it anything to do with Bootstrap?

This is a new-ish thing with PHPStorm (and the rest of the family).
In general, something.min.js is the code minified version of something.js, and you generally don't care to ever open the minified version in your editor.
So, PHPStorm shows it under the one that has the unminified, human-readable version of the code.
It's not actually changing the file system at all, it's just trying to help clean up the Project window a bit.

But, inside PhpStorm, it shows up under other js file.
It's called "nesting" and it's purely visual thing -- no changes at actual file system level.
It's convenient when you have source and processed/generated files (e.g. TypeScript source and generated .js and .map files; Sass source and generated .css and .map files etc). This way you see only source (in which you are interested the most for editing purposes) and generated files are hidden (so more files can fit the screen).
Is it anything to do with Bootstrap?
No.
You can create another file (e.g. test.js and test.min.js) and it will be nested in a similar fashion.
Is there any reason it behaves like this?
It's a relatively new feature (v2016.3 or so).
To be precise it's an old feature (PhpStorm v6 or so) .. but before it worked based on File Watcher settings (and file must have been processed by File Watcher in order to be nested) .. while now (since 2016.3 I believe) it's completely separate functionality and matching happens by simple patterns.
As of 2017.2 IIRC you can edit those patterns as you wish (in earlier versions they were hardcoded) -- just choose File Nesting... in Project View panel content menu (e.g. under "cog" icon).

How to refer JS files like componenet and use acrsoss the web application [duplicate]

In case the question wasn't clear. I have 3 MVC projects in one Solution. Every time I create a new project it adds the "Scripts" folder with all the .js files I'll ever need. I don't want to have this created every time for every application. Is there a way to reference scripts from a central folder in the solution so all applications/projects can share one common script folder with all the scripts common among them?
Edit:
Please explain the pros and cons of doing this if there are any...now I'm curious.

Here is what I would recommend:
Right click the solution and create a New Solution Folder called Common Javascript Files (or whatever you feel like calling it.
Right click on the Solution, click Open Folder in Windows Explorer,
or navigate there manually for other versions of Visual Studio :(
In the solution directory, create a directory with the same name as the solution folder (solution folders do not normally match directories at the source code level but this will for sanity sake).
In this new directory, add files that need to be shared between solutions.
In Visual Studio, click the solution folder and select Add - Existing Item.
In the file selection dialog, navigate to the directory previous created, select the file(s) added to the directory and click Add.
In each Project that needs a shared file, right click on the project (or directory within the project) and click Add - Existing Item.
Navigate to the shared Directory, Select the files and click the drop down arrow then click Add As Link.
Now the files in the projects are essentially short cuts to the files in the Solution Folder. But they are treated as actual files in the project (this includes .CS or Visual Basic files, they will be compiled as files that actually exist in the project).
PROS
Files are truly shared across projects at Design time
Only the files needed for each project can be added, it's not all or nothing
Does not require any configuration in IIS (virtual directory etc)
If the solution is in TFS Source control, you can add the Directory to the TFS Source and the shared files will be source controlled.
Editing a file by selecting it in the Project, will edit the actual file.
Deleting a Linked file does not delete the file.
This is not limited to JS files, linked files can be ANY file you might need (Images, Css, Xml, CS, CSHTML, etc)
CONS
Each deployment gets it's own file.
There is a small learning curve when understanding that Solution Folders are not Directories that exist in a Solution Directory.

The best thing to do, imo, is to roll your own CDN... Basically just create another site in IIS and give it it's own binding, e.g. "http://cdn.somedomain.com"
Then store all of your css/js/fonts/shared images etc on the CDN site and link to them from your other sites.
Doing so solves 2 problems,
All of your stuff is shared when it needs to be and you only have to manage 1 revision per file.
Your users browsers can cache them in 1 single location instead of downloading copies of your stuff for every site that uses them..
I added this answer because I see a lot of people referrencing creating virtual directories. While that does indeed share the files, it creates multiple download paths for them which is an extreme waste of bandwidth. Why make your users download jquery.js (1 * number of sites) when you can allow them to download it once on (cdn.somedomain.com).
Also when I say waste of bandwidth, I'm not just talking about server bandwidth, I'm talking about mobile users on data plans... As an example, I hit our companies HR site (insuance etc) on my phone the other day and it consumed 25mb right out the gate, downloaded jquery and a bunch of stuff 5 times each... On a 2gb a month data plan, websites that do that really annoy me.

Here it goes, IMO the best and easiest solution, I spent a week trying to find best and easiest way which always had more cons than pros:
Resources(DLL)
Shared
images
image.png
css
shared.css
scripts
jquery.js
MvcApp1
Images
Content
Shared <- We want to get files from above dll here
...
MvcApp2
Images
Content
Shared <- We want to get files from above dll here
...
Add following to MvcApp1 -> Project -> MvcApp1 Properties -> Build events -> post build event:
start xcopy "$(SolutionDir)Resources\Shared\*" "$(SolutionDir)MvcApp1\Shared" /r /s /i /y
Here is explanation on what it does: Including Build action content files directory from referenced assembly at same level as bin directory
Do the same for MvcApp2. Now after every build fresh static files will be copied to your app and you can access files like "~/Shared/css/site.css"
If you want you can adjust the above command to copy scripts from .dll to scripts folder of every app, that way you could move some scripts to .dll without having to change any paths,here is example:
If you want to copy only scripts from Resources/Shared/scripts into MvcApp1/scripts after each build:
start xcopy "$(SolutionDir)Resources\Shared\Scripts\*" "$(SolutionDir)MvcApp1\Scripts" /r /s /i /y

This is a late answer but Microsoft has added a project type called Shared Project starting Visual Studio 2013 Update 2 that can do exactly what you wan't without having to link files.
The shared project reference shows up under the References node in the
Solution Explorer, but the code and assets in the shared project are
treated as if they were files linked into the main project.
"In previous versions of Visual Studio, you could share source code between projects by Add -> Existing Item and then choosing to Link. But this was kind of clunky and each separate source file had to be selected individually. With the move to supporting multiple disparate platforms (iOS, Android, etc), they decided to make it easier to share source between projects by adding the concept of Shared Projects."
https://blogs.msdn.microsoft.com/somasegar/2014/04/02/visual-studio-2013-update-2-rc-windows-phone-8-1-tools-shared-projects-and-universal-windows-apps/
Info from this thread:
What is the difference between a Shared Project and a Class Library in Visual Studio 2015?
https://stackoverflow.com/a/30638495/3850405

A suggestion that will allow you to debug your scripts without re-compiling the project:
Pick one "master" project (which you will use for debugging) and add the physical files to it
Use "Add As Link" feature as described in Eric's answer to add the script files to the other projects in solution
Use CopyLinkedContentFiles task on Build, as suggested in Mac's comment to copy the files over to the second over to your additional projects
This way you can modify the scripts in the "master" project without restarting the debugger, which to me makes the world of difference.

In IIS create a virtual folder pointing to the same scripts folder for each of the 3 applications. Then you'll only need to keep them in a single application. There are other alternatives, but it really depends on how your applications are structured.
Edit
A scarier idea is to use Areas. In a common area have a scripts directory with the scripts set to be compiled. Then serve them up yourself by getting them out of the dll. This might be a good idea if you foresee the common Area having more functionality later.

Most of the files that are included by default are also available via various CDN's.
If you're not adding your own custom scripts, you may not even need a scripts directory.
Microsoft's CDN for scripts: http://www.asp.net/ajaxlibrary/cdn.ashx

Eclipse. Adding a file without duplicating it into the workspace

I want to load the entire www folder from the wamp folder into the Eclipse project and work on it from here. I've created a Static Web Project and tried Importing the files from the www folder in there, but it just makes duplicates of those file. How can i open all the www files in Eclipse, so any change i make in the IDE it appears in the files in the www folder. I'm sure it's something simple, but it seems at this time of day, i'm really out of it.

This should be possible if you try creating a Linked folder inside Eclipse.
Take a look at this.
Update
Also, steps to do this (from here) :
If you don't want to put your source code in the project, you can
"link" the source code to the project instead. In that case, you should
do the following:
1. Right-click the project, and choose Properties from the context menu.
2. Select "Java Build Path" from the left-hand side.
3. Click the "Source" tab along the top.
4. Click the "Link Source..." button.
5. Fill out the dialog box, and click the OK buttons.

Adding external javascript in JSF

I want to insert an external javascript file in my JSF page. So what I did is:
Now, the JSF file is named start.xhtml and both are sitting in the same folder. However, when I ran , there is nothing happend [ The javascript supposed to pop up alert when I click]. I checked the page source, and apparent in the .
What did I do wrong to get the RES NOT FOUND? I even put absolute path but nothing happened :(. Me sad panda.
Fyi, I am using the latest Netbeans.
Thanks,
Song.

Try including your script this way
<script src="#{facesContext.externalContext.requestContextPath}/yourPathAfterWebpages/scriptFile.js" type="text/javascript"></script>

First of all, an absolute path must work. It's not question of Netbeans or Glassfih, or JSF - it's a browser thing. And if your browser had a fault preventing it from fetching Javascript from valid urls, you would have noticed. So if your Javascript does not load, there's a 99% chance it's a plain typo, a stupid mistake (forgetting directory name, adding an extra slash or such things), and nothing to do with any of the mentioned technologies.
The other theory (just a theory - I don't have enough data to prove it) is that you have a standard mapping, showing all the faces files in a "virtual" faces directory (/faces/*). So that when you put your index.xhtml in the main directory of a Foo project, you see it under: localhost:8080/Foo/faces/index.xhtml. The "faces" part of path does not represent any real directory, it's just a mapping. So if you have a js file sitting by an index.xhtml, you would address it like: '../yourjavascript.js'; the ../ is to compensate for the virtual directory part.
Anyway, I strongly encourage you to drop your script loading dillemas and use the official and nice way of loading resources such as javascript is to put them into a directory called "resources" (make one under the "web pages" node in Netbeans, it will end up in the top directory of your .war); to get a path of any file saved under resources, you use EL like: #{resource['filename.css']}. You will load your script by:
<script src='#{resource['script.js']}' ></script>
If you use the resource directory, you can do many more things, read up on some detailshere

How do I get IntelliJ IDEA to display directories?

I've been trying out IntelliJ IDEA for JavaScript editing, and I like it so far, but I'm having a small problem with a new project.
I can't seem to be able to get IDEA to display the directories in the project directory in the Project view. Even if I manually add a directory, it refuses to display it.
I think this probably has something to do with the fact that it tries to apply Java conventions, but when I imported an old Eclipse project, it showed all directories just fine.
Do I have to use Eclipse to create projects and import in IDEA to get the directories visible, or is there some other trick?
I am using IDEA version 8.1.3, and the code is just a plain bunch of HTML and JavaScript files, not in any kind of a Java environment.

It appears I need to manually create a Java module (File->New Module) inside the project to actually see the "proper" directory view. I do wonder why it didn't show up when I created it with the project.

I've been struggling with this same problem and found another reason why directories may not show up correctly. Make sure the "Content Root" is correct.
Click on the project
Select "File"->"Project Structure"
Select "modules" from the left column, and select a module.
On the sources tab you will see the current "Content Root" along with a button to add a new content root.
Make sure that content root is correct. When in the project structure view you will only see files below the "Content Root". I'm fairly new to IntelliJ but I think of the content root as the basedir in ant terms.
These instructions are for IntelliJ 9.x
Hope this helps someone.

Current more straightforward logic:
remove the .idea/ folder
select in Idea File -> New project.
in left menu select Web Module, and then set up project folder
you're done!

I found the solution thanks to Thurman Sanders and decided to post a more clear answer, in case it helps anyone else. I know an answer like this would have saved me 5 minutes of fumbling around.
Problem
Some folders are excluded, by default. In most cases, this is exactly what you want. Other times, you need to see your "build" or "target" folder, for example.
Solution
Make Intellij stop excluding the folder you want to see
Open the Module Settings
select the module and press F4
or right click the module and choose "open module settings"
or press cmd; to open project settings, then select your module
Follow the steps in the picture, below:
select the 'sources' tab
select the folder you want to see
disable the 'excluded' option
Press OK
When you're done, the folder will turn orange and finally be visible in the project view!

Simplest way to do this!
Reading some of the other answers, they require you to go into Project Structure -> Modules and check that the sources are not excluded.
But in my case - there are no modules defined in the project at all, so that didn't help.
To easily create a module for your project and therefore show the folder structure -
Go to File menu -> New -> Project...
Select Static Web. Note: it does not matter if your project is "web" or not!
Hit next, then fill in the same Project Name: and Project location: as you have already.
IntelliJ will say "File Already Exists" - "Would you like to overwrite it?" - answer Yes.
Bam! Your Project Pane with the Project view selected should now instantly show the folder structure of your project.
If you have a maven project, you will need to add the root pom.xml in the Maven Projects window.
And if you want to add java to your project later, you should probably configure a JDK also.

Just use File » New Project » Static Web. All your files and directories will show up.

File -> Invalidate Caches / Restart worked for me.

The same problem had me going crazy for a couple of hours as well, coming from Netbeans where I could just start a new project and import any source tree. My project is PHP/JS and has nothing to do with Java, so it was not intuitive to have to create a Java module, just so I could see my files listed.
I found the solution (covered above) here for more insight.

Here is how I was able to "display" all folders in my project:
Somehow get to the Project Settings page (for me it was right-click the project then select Modules)
Make sure the Sources tab is selected
You should see a section in the middle entitled "Excluded Folders" under Source\Folders"
Click on the X next to it to remove it from being excluded and it becomes visible.
Hope it this helps.

I think this is happening to you as intellij's Project window has the 'Compact Empty Middle Packages' option as checked by default. You will find this option under Setting section of the Projects tab.

I had a test folder which wasn't displaying in IntelliJ. It turned out that it had no files in it, IntelliJ was only showing folders that had some files in them. When i manually added files in test folder via Explorer, it reflected back in IDE.

It happens sometime. You need to go to the configuration (Project Settings) and add the Source folder as content root and then possibly set source/resource etc. from the configuration tab. Apply all the changes and you should be done.

Just me own 2c. I used "New" -> "Module from existing sources" to get IntelliJ to show folders and files from inside a Github Java project. Hope this helps someone.

Platform : Intellij2019.3 Macos10.12
The solution is:
go to the File - project structure - Modules
In the left column, + Add Content Root, and add the folder you hope to use as the root directory.
mark the folder you want to compile as source root
rebuild

Just go to View -> Tool windows -> project or Alt+1

I had a similar problem, this fixed it:
File -> New -> Module from Existing Sources...
I chose the src folder and then it detected the rest on its own.
If you still have issues, try reimporting project by doing:
File -> New -> Project from Existing Sources...

In the project explorer window (where all the classes are), switch from "packages" view to "project" view. Then all files, not just classes are displayed.