Skip to content

Folder structure

Jump to bottom
Raphaël Balet edited this page Dec 6, 2023 · 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
  5. Example: home-header

Structure

Project structure

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
│   │           └── state
│   │               ├── [name].query.ts
│   │               ├── [name].service.ts
│   │               └── [name].store.ts
│   ├── 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
│       ├── pipes
│       │   └── [name]
│       │    	└── [name].pipe.ts
│       └── vendors
│           ├── components
│           │   └── [name].component.ts
│           ├── fragments
│           │   └── [name].fragment.ts
│           └── layouts
│               └── [name].layout.ts
├── assets
│   ├── fonts
│   ├── i18n
│   ├── icons
│   │   └── [name]-[direction]-[color].svg
│   ├── img
│   │   └── components
│   │       └── [page, fragment, component]-[name]
│   │           └── bg-desktop.jpg
│   │           └── bg-mobile.jpg
│   ├── js
│   ├── json
│   ├── pdf
│   └── video
├── environments
│   ├── environment.hmr.ts
│   ├── 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
- - state Contains query, service and store (from Akita)
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
- layouts Positioning of many components
- components Imported directly by the pages (ex: footer)
- fragments Smallest piece of code, shall import something else than themself
- 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

Shared

Contains the code that could potentially be reused across the app

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/*"],
  "@fragments/*": ["app/shared/fragments/*"],
  "@layouts/*": ["app/shared/layouts/*"],
  "@modals/*": ["app/shared/components/modals/*"],
  "@components/*": ["app/shared/components/*"],
  "@pipes/*": ["app/shared/pipes/*"],
  "@vendors/*": ["app/shared/vendors/*"],
  "@shared/*": ["app/shared/*"],
  "@app/*": ["app/*"],
}

Acknowledgments

Clone this wiki locally