The directory structure below gives an overview for navigating around the project. Both frontend and backend follow the DCP standard patterns.
The backend structure used for DCP is based on the .NET webAPI template for the API project. The shared DCP functionality is imported using the DCP.Framework Nuget package. The projects for worker services are based on the worker template.
project_root
├── DCP.MVDA.API
│ ├── Controllers
│ ├── Program.cs
│ ├── StartUp.cs
└── DCP.MVDA.Constants
└── DCP.MVDA.Core
├── Factories
├── Interfaces
├── Services
├── Configuration
└── DCP.MVDA.DAL
├── Entities
├── Interfaces
├── Migrations
├── DbContext.cs
└── DCP.MVDA.DataSources
├── Datasources
├── Interfaces
└── DCP.MVDA.Models
└── DCP.MVDA.WorkerService.EventBus
├── Program.cs
└── Worker.cs
└── DCP.MVDA.WorkerService.Notifications
└── DCP.MVDA.WorkerService.CleanUp
├── Program.cs
└── Worker.cs
└── DCP.MVDA.WorkerService.Cache
└── DCP.MVDA.WorkerService.BatchDatabase
├── Program.cs
└── Worker.cs
The application is built based on the AngularCLI template. In addition to the base template a few folders and files required by the single-SPA library are added (./extra-webpack.config.js
, ./src/single-spa
, ./src/main.single-spa.ts
and ./src/app/empty-route
).
Frontend modules are configured as git submodules inside the applications.
Except for the asset module, all others are installed inside ./src/libs/
folder.
📂 project_root
└──📂 src
├──📂 app
│ ├──📂 Module
│ │ ├──📂 Module.component
│ │ ├──📂 store
│ │ ├──📄 Module.service
│ │ ├──📄 Module.module
│ │ └──📄 Module.routing
│ ├──📄 app.component
│ ├──📄 app.module
│ └──📄 app.routing
├──📂 assets
├──📂 libs
│ ├──📂 dc-shared
| └─ ...
│ └──📂 dc-filter
| └─ ...
├──📂 single-spa
└──📂 translations
The src folder is the main code folder and contains:
Inside ./src/app
the main code for the application like routing and pages is located. In order to use AngularCLI
App Module, App Component and App Routing files are always present.
The application is divided into angular modules. Each angular module has its own folder. The structure of folders is the same for most of the angular modules. The only difference is the presence of the store folder. If the angular module uses NGRX, the store folder is present.
The MVDA module uses a side menu and the layout Angular module, there is a layout folder, that contains layout.MVDA.module.ts
and related files that extend the Base Components from the layout Angular module.
In all Applications AppModule, LayoutModule, LayoutRoutingModule and LayoutComponents need to have unique names like AppMvdaModule, LayoutMvdaModule etc. and for App and Layout Components also unique selector (selector: 'app-mvda-root'), in order to be sure that SingleSPA will not load the wrong file during the switch between applications on the production server.
All other files are organized in Angular Module folders, are separated logically or based on entities structure. Inside Angular module folders all files that are related to this Angular module like entity.module, entity.service, entity-routing.module, Components, Models and NGRX Module, if applicable, can be found.
The MVDA Module contains NGRX files inside the ./store
folder. In the same folder files for Actions, Effects, Reducers, State, Facade and Entity or Logical Structure Store Module (like BatchStoreModule or DashboardStoreModule) are present.