Checklist to create a new Angular project

Setup

  • read readme

  • Create your env

  • Add ssl keys (check readme)

Repo setup

  • Create repo with env branch based on client / proejct

    • Standard is development / staging / production

    • Prada is master / Test / Produzione

Systemfiles

  • tslint.json

    • update

      directive-selector

      and

      component-selector

      with project prefix

  • angular.json

    • update "prefix" with project prefix ex: prada

    • update the environments with the people that will work on the project

    • Add / remove the apps that are needed not needed. For Children monitor we have ion / web / admin

  • tsconfig.json

    • Update the main tsconfig to use the current app-type path ex ion or app ...

    • Create the app-type tsconfig ex ion-tsconfig.json with the proper barrels

  • package.json

    • Update project name

    • Reset project semver

    • Check if there are some dependency not needed (especially for ion app)

    • Add / remove dev envs scriptsa

  • ngsw-config.json

    • update it based on project requrements

  • ionic.config.json

    • update the project name (if we have ion app)

  • config.xml

    • Check ion app corova libs dependencies

  • Clean changelog

  • update readme with project details

  • Update manifest.js

  • clean resources folder if is not ion app

Assets

  • Clean assets folder

  • add favicon

CSS/Styles

  • Check css folder structure

  • Material

    • If material is used check to import all needed components in material module

    • Set up the correct theme

  • Bootstap

    • Import what is needed (probably only grid utils functions variables ..)

    • set 24 columns

    • If used with material be sure to override breakpoints

CI/CD

  • Setup the CI/CD on devops based on client needs

  • Docker, if the deploy require docker images, prepare that

  • Heroku

    • You need Procfile to deploy on heroku

    • Set heroku envs vars (configure heroku NODE_ENV and ENV if needed)

Bitf-core setup

Btif-core configurations are defined in src/common/common.bitf.configs.ts and then extended / customised in the apps bitf-configs.ts files (inside web / ion / admin etc..)

  • src/common/

    • bitf.servers.configs: Update the local https test server port (npm run serve:build)

    • common.bitf.configs.ts

      • general: add routes (used by auth mechanism)

      • authService: set up params used by BitfGetAuthTokenComponent and BitfSuperAuthService to perform authentication

      • apiErrorsInterceptorService: set the error codes for which the interceptor should catch errors

      • sockets (if needed)

      • parsers

        • set modelsMapperStrategy

        • set defaultParser

        • set parserStrategies

        • set keys (used for local storage name)

    • src/apps/[app-name]

      • configs/[app-name].bitf.config.ts

        • guard: customise checkUserRoutePermission to prevent user navigation for protected routes

        • serviceWorker: set check interval

Project setup

Common folder

  • configs/bitf.config.ts: paragraph above

  • constants/common.constants.ts

    • This file will be extended by apps (web / ion etc...) add / remove what is needed

  • core

    • components/

      • If we have ion app this we can add only abstract super component classes

      • if we don't have ion we can add here common components like loaders, not found page etc... this make sense

        only if we have multiple apps like (web / admin) otherwise we can add core component inside the web/ folder

    • models/

      • Add all project models

      • Add them to the index.ts,

      • Add them in the model src/common/services/api/model-mappers/model-mappers.strategy.ts

    • services/

      • Create all project services

      • Export them in the barrel

      • Configure AuthService to extend the correct bitf-core service

      • api/

        • Create all project services extending superApiService

        • Export them in the barrel

        • parsers/

          • Create all project parsers (extending what is needed from bitf-core) the default one will be called app-parser

      • AuthService: create the proper auth services based on project requirements

    • enums/

      • Add common enums

    • interfaces/

      • Add common interfaces

      • Customise ITokenMetaData based on project Auth

    • shared/

      • components/

        • Add here common shared components (valid id we don't have ion app) this make sense

          only if we have multiple apps like (web / admin) otherwise we can add core component inside the web/ folder

        • if we have ion app we can add here only super abstract components which will be imported by the web app and not by ion app, this files will not be added in the bundle if not imported.

    • translations/

      • common.translations.ts: this file contains bitfToTranslate('COMMON.STATUSES.IN_BUS'); that are dynamically computed in the markup ex:

Application folders

Applications should be added in src/apps. Every app will have his own angular.json config node, check it and update it accordingly

Apps name are following this conventions

  • Ionic: src/apps/ion will (to run this npm run serve:user app)

  • Standard web application (could contain responsive app or both mobile and desktop apps): src/apps/web

  • Admin app: src/apps/admin

  • NOTE: all files inside all apps (excluded the default one which is web) has to have app name as prefix for all files (excluded index.html and folder names) ex ion-header.component.ts admin-bitf.config.ts etc...

Applications folder structure and content

  • configs/: app specific config files, and bitf-core configs (extending common configs)

  • constants/: app specific constants (extending common constants)

    • mandatory: DEFAULT_API_CALL_STATES

    • mandatory: fullScreenMessageComponent (you can set this to null)

    • mandatory: okCancelDialogComponent (you can set this to null)

  • core/

    • components/ (all components that are used only once in the app)

      • Some examples / layouts / header / footer / welcome page / not found

    • decorators (barrel must extend common barrel)

    • models (barrel must extend common barrel)

    • services (barrel must extend common barrel). Below mandatory services

      • AppSession service (extends BitfSessionService)

      • DialogService (extends bitf service TODO)

      • ToastMessagesService (exends ex BitfMatToastMessageService)

      • UiMessagesListenerService (extend ex BitfWebUiMessagesListenerService and adding / overriding strategies)

      • Responsive service (if 2 apps 1 mobile one desktop)

  • enums/: app specific enums (extending common enums)

  • interfaces:/ app specific interfaces (extending common interfaces)

  • modules:/

    • app modules bundled by feature

    • those should be lazy loadable with module and routes definition inside

    • those should must shared module

  • shared/:

    • material-modules.ts: module should be present if we are using material ui components, importing only those actually used. This module is imported and exported by the shared module

    • shared.module.ts: this is the app shared module, this import the common-shared.module.ts

    • components/: this components are used by multiple app modules (ex, FullScreenMessageComponent,CustomButtonComponent ...)

  • styles/: organised folder structure to manage app styles

    • bootstrap: we are importing only grid system, variables and mixins. (if used without material also the other parts)

    • material: we have to customise the default theme

  • app.component.ts; this is the entry point of the application, it can include the project layout or simply the router-outlet (when the layout is managed by a child component like for desktop / mobile layout)

  • app-routing.module: this is the main routing definition. it contains

    • Routes for critical path (ex sign in / sign up) and for layout (mobile / desktop)

    • All routes for child lazy loaded modules

    • Not found pages

    • AuthGuard on routes when needed

Responsive setup

  • For config with 1 app mobile 1 app desktop (by default let's add a /m as mobile prefix)

    • In the AppSession Import the ResponsiveService if we have to do some ui / services operations when switching from mobile to desktop (ex close the dialogs)

    • In the AppSession service enable the observer initDynamicLayoutUrl - initBreakpointObserver

Routes

  • app-routing.module.ts: Set here all the entry point for the application. All critical routes / components must be included here

  • For multiple web apps (mobile / web) create main node starting from / and another starting with /prefix(m)

  • Routes for lazy load modules will be defined inside the module

Miscellaneous

  • Create not found route / page for all apps

  • loader: create a custom loader that extend BitfLoaderComponent

  • Be sure that all components are using the proper name space prefix ex <prada-header>

Environments

We have 3 main envs development(remote-development) / staging / production, and we have to configure those properly based on the env. You have to do the same with your personal environment

  • Add remove params based on project requirements

  • check production flag

  • set appName

  • httpRetryConfig

  • loggerConfig

  • set registerServiceWorker flag

  • baseApiUrl / apiUrl / host /

  • if needed by the auth system authInterceptorUrl / adfsUrl (optional)

  • sockets url if needed

Final steps

  • Delete .git and create new repo from scratch

  • If subtree is used for bitf-core delete src/common/libs/bitforce, init the repo and then add the subtree

  • Create the repo and push on the remote

  • In devOps set the master and compare branch, lock the env branches

  • Enjoy your new shiny Angular project

PreviousBasic setupNextProject Structure / Naming conventions / Code style

Last updated

Was this helpful?