HCMP Workspace

This is an NX workspace containing two Angular applications:

• hcmp-host (Main application)
• hcmp-cost-management (Micro Frontend running on port 4215)

Features

• Angular 20
• Server-Side Rendering (SSR)
• Client-Side Hydration
• HTTP Client with Fetch API
• Signals for State Management
• Micro Frontend Architecture

Prerequisites

• Node.js (v18 or later)
• npm (v9 or later)

Getting Started

1. Clone the repository:

git clone <repository-url>
cd hcmp-workspace

2. Install dependencies:

npm install

3. Start the applications:

For Cost Management App (Port 4215):

npm run start:cost

For Host App (Port 4200):

npm run start:host

To run both applications simultaneously:

npm run start:all

Available Scripts

Development

• npm run start:host - Start the host application
• npm run start:cost - Start the cost management application
• npm run start:all - Start both applications in parallel

Building

• npm run build:host - Build the host application
• npm run build:cost - Build the cost management application
• npm run build:all - Build both applications in parallel

Testing

• npm run test:host - Run tests for the host application
• npm run test:cost - Run tests for the cost management application
• npm run test:all - Run tests for both applications

Linting

• npm run lint:host - Run linting for the host application
• npm run lint:cost - Run linting for the cost management application
• npm run lint:all - Run linting for both applications

Project Structure

hcmp-workspace/
├── apps/
│   ├── hcmp-host/           # Main host application
│   └── hcmp-cost-management/ # Cost management micro frontend
├── package.json
├── tsconfig.base.json
└── nx.json

Technology Stack

• Framework: Angular 20
• Build Tool: NX
• State Management: Angular Signals
• Styling: SCSS
• Server-Side Rendering: Angular Universal
• HTTP Client: Angular HttpClient with Fetch API

Development Guidelines

1. Component Structure

   • Use standalone components
   • Implement lazy loading for routes
   • Follow Angular's style guide

2. State Management

   • Use signals for local state
   • Implement proper state isolation between micro frontends

3. Styling

   • Use SCSS for styling
   • Follow BEM methodology
   • Maintain consistent theming

4. Testing

   • Write unit tests for components
   • Implement E2E tests using Playwright
   • Maintain good test coverage

Contributing

1. Create a feature branch
2. Make your changes
3. Run tests and linting
4. Submit a pull request

License

MIT

Support

For support, please contact the development team or raise an issue in the repository.