Skip to content

Folder structure

Jump to bottom
Raphaël Balet edited this page Apr 8, 2025 · 26 revisions

Reglements

Repository name

  1. should become increasingly more specific as you read from left to right
  2. no underscores
  3. All lowercase
  4. No special characters

Structure

Project structure

Note: + indicates that the folder has additional files.

public
├─+ fonts
├─+ i18n
├─+ icons
│   └── [name]-[direction]-[color].svg
├─+ img
│   └─+ components
│       └── [page, component, ...]-[name]
│           └── bg-desktop.jpg
│           └── bg-mobile.jpg
├─+ js
├─+ json
├─+ pdf
└─+ video

src
├─+ app
│   ├─+ pages
│   │   ├─+ auth
│   │   │   ├─+ auth-login
│   │   │   ├─+ auth-signup
│   │   │   ├─+ auth-password-request
│   │   │   └─+ auth-password-reset
│   │   └─+ [page]
│   │       ├── [page].page.html
│   │       ├── [page].page.scss
│   │       ├── [page].page.ts
│   │       ├── [page].module.ts
│   │       └─+ [page].[name]
│   │           ├── [page]-[name].component.html
│   │           ├── [page]-[name].component.scss
│   │           ├── [page]-[name].component.ts
│   │           ├── [page]-[name].module.ts
│   │           └─+ [components, modals, ...]
│   ├─+ configs
│   │   ├── [name].config.ts
│   │   └── global.config.ts
│   ├─+ core
│   │   ├─+ animations
│   │   │   └── global.ts
│   │   ├─+ interceptors
│   │   │   ├── version.interceptor.ts
│   │   │   └── auth.interceptor.ts
│   │   ├─+ guards
│   │   │   ├── auth.guard.ts
│   │   │   └── admin.guard.ts
│   │   ├─+ directives
│   │   │   └── validation.directive.ts
│   │   ├─+ services
│   │   │   ├── dal.service.ts
│   │   │   ├── session.service.ts
│   │   │   └── [another-api].service.ts
│   │   ├─+ bases
│   │   │   └── base-[type].[service, query, component].ts
│   │   └─+ models
│   │       ├── core.enums.ts
│   │       ├── core.d.ts // interfaces
│   │       └── core.models.ts
│   │       └── core.types.ts
│   └─+ shared
│       ├─+ components
│       │   └── [name]
│       │    	└── [name].component.ts
│       ├─+ fragments
│       │   └── [name]
│       │    	└── [name].fragment.ts
│       ├─+ layouts
│       │   └── [name]
│       │    	└── [name].layout.ts
│       ├─+ modals
│       │   └── [name]
│       │    	└── [name].modals.ts
│       ├─+ pipes
│       │   └── [name]
│       │    	└── [name].pipe.ts
│       └─+ vendors
│           ├─+ components
│           │   └── [name].component.ts
│           ├─+ fragments
│           │   └── [name].fragment.ts
│           └─+ layouts
│               └── [name].layout.ts
├─+ environments
│   ├── environment.prod.ts
│   └── environment.ts
└─+ styles
    ├─+ base
    │   ├── _colors.scss
    │   ├── _img.scss
    │   ├── _reset.scss
    │   └── _typography.scss
    ├─+ components
    │   ├── _buttons.scss
    │   └── _gallery.scss
    ├─+ themes
    │   ├── _admin.scss
    │   └── _theme.scss
    ├─+ utils
    │   ├── _functions.scss
    │   ├── _mixins.scss
    │   └── _variables.scss
    ├── _shared.scss
    └── main.scss

Logic explanation

folder description
pages Contains different pages
- @pages Contains components
- [page] Page name (ex: home, about)
- [page]-[name] Contains the component
configs Contains global logic, normally constant variables
core App core logic
- guards For restricted routes
- store Storing values coming from the services
- services Getting values from an API or a Database
- bases Intended to be extended
- models  
- - enums Enumeration of constant variable
- - interfaces Contain globally used types
- - models Type that has function let var = new MyModel({})
shared Used many times by different elements
- components Imported directly by the pages (ex: footer)
- directives logic like longPress or other event listener
- fragments Smallest piece of code, shall import not something else
- layouts Positioning of many components
- modals Reused modal
- pipes Converting data inside fragments / components
- vendors Third-party code
assets Contains static assets
- fonts  
- i18n International language files how to
- icons Contains only .svg files

Core vs Shared

Core

Contains the code that is specific to the application and implements the Cross-Cutting Concerns of the applications.

  • Should be imported only once, usually into the app.module.ts
  • Services are usually{provideIn: 'root'} And therefore singelton

Shared

Contains the code that could potentially be reused across different components

TsConfig paths

Remove the one you aren't using

"baseUrl": "./src",
"paths": {
  "@auth/*": ["app/pages/auth/*"],
  "@pages/*": ["app/pages/*"],
  "@configs/*": ["app/configs/*"],
  "@bases/*": ["app/core/bases/*"],
  "@guards/*": ["app/core/guards/*"],
  "@store/*": ["app/core/store/*"],
  "@models/*": ["app/core/models/*"],
  "@services/*": ["app/core/services/*"],
  "@components/*": ["app/shared/components/*"],
  "@directives/*": ["app/shared/directives/*"],
  "@fragments/*": ["app/shared/fragments/*"],
  "@layouts/*": ["app/shared/layouts/*"],
  "@modals/*": ["app/shared/components/modals/*"],
  "@pipes/*": ["app/shared/pipes/*"],
  "@vendors/*": ["app/shared/vendors/*"],
  "@shared/*": ["app/shared/*"],
  "@app/*": ["app/*"],
}

Acknowledgments

Clone this wiki locally