Angular MFE Project Setup & Repository Creation | Step-by-Step Guide

This guide walks you through creating the foundation for your Angular Micro Frontend project, including repository structure, initial project creation, and organizational setup.

🎯 Project Architecture Overview

Before we start, let’s understand the repository structure we’ll create:

MFE Project Structure
├── host-app (Main shell application)
├── mfe-loan-calculator (Remote MFE)
├── mfe-user-dashboard (Remote MFE)
├── mfe-transaction-history (Remote MFE)
└── shared-libraries (Common utilities)

---

📂 Repository Strategy

Multi-Repository Approach

We’ll use separate repositories for each MFE to enable:

• Independent Development: Teams can work without conflicts
• Independent Deployment: Deploy each MFE separately
• Technology Flexibility: Each MFE can use different Angular versions
• Team Ownership: Clear ownership boundaries

Repository Naming Convention

Follow this naming pattern for consistency:

Repository Type	Naming Pattern	Example
Host Application	host-[app-name]	host-banking-app
Remote MFE	mfe-[domain-name]	mfe-loan-calculator
Shared Libraries	shared-[library-name]	shared-design-system

---

🚀 Step 1: Create Host Application Repository

1.1 Create GitHub Repository

1. Go to GitHub: Visit https://github.com/new

2. Repository Details:

   • Repository name: host-banking-app
   • Description: Host application for Banking MFE platform
   • Visibility: Public (for demo) or Private (for production)
   • ✅ Add README file
   • ✅ Add .gitignore → Choose “Node”
   • License: MIT License (optional)

3. Create Repository

1.2 Clone and Setup Local Project

Unix/macOS:

# Clone the repository
git clone https://github.com/your-username/host-banking-app.git
cd host-banking-app

# Create Angular application
ng new . --name=host-banking-app --style=scss --routing=true --skip-git=true

# Install dependencies
npm install

# Test the application
ng serve

Windows:

# Clone the repository
git clone https://github.com/your-username/host-banking-app.git
Set-Location host-banking-app

# Create Angular application
ng new . --name=host-banking-app --style=scss --routing=true --skip-git=true

# Install dependencies
npm install

# Test the application
ng serve

Open http://localhost:4200 to verify the application works.

1.3 Initial Project Structure

Your host application should have this structure:

host-banking-app/
├── src/
│   ├── app/
│   │   ├── app.component.ts
│   │   ├── app.component.html
│   │   ├── app.module.ts
│   │   └── app-routing.module.ts
│   ├── assets/
│   ├── environments/
│   └── main.ts
├── angular.json
├── package.json
├── tsconfig.json
└── README.md

1.4 Configure Development Ports

Update angular.json to use specific ports:

{
  "serve": {
    "builder": "@angular-devkit/build-angular:dev-server",
    "configurations": {
      "production": {
        "buildTarget": "host-banking-app:build:production"
      },
      "development": {
        "buildTarget": "host-banking-app:build:development",
        "port": 4200
      }
    },
    "defaultConfiguration": "development"
  }
}

1.5 Initial Commit

git add .
git commit -m "feat: initial host application setup with Angular and routing"
git push origin main

---

🎯 Step 2: Create Remote MFE Repositories

Let’s create multiple remote MFEs. We’ll start with a loan calculator:

2.1 Create Loan Calculator MFE Repository

1. Create GitHub Repository:

   • Repository name: mfe-loan-calculator
   • Description: Loan calculator micro frontend for banking application
   • Visibility: Public/Private
   • ✅ Add README file
   • ✅ Add .gitignore → Node

2. Clone and Setup:

Unix/macOS:

# Clone the repository
git clone https://github.com/your-username/mfe-loan-calculator.git
cd mfe-loan-calculator

# Create Angular application
ng new . --name=mfe-loan-calculator --style=scss --routing=true --skip-git=true

# Configure for port 4201
# Edit angular.json to set port to 4201

Windows:

# Clone the repository
git clone https://github.com/your-username/mfe-loan-calculator.git
Set-Location mfe-loan-calculator

