Directory Layout of a Single-page Application built with .NET / F#, AngularJS, TypeScript, LESS...

Single-page Application (SPA) Project Structure.md

Single-page Application Project Structure

..with .NET / F# (or Node.js / Express), AngularJS (or Facebook React + RxJS), TypeScript, Gulp.js (or Grunt), NuGet...

Goals

• Project structure should reflect application's logic (as opposed to regular MVC apps which all look the same)
• Group assets by feature rather than by type (including views, scripts, documentation, tests etc.)
• Allow developers to edit client-side and server-side code independently from each other

.
├── client                                  # Client-side code (front-end)
│   ├── common
│   │   ├── test
│   │   │   ├── directivesSpec.ts
│   │   │   ├── filtersSpec.ts
│   │   │   └── servicesSpec.ts
│   │   ├── directives.ts
│   │   ├── filters.ts
│   │   └── services.ts
│   ├── layout
│   │   ├── test
│   │   │   ├── shellSpec.ts
│   │   │   └── sidebarSpec.ts
│   │   ├── shell.html
│   │   ├── shell.ts
│   │   ├── sidebar.html
│   │   └── sidebar.ts
│   ├── users
│   │   ├── test
│   │   │   ├── loginSpec.ts
│   │   │   └── registerSpec.ts
│   │   ├── login.html
│   │   ├── login.ts
│   │   ├── register.html
│   │   └── register.ts
│   ├── 404.html
│   ├── apple-touch-icon-precomposed.png
│   ├── bootstrap.ts
│   ├── index.html
│   ├── humans.txt
│   ├── robots.txt
│   ├── crossdomain.xml
│   └── favicon.ico
├── node_modules
├── packages
├── scripts                                 # Scripts used for developent (test runner etc.)
├── server                                  # .NET / F# server-side code (back-end)
│   ├── ...
│   └── bootstrap.fs
├── tools
│   └── NuGet
│       └── NuGet.exe                       # .NET package manager, used during automated builds
├── .gitattributes
├── .gitignore
├── gulpfile.js                             # Client-side build automation configuration
└── package.json                            # The list of Node.js-based development tools