App folder structure

Last updated on 26-Jun-2020 by Jakob Jakobsen Boysen

We recommend the following folder structure:

├── src
|   ├── module1
|   |   ├── components   // components are reusable @customElement's that can be used in other views, e.g. <cmp-my-component>
|   |   |   ├── cmp-my-component.html
|   |   |   ├── cmp-my-component.ts
|   |   |   ├── cmp-my-component.scss
|   |   |   └── cmp-my-component.test.ts
|   |   ├── data-loaders
|   |   |   ├── my-data-loader.ts
|   |   |   └── my-data-loader-2.ts
|   |   ├── my-result-panel.html
|   |   ├── my-result-panel.ts
|   |   ├── my-route.html
|   |   ├── my-route.ts
|   |   ├── my-route.scss
|   |   └── my-route.e2e-test.ts
|   |── module 2
|   |   └── ...
|   |── constants.ts
|   |── interfaces.ts
|   └── utils.ts
├── contributions.json
├── package.json
└── tsconfig.json

This structure ensures that related files are close to each other: view-model, view, styling and testing are almost named the same, so it's easy to navigate between the different aspects.

Grouping by modules makes it easy to find related files.

Further we also recommend to have common files with general functionality and declarations: constants.ts, interfaces.ts, utils.ts.