# Create Angular application
ng new . --name=mfe-loan-calculator --style=scss --routing=true --skip-git=true

# Configure for port 4201
# Edit angular.json to set port to 4201

2.2 Configure Port for Loan Calculator

Edit angular.json:

{
  "serve": {
    "builder": "@angular-devkit/build-angular:dev-server",
    "configurations": {
      "production": {
        "buildTarget": "mfe-loan-calculator:build:production"
      },
      "development": {
        "buildTarget": "mfe-loan-calculator:build:development",
        "port": 4201
      }
    },
    "defaultConfiguration": "development"
  }
}

2.3 Create Additional Remote MFEs

Repeat the process for additional MFEs:

User Dashboard MFE (Port 4202)

Unix/macOS:

git clone https://github.com/your-username/mfe-user-dashboard.git
cd mfe-user-dashboard
ng new . --name=mfe-user-dashboard --style=scss --routing=true --skip-git=true
# Configure port 4202 in angular.json

Windows:

git clone https://github.com/your-username/mfe-user-dashboard.git
Set-Location mfe-user-dashboard
ng new . --name=mfe-user-dashboard --style=scss --routing=true --skip-git=true
# Configure port 4202 in angular.json

Transaction History MFE (Port 4203)

Unix/macOS:

git clone https://github.com/your-username/mfe-transaction-history.git
cd mfe-transaction-history
ng new . --name=mfe-transaction-history --style=scss --routing=true --skip-git=true
# Configure port 4203 in angular.json

Windows:

git clone https://github.com/your-username/mfe-transaction-history.git
Set-Location mfe-transaction-history
ng new . --name=mfe-transaction-history --style=scss --routing=true --skip-git=true
# Configure port 4203 in angular.json

---

🎨 Step 3: Create Hardcoded Functionality

Let’s add some basic functionality to each MFE with hardcoded data:

3.1 Loan Calculator Component

In mfe-loan-calculator, create a loan calculator component:

Unix/macOS:

cd mfe-loan-calculator
ng generate component loan-calculator

Windows:

Set-Location mfe-loan-calculator
ng generate component loan-calculator

loan-calculator.component.html:

<div class="loan-calculator">
  <h2>Loan Calculator</h2>

  <div class="calculator-form">
    <div class="form-group">
      <label for="loanAmount">Loan Amount ($)</label>
      <input
        type="range"
        id="loanAmount"
        min="1000"
        max="1000000"
        step="1000"
        [(ngModel)]="loanAmount"
        class="slider">
      <span class="amount-display">${{ loanAmount | number }}</span>
    </div>

    <div class="form-group">
      <label for="interestRate">Interest Rate (%)</label>
      <select [(ngModel)]="interestRate" id="interestRate">
        <option value="3.5">3.5% - Excellent Credit</option>
        <option value="4.2">4.2% - Good Credit</option>
        <option value="5.1">5.1% - Fair Credit</option>
        <option value="6.8">6.8% - Poor Credit</option>
      </select>
    </div>

    <div class="form-group">
      <label for="loanTerm">Loan Term (Years)</label>
      <select [(ngModel)]="loanTerm" id="loanTerm">
        <option value="15">15 Years</option>
        <option value="20">20 Years</option>
        <option value="25">25 Years</option>
        <option value="30">30 Years</option>
      </select>
    </div>
  </div>

  <div class="results">
    <h3>Loan Details</h3>
    <div class="result-item">
      <span>Monthly Payment:</span>
      <span class="amount">${{ monthlyPayment | number:'1.2-2' }}</span>
    </div>
    <div class="result-item">
      <span>Total Interest:</span>
      <span class="amount">${{ totalInterest | number:'1.2-2' }}</span>
    </div>
    <div class="result-item">
      <span>Total Amount:</span>
      <span class="amount">${{ totalAmount | number:'1.2-2' }}</span>
    </div>
  </div>
</div>

loan-calculator.component.ts:

import { Component } from '@angular/core';

