Common Structure for Web Projects

Folder Structure

webapp/
├── lib/
├── data/
│   ├── pics/
│   └── img/
├── scripts/
└── styles/
    ├── fonts/
    │   ├── *.eot
    │   ├── *.svg
    │   ├── *.ttf
    │   └── *.woff
    ├── img/
    │   ├── *.gif
    │   └── *.png
    ├── *.css
    └── *.xlst

Reasoning

Names vs Types as Folders

Oftertimes we see ''js'' and ''css'' named folders. Let's think about semantics. If the goal is to group files according to the file type, the following would sufficce.

support/
├── css/
└── js/

But more likely the sctucture is more complex. For example font with according to type convention would create:

support/
├── css/
├── js/
├── woff/
├── eot/
└── ttf/

Creating ''fonts'' folder is the first diversion from construct (grouping by file types),

support/
├── css/
├── js/
└── fonts/
    ├── woff/
    ├── eot/
    └── ttf/

Then naturally ''styles'' with ''css'' files and ''scripts'' with ''js'' come to mind

support/
├── scripts/
│   └── js/
├── styles/
│   └── css/
└── fonts/
    ├── woff/
    ├── eot/
    └── ttf/

''fonts'' are really part of ''styles''. Let's finally exit the folder by file type strategy with minor note. Styles could be *.css and *.xlst. Scripts could be *.js and *.cs so there could still be a case to keep them in separate folder.

support/
├── scripts/
└── styles/
    └── fonts/

Pics vs Img

I'm setting a convention that ''img'' is all supporting (decorative) images that have nothing to do with content but are part of page design and ''pics'' implies content images (photographs, illustations, etc.). With that said the following should make sense.

support/
├── data/
│   └── pics/
├── scripts/
└── styles/
    ├── fonts/
    └── img/

The Root Folder

''support'' sounds dry. First it was ''common'' or ''shared'' but for a single file it did not sound right. ''webcm'' (Web Content Management) came from Java projects and is quite terse for both webapps and static documents.

''webapp'' seems nice, descriptive and generic, even though it might be overkill for static support files.

''web'' or ''webc'' or ''webdoc'' might be the the winner.

Production vs Deployment Structure

The development structure often times differs from deployed application. The structure is more framework and server side env dependent. Other than ''dist'' folder it is hard to generalize. Every project has different needs - that's where the power of kickstarters such as (Maven, Yeoman) comes in.

uicoded/webapp-scaffolding.md