Folder structure

Folder structure with some scss import (from the us-mixin)

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

src
├── app
│ ├── pages
│ │ └── [page]
│ │ ├── [page].component.html
│ │ ├── [page].component.scss
│ │ ├── [page].component.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
│ │ ├── 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.interfaces.ts
│ │ └── core.models.ts
│ │ └── core.type.ts
│ └── shared
│ ├── components
│ │ └── component-[name]
│ ├── fragments
│ │ └── fragment-[name]
│ ├── layouts
│ │ └── layout-[name]
│ ├── pipes
│ │ └── [name].pipe.ts
│ └── vendors
│ ├── components
│ │ └── component-[name]
│ ├── fragments
│ │ └── fragment-[name]
│ └── layouts
│ └── layout-[name]
├── 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

If some folders / files don't make sense, read the following
If they still don't make any sense, please leave a comment ;)

@TODO: finish explanations

assets

folderdescription
pagesContains different pages
- pagesContains components
- [page]Page name (ex: home, about)
- [page]-[name]Contains the component
- stateContains query, service and store (from Akita)
configsContains global logic, normally constant variables
coreApp core logic
- guardsFor restricted routes
- storeStoring values coming from the services
- servicesGetting values from an API or a Database
- basesIntended to be extended
- models
- - enumsenumeration of constant variable
- - interfacescontain globally used types
- - modelstype that have function let var = new MyModel({})
sharedUsed many time by different elements
- layoutsPositioning of many components
- componentsImported directly by the pages (ex: footer)
- fragmentsSmallest piece of code, shall import something else
- pipesConverting data inside fragments / components
- vendorsthird-party code
assetsContains static assets
- fonts
- i18ninternational language files how to
- iconscontains only .svg files

tsconfig - custom path

Automatically done by our cli

"baseUrl": "./src",
"paths": {
"@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/*"],
"@components/*": ["app/shared/components/*"],
"@pipes/*": ["app/shared/pipes/*"],
"@vendors/*": ["app/shared/vendors/*"],
"@shared/*": ["app/shared/*"],
"@app/*": ["app/*"],
}

Acknowledgments