@Component({
  selector: 'app-loan-calculator',
  templateUrl: './loan-calculator.component.html',
  styleUrls: ['./loan-calculator.component.scss']
})
export class LoanCalculatorComponent {
  loanAmount: number = 250000;
  interestRate: number = 4.2;
  loanTerm: number = 30;

  get monthlyPayment(): number {
    const monthlyRate = this.interestRate / 100 / 12;
    const numberOfPayments = this.loanTerm * 12;

    if (monthlyRate === 0) {
      return this.loanAmount / numberOfPayments;
    }

    return this.loanAmount *
           (monthlyRate * Math.pow(1 + monthlyRate, numberOfPayments)) /
           (Math.pow(1 + monthlyRate, numberOfPayments) - 1);
  }

  get totalAmount(): number {
    return this.monthlyPayment * this.loanTerm * 12;
  }

  get totalInterest(): number {
    return this.totalAmount - this.loanAmount;
  }
}

loan-calculator.component.scss:

.loan-calculator {
  max-width: 600px;
  margin: 0 auto;
  padding: 2rem;
  background: #f8f9fa;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);

  h2 {
    color: #2c3e50;
    text-align: center;
    margin-bottom: 2rem;
  }

  .calculator-form {
    margin-bottom: 2rem;

    .form-group {
      margin-bottom: 1.5rem;

      label {
        display: block;
        margin-bottom: 0.5rem;
        font-weight: 600;
        color: #34495e;
      }

      .slider {
        width: 100%;
        margin-bottom: 0.5rem;
      }

      .amount-display {
        font-size: 1.2rem;
        font-weight: bold;
        color: #27ae60;
      }

      select {
        width: 100%;
        padding: 0.75rem;
        border: 1px solid #ddd;
        border-radius: 4px;
        font-size: 1rem;
      }
    }
  }

  .results {
    background: white;
    padding: 1.5rem;
    border-radius: 6px;
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.1);

    h3 {
      color: #2c3e50;
      margin-bottom: 1rem;
      text-align: center;
    }

    .result-item {
      display: flex;
      justify-content: space-between;
      padding: 0.75rem 0;
      border-bottom: 1px solid #ecf0f1;

      &:last-child {
        border-bottom: none;
        font-weight: bold;
        font-size: 1.1rem;
      }

      .amount {
        color: #27ae60;
        font-weight: 600;
      }
    }
  }
}

Don’t forget to add FormsModule in app.module.ts:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { LoanCalculatorComponent } from './loan-calculator/loan-calculator.component';

@NgModule({
  declarations: [
    AppComponent,
    LoanCalculatorComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    FormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Update app.component.html:

<div class="container">
  <h1>Loan Calculator MFE</h1>
  <app-loan-calculator></app-loan-calculator>
</div>

3.2 User Dashboard Component

In mfe-user-dashboard, create user dashboard:

Unix/macOS:

cd mfe-user-dashboard
ng generate component user-dashboard

Windows:

Set-Location mfe-user-dashboard
ng generate component user-dashboard

user-dashboard.component.html:

<div class="user-dashboard">
  <div class="header">
    <h2>Welcome back, {{ user.name }}!</h2>
    <p class="last-login">Last login: {{ user.lastLogin | date:'medium' }}</p>
  </div>

  <div class="accounts-grid">
    <div class="account-card" *ngFor="let account of accounts">
      <div class="account-header">
        <h3>{{ account.name }}</h3>
        <span class="account-type">{{ account.type }}</span>
      </div>
      <div class="account-balance">
        <span class="currency">$</span>
        <span class="amount">{{ account.balance | number:'1.2-2' }}</span>
      </div>
      <div class="account-actions">
        <button class="btn-primary">View Details</button>
        <button class="btn-secondary">Transfer</button>
      </div>
    </div>
  </div>

  <div class="quick-actions">
    <h3>Quick Actions</h3>
    <div class="actions-grid">
      <button class="action-btn" *ngFor="let action of quickActions">
        <i class="icon">{{ action.icon }}</i>
        <span>{{ action.label }}</span>
      </button>
    </div>
  </div>
</div>

user-dashboard.component.ts:

import { Component } from '@angular/core';

interface Account {
  id: string;
  name: string;
  type: string;
  balance: number;
}

interface QuickAction {
  icon: string;
  label: string;
  action: string;
}

@Component({
  selector: 'app-user-dashboard',
  templateUrl: './user-dashboard.component.html',
  styleUrls: ['./user-dashboard.component.scss']
})
export class UserDashboardComponent {
  user = {
    name: 'John Doe',
    lastLogin: new Date(Date.now() - 2 * 60 * 60 * 1000) // 2 hours ago
  };

  accounts: Account[] = [
    {
      id: '1',
      name: 'Primary Checking',
      type: 'Checking',
      balance: 5432.10
    },
    {
      id: '2',
      name: 'High Yield Savings',
      type: 'Savings',
      balance: 25678.89
    },
    {
      id: '3',
      name: 'Investment Account',
      type: 'Investment',
      balance: 67890.45
    },
    {
      id: '4',
      name: 'Credit Card',
      type: 'Credit',
      balance: -1234.56
    }
  ];

  quickActions: QuickAction[] = [
    { icon: '💸', label: 'Transfer Money', action: 'transfer' },
    { icon: '💰', label: 'Deposit Check', action: 'deposit' },
    { icon: '📊', label: 'View Statements', action: 'statements' },
    { icon: '💳', label: 'Pay Bills', action: 'bills' },
    { icon: '📈', label: 'Investments', action: 'investments' },
    { icon: '🏠', label: 'Mortgage', action: 'mortgage' }
  ];
}

3.3 Commit All Changes

For each MFE repository:

# In each repository
git add .
git commit -m "feat: add initial hardcoded functionality with mock data"
git push origin main

---

📋 Step 4: Project Organization & Documentation

4.1 Create Project Documentation

In each repository, update the README.md:

Example for mfe-loan-calculator/README.md:

# Loan Calculator MFE

A micro frontend for calculating loan payments, interest, and terms.

## 🚀 Quick Start

```bash
# Install dependencies
npm install

# Run development server
npm start

# Build for production
npm run build

📦 Features

• Interactive loan amount slider
• Interest rate selection based on credit score
• Loan term options (15-30 years)
• Real-time payment calculations
• Total interest and amount calculations

🔧 Development

• Port: 4201
• Framework: Angular 17+
• Styling: SCSS
• Module Federation: Enabled

🌐 MFE Integration

This component is designed to be consumed by the host banking application through Module Federation.

Exposed Components

• LoanCalculatorComponent - Main calculator interface

Dependencies

• Angular Common
• Angular Forms
• Angular Router

📄 License

MIT License

### **4.2 Create Development Scripts**

Add these scripts to each `package.json`:

```json
{
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "watch": "ng build --watch --configuration development",
    "test": "ng test",
    "lint": "ng lint",
    "start:dev": "ng serve --configuration development",
    "build:prod": "ng build --configuration production",
    "serve:prod": "npm run build:prod && npx http-server dist/mfe-loan-calculator"
  }
}

4.3 Create Development Environment File

Create .env file in each project:

.env

NODE_ENV=development
NG_APP_NAME=mfe-loan-calculator
NG_APP_PORT=4201
NG_APP_HOST=localhost

4.4 Port Reference Documentation

Create a PORTS.md file in your main documentation:

# MFE Port Assignments

| Application | Port | URL |
|-------------|------|-----|
| Host Banking App | 4200 | http://localhost:4200 |
| Loan Calculator MFE | 4201 | http://localhost:4201 |
| User Dashboard MFE | 4202 | http://localhost:4202 |
| Transaction History MFE | 4203 | http://localhost:4203 |

## Development Workflow

1. Start all MFEs: `npm run start:all`
2. Start individual MFE: `cd mfe-[name] && npm start`
3. Start host app: `cd host-banking-app && npm start`

---

🔍 Step 5: Local Testing & Verification

5.1 Test Each MFE Individually

Unix/macOS:

# Test loan calculator
cd mfe-loan-calculator
npm start
# Verify at http://localhost:4201

# Test user dashboard
cd mfe-user-dashboard
npm start
# Verify at http://localhost:4202

# Test host application
cd host-banking-app
npm start
# Verify at http://localhost:4200

Windows:

# Test loan calculator
Set-Location mfe-loan-calculator
npm start
# Verify at http://localhost:4201

# Test user dashboard
Set-Location mfe-user-dashboard
npm start
# Verify at http://localhost:4202

# Test host application
Set-Location host-banking-app
npm start
# Verify at http://localhost:4200

5.2 Create Master Start Script

Create startup scripts for your platform:

Unix/macOS (start-all.sh):

#!/bin/bash

echo "Starting all MFE applications..."

# Start loan calculator MFE
cd mfe-loan-calculator
npm start &
LOAN_PID=$!

# Start user dashboard MFE
cd ../mfe-user-dashboard
npm start &
DASHBOARD_PID=$!

# Start transaction history MFE
cd ../mfe-transaction-history
npm start &
TRANSACTION_PID=$!

# Start host application
cd ../host-banking-app
npm start &
HOST_PID=$!

echo "All applications started!"
echo "Loan Calculator: http://localhost:4201"
echo "User Dashboard: http://localhost:4202"
echo "Transaction History: http://localhost:4203"
echo "Host Application: http://localhost:4200"

# Wait for user input to stop all processes
read -p "Press any key to stop all applications..."

kill $LOAN_PID $DASHBOARD_PID $TRANSACTION_PID $HOST_PID
echo "All applications stopped."

Windows (start-all.ps1):

Write-Host "Starting all MFE applications..." -ForegroundColor Green

# Start loan calculator MFE
Set-Location mfe-loan-calculator
$loanProcess = Start-Process npm -ArgumentList "start" -PassThru -WindowStyle Hidden

# Start user dashboard MFE
Set-Location ..\mfe-user-dashboard
$dashboardProcess = Start-Process npm -ArgumentList "start" -PassThru -WindowStyle Hidden

# Start transaction history MFE
Set-Location ..\mfe-transaction-history
$transactionProcess = Start-Process npm -ArgumentList "start" -PassThru -WindowStyle Hidden

# Start host application
Set-Location ..\host-banking-app
$hostProcess = Start-Process npm -ArgumentList "start" -PassThru -WindowStyle Hidden

Write-Host "All applications started!" -ForegroundColor Green
Write-Host "Loan Calculator: http://localhost:4201" -ForegroundColor Cyan
Write-Host "User Dashboard: http://localhost:4202" -ForegroundColor Cyan
Write-Host "Transaction History: http://localhost:4203" -ForegroundColor Cyan
Write-Host "Host Application: http://localhost:4200" -ForegroundColor Cyan

# Wait for user input to stop all processes
Read-Host "Press Enter to stop all applications"

Stop-Process -Id $loanProcess.Id -Force
Stop-Process -Id $dashboardProcess.Id -Force
Stop-Process -Id $transactionProcess.Id -Force
Stop-Process -Id $hostProcess.Id -Force
Write-Host "All applications stopped." -ForegroundColor Yellow

Make scripts executable:

Unix/macOS:

chmod +x start-all.sh

Windows:

# Enable script execution (run as Administrator if needed)
Set-ExecutionPolicy -ExecutionPolicy RemoteSigned -Scope CurrentUser

---

✅ Project Setup Verification Checklist

• Host application created and running on port 4200
• Loan calculator MFE created and running on port 4201
• User dashboard MFE created and running on port 4202
• Transaction history MFE created and running on port 4203
• All repositories have proper README.md documentation
• Each application has hardcoded functionality working
• Port assignments documented and consistent
• Development scripts configured in package.json
• All changes committed and pushed to GitHub

---

🚀 What’s Next?

Your project foundation is now complete! Next steps:

1. ✅ Project Setup Complete
2. ➡️ Continue to: Module Federation Setup - Enable Webpack Module Federation
3. 📚 Alternative: Review the Prerequisites if you encounter any issues

You now have multiple independent Angular applications ready for Module Federation integration! 🎉