title: Web project's folders/directories structure - Best practices
body: <p>I’m working on different web projects and I was wondering if there is any rule of thumb regarding the project/ folders structure?</p>
  
  <p>Many of my apps are build in the structure where each file type has it’s own directory.
  For example:</p>
  
  <pre><code>└─┬root
    |
    ├─┬node_modules
    | └ // node_modules (npm libraries)
    |
    └─┬www
      |
      ├─┬Libs // Js libraries 
      | |
      | ├─┬Angular
      | | └ … (.js files)
      | |
      | └─┬Bootstrap
      |   └ … (.js files)
      |
      ├─┬JavaScript // my Js files
      | |
      | ├─┬Services
      | | └ … // my services (.js files)
      | |
      | ├─┬Controllers
      | | └ … // my controllers (.js files)
      | |
      | ├─┬Directives
      | | └ … // my directives (.js files)
      | |
      | └app.js // js entry point
      |
      ├─┬StyleSheets
      | |
      | ├─┬Less
      | | └ … // my styles (.less files)
      | |
      | └─┬Css
      |   └ … // my styles (.css files)
      |
      ├─┬Views
      | |
      | ├─┬Pages
      | | └ … // pages layout (.html files)
      | |
      | └─┬DirectivesTemplates
      |   └ // templates layout (.html files)
      |
      ├─┬Assets
      | |
      | ├─┬Fonts
      | | └ … // app fonts (.ttf/ .woff files)
      | |
      | └─┬Images
      |   └ // app images (.jpg/ .png files)
      |
      ├─┬Data
      | |
      | └ // app info (.json files)
      |
      └index.html // web site entry point
  </code></pre>
  
  <p>However lately I see a few projects, where each module have it’s own folder with it’s code (.js file), view (.html file), style (.css/.less files) and data (.json file, images, fonts etc)
  For example:</p>
  
  <pre><code>└─┬root
    |
    ├─┬node_modules
    | └ // node_modules (npm libraries)
    |
    └─┬www
      |
      ├─┬Libs // Js libraries 
      | |
      | ├─┬Angular
      | | └ … (.js files)
      | |
      | └─┬Bootstrap
      |   └ … (.js files)
      |
      ├─┬Modules
      | |
      | ├─┬moduleA
      | | |
      | | ├moduleA.js   //modules controller
      | | |
      | | ├moduleA.html //modules view
      | | |
      | | ├moduleA.less //modules style
      | | |
      | | └moduleA.json //modules data
      | |
      | ├─┬moduleB
      | | |
      | | ├moduleB.js  
      | | |
      | | ├moduleB.html
      | | |
      | | ├moduleB.less 
      | | |
      | | ├moduleB.json 
      | | |
      | | └moduleB-icon.png
      | |
      | └─┬moduleC
      |   |
      |   ├moduleC.js  
      |   |
      |   ├moduleC.html
      |   |
      |   ├moduleC.less 
      |   |
      |   ├moduleC.json
      |   |
      |   └moduleC-font.woff
      |
      └index.html // web site entry point
  </code></pre>
  
  <p>Are there any best practice regarding project structure?</p>