Right... Why have them in the most visible place in the folder? The files you modify regularly should be easy to get to. The files that are never modified should be tucked away, only changed when upgrading or removing. We want the most often modified files visible and easily navigated. I came up with the following.
Generic Folder Structure
- common
- js
- jQuery
- knockout
- bootstrap
- css
- jQuery
- knockout
- bootstrap
- images
- Any file structure that makes sense. Most image resources for js libraries are contained in their respective folders inside of the css folder
- fx (or framework)
- app.js (global settings specific to this application)
- fx.js (common functions that are a part of the company framework code)
- Any other files that are specific to the company and are used across the site.
- views
- account
- login.html
- login.js
- hearing
- hearingSummary.html
- hearingSummary.js
- hearingResult.html
- hearingResult.js
- hearings.html
- hearings.js
- common
- any control templates that are used elsewhere in the application.
- index.html
- index.js
Which works well for a typical non-MS website... However, with MVC, it's not standard practice to have the js for a view/partial in the folder where it resides. Also, you can install and upgrade client libraries using NuGet. Unfortunately you don't get a choice as to where these files are installed. So, you're stuck with a "Content" and "Scripts" folder, and unless you modify your routing, you can't put script files in view folders.
To try and keep upgrade functionality but remove clutter, I came up with this compromise...
- [] Content
- [] App
- [] img
- any images specific to the application
- site.css
- [] kendo
- [] font
- [] Controllers
- [] Models
- [] Scripts
- [] App
- fx.js
- util.js
- etc...
- [] kendo
- bootstrap.js
- jquery.js
- knockout.js
- etc...
- [] Views
- [] ViewScripts
- [] Blog
- index.js
- editBlog.js
- newBlog.js
- [] Shared
- layout.js
- somePartial.js
- anotherPartial.js
- etc...
- [] Security
- login.js
- users.js
- etc...
The key features here are the Content/App folder, the Scripts/App folder, and the ViewScripts folder. By having special subfolders in Content and Scripts, I get away from having files that I modify from being lost in the files I install through NuGet. Typically these files are modified infrequently anyway, but at least this way they're easy to find. How many times have you found derelict css files lost in the Content folder mess? This helps with that.
The biggest benefit comes from moving view specific files to the ViewScripts folder. This folder follows the directory structure of our Views folder. For views/partials that need a specific javascript folder, you merely create one in the ViewScripts folder. Easy to find, easy to navigate. I'm sure there are a million ways to lay out the directory structure of an MVC app. This one works for me. I'm mainly posting this as a personal reference :)
