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?