Frontend Overview

Microtec ERP frontend is a Micro-Frontend (MFE) architecture built on Angular with Nx workspace tooling and Webpack Module Federation. The workspace lives in the MFE-Apps/ repository.

---

Technology Stack

Layer	Technology	Version
Framework	Angular	20+
Language	TypeScript	5.8+
Build tool	Nx (Webpack Module Federation)	Latest
State management	NgRx (store, effects, entity)	—
UI components	PrimeNG + Bootstrap 5	—
Styling	SCSS	—
Authentication	Keycloak (OIDC)	—
Internationalization	@ngx-translate	ar / en
Component architecture	NgModule-based (standalone: false)	—

---

Workspace Structure

MFE-Apps/
├── apps/
│   ├── dashboard/          # Host shell (Module Federation container)
│   ├── bussinessOwners/    # Business Owner portal (remote)
│   ├── erpHome/            # ERP home dashboard (remote)
│   ├── accounting/         # Accounting module (remote)
│   ├── hr/                 # HR module (remote)
│   ├── finance/            # Finance module (remote)
│   ├── sales/              # Sales module (remote)
│   ├── purchase/           # Purchase module (remote)
│   ├── inventory/          # Inventory module (remote)
│   ├── distribution/       # Distribution module (remote)
│   ├── fixedAssets/        # Fixed assets module (remote)
│   ├── templates/          # Templates module (remote)
│   └── adminportal/        # Admin portal (remote)
├── libs/
│   ├── shared-lib/         # Core UI components, services, guards, auth
│   ├── microtec-auth-lib/  # Authentication utilities
│   ├── apps-shared-lib/    # Shared application logic
│   └── shared-assets/      # Static assets (i18n, images, fonts)
├── package.json
└── nx.json

---

Application Count

Type	Count
Host (shell)	1 (dashboard)
Remote apps	12
Shared libraries	4
Total apps	13

---

Module Federation

The dashboard app is the host shell — it loads remote modules at runtime using Webpack Module Federation. Each remote app exposes a single Angular module via its webpack.config.js.

---

Shared Libraries

Library	Path	Purpose
shared-lib	libs/shared-lib/	Core — reusable UI components, services, validators, directives, auth guards
microtec-auth-lib	libs/microtec-auth-lib/	Keycloak integration, token management, SSO helpers
apps-shared-lib	libs/apps-shared-lib/	Cross-app business logic (permissions, lookups)
shared-assets	libs/shared-assets/	Static assets — i18n translation files, images, fonts

The shared-lib is the most important library. It contains:

• Reusable UI components (lib-table, lib-select, lib-microtec-viewer, etc.)
• Auth guard (auth.guard.ts)
• Layout components (sidebar, header)
• Custom validators (Saudi ID, Arabic pattern, email, password)
• Common services (auth, loader, storage, translations)
• Shared models and DTOs

---

Build Memory Requirement

32 GB Node.js heap required for parallel builds

Building all 13 apps in parallel requires a large Node.js heap. The build:all script sets this automatically:

cross-env NODE_OPTIONS=--max-old-space-size=32768 concurrently --max-processes 7 ...

This is set in package.json and does not need to be configured manually.

---

Build Configurations

Each app supports five build configurations:

Configuration	Target Environment	Key Differences
production	Dev/Default	Dev API URLs, microtec realm
cloud	Azure cloud (standard)	Cloud API URLs, microtec realm
uat	UAT	UAT API URLs, UAT Keycloak
preprod	Pre-production	Preprod API URLs
prod	Production	Production API URLs, production Keycloak

Configuration files live at apps/<app>/src/environments/environment.<config>.ts.

---

Authentication

• ERP apps use the microtec Keycloak realm.
• BusinessOwners app uses the businessowner Keycloak realm.
• Realm detection is automatic — the init factory reads the URL path to determine the realm.
• Tokens refresh automatically every 60 seconds if expiring within 5 minutes.
• Cross-app SSO: switching between apps on different ports does not require re-login — Keycloak server-side sessions handle this.

---

Internationalization

• Uses @ngx-translate with Arabic (ar) and English (en).
• Translation files live under assets/langs/ (app-specific) and assets/langs/shared/ (shared keys).
• Translation key convention: module_scope_keyname (all lowercase with underscores).
• Module prefix examples: accounting_, hr_, shared_, bo_, inventory_, sales_.

---

Code Standards

• All components use standalone: false (NgModule-based architecture).
• Angular 17+ control flow syntax (@if, @for, @switch) — not legacy structural directives.
• PrimeNG components exclusively for UI (no custom component libraries).
• SCSS for all styles — no inline styles in templates.
• NgRx for complex state management where needed.

---

Related Documentation

• App Roster — All 13 apps with ports and deployment targets
• Build & Deployment — Build commands and Azure hosting setup