Startup from Bitf boilerplate

Clone bitf-angular-boilerplate

To create a boilerplate clone, connect to devOps at the link: https://sintraconsulting.visualstudio.com/_git/bitf-angular-boilerplate and copy the SSH link.

You must have entered your ssh key on devOps

Clean the code

When you start with a new project, you have to follow some steps to keep both the code for the app you are developing clean, removing the packages that you will not use, and to keep the git history clean.

1. Clone bitf-angular-boilerplate

2. Remove .git folder (rm -rf .git)

3. Remove the bitforce folder from src/common/libs

4. in the package.json in the serve:base command change the default port to a random number

5. git init

6. git add .

7. git commit -m 'Init'

8. git remote add origin ‘the repo of the new project’

9. Run bitf-core:init command to install the bitforce lib.

10. you've to add your certificates in the /ssl folder to run https in the tom folder there are tom's certificates you can use those

Now you have cleaned the part about git. Now we have to remove the parts related to the packages that we will not use for the project.

Web only project

Remove all ion and capacitor references.

1. package.json (scripts and dependencies)

2. app property from angular.json

3. ion-tsconfig.json file

4. ion folder into src/apps

5. android, ios folder from root

6. cap-environments folder

Format

1. Install Prettier

2. Update configuration in .prettierrc.json

{
  "printWidth": 110,
  "singleQuote": true,
  "trailingComma": "es5"
}

3. Add your custom prefix for components and directives in .eslintrc.json "prefix": ["mpa", "app", "bitf"])

"@angular-eslint/component-selector": [
  "error",
  {
    "type": "element",
    "prefix": ["mpa", "app", "bitf"],
    "style": "kebab-case"
  }
],
"@angular-eslint/directive-selector": [
  "error",
  {
    "type": "attribute",
    "prefix": ["mpa", "app", "bitf"],
    "style": "camelCase"
  }
],

First setup

• Create your env

• Add ssl keys. You can copy the files inside the ssl/tom folder inside ssl and install the certificate on your pc. Or you can create new certificates by following the readme.

• angular.json: update schematics (bottom file) "prefix" with project prefix ex: prada

• package.json

  • Update project name

  • Reset project semver

  • remove not used dependencies

• ngsw-config.json (PWA)

  • update it based on project requirements

• ionic.config.json

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

• config.xml

  • Check ion app cordova libs dependencies

• Clean changelog

• update readme with project details

• Update manifest.js

• clean (or delete) resources folder if is not ion app

• Import "app-parser" in common/core/parsers and configure it into common-bitf.config.ts

• Set the DefaultApiCallStateMapper

• Set material-theme-settings, with colors

• Set the correct font into index.html and delete favicon or manifest if not used

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

Project setup

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

App setup

Common folder

We are using src/common folder to store all common const / enums / configs / services / models / components etc... that are reused between multiple apps both web or ion

• 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/

        • Import "app-parser" in common/core/parsers and configure it into common-bitf.config.ts

        • 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

    • Customize 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:

Responsive setup

• For config the boilerplate has 1 app mobile 1 app desktop and the app adds add a /m as mobile prefix. If the double management is not needed we can remove the /m path from the app routing and In the In the AppSession service we have to comment the observer initDynamicLayoutUrl - initBreakpointObserver

• If double UI responsive support is not needed in the AppSession we can avoid to Import the ResponsiveService if we have to do some ui / services operations when switching from mobile to desktop (ex close the dialogs)