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