Skip to main content

Apps Directory

The src/apps should contains only list of folders for the project applications, for example:

โ”œโ”€โ”€ srcโ”‚   โ”œโ”€โ”€ appsโ”‚   โ”‚   โ””โ”€โ”€ adminโ”‚   โ”‚   โ””โ”€โ”€ front-office

Based on the previous directories structure, our project has two applications, the front office and the admin A.K.A the back office.

Application structure#

Each application has the following structure:

โ”œโ”€โ”€ srcโ”‚   โ”œโ”€โ”€ appsโ”‚   โ”‚   โ””โ”€โ”€ front-officeโ”‚   โ”‚   โ”‚   โ””โ”€โ”€ componentsโ”‚   โ”‚   โ”‚   โ””โ”€โ”€ helpersโ”‚   โ”‚   โ”‚   โ””โ”€โ”€ stylesโ”‚   โ”‚   โ”‚   โ”‚   โ””โ”€โ”€ style.scssโ”‚   โ”‚   โ”‚   โ”‚   โ””โ”€โ”€ style.tsโ”‚   โ”‚   โ”‚   โ””โ”€โ”€ postsโ”‚   โ”‚   โ”‚   โ””โ”€โ”€ categoriesโ”‚   โ”‚   โ”‚   โ””โ”€โ”€ front-office-modules.jsonโ”‚   โ”‚   โ”‚   โ””โ”€โ”€ front-office-provider.ts

So basically, based on our previous structure, each application should have the following files/directories:

  • components: This directory contains the shared components such as base layout, header, footer, sidebar...etc.
  • styles: This directory contains the application style setup, if you're using styled components or sass, then your application mookup base should be here such as font size, fonts list, color pallette...etc.
  • helpers: This directory contains general functions, classes and so on.
  • posts/categories: Application modules list, learn more about module structure from here.
  • front-office-modules.json: The application basic setup and modules list, Check Applications list for the full schema
  • front-office-provider.ts: The application entry point, the very first loaded file in the application.

Application Provider#

The application provider works exactly as Module Provider, this file is the entry point of the application.

It's recommended to import all bootups for the application like the application's configurations, general styles, general translations and so on.