Web project's folders/directories structure - Best practices

Question

I’m working on different web projects and I was wondering if there is any rule of thumb regarding the project/ folders structure?

Many of my apps are build in the structure where each file type has it’s own directory. For example:

└─┬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 

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:

└─┬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 

Are there any best practice regarding project structure?

Answer 1

Your examples show two popular project structures, organize files by type or by module. I prefer the latter (code separated into modules) and I see it being used a lot for javascript frontend frameworks. It's something the Angular style guide (a good reference for angular best practices) refers to as folders by feature.

I reference the Angular style guide because your examples showed Angular projects, but the concept can be translated to other frameworks. Code is organized by feature so it's easy the find the file you need to edit. As someone pointed out in a comment, this project structure scales well as the app and team grow in size.