Micro Front là gì cách truyển khai Micro Front trên Angular

Chào các bạn đây là bài post đầu tiên của mình trên blog của mình. Chắc hẳn các bạn đã quá quen thuộc với Microservices trên backend (java, nodejs…) rồi. Nhưng đối với Front-End thì định nghĩa Microservices lại ít được đề cập tới, mình là 1 dev backend vì thế trước kia mình chưa từng nghĩ Front-end lại có thể build được theo mô hình MicroService cho tới khi dự án hiện tại của mình được chuyển đổi sang Micro Front, vì thế sau đây mình xin giới thiệu cơ bản nhất về Micro FE và cách implement nó.

Micro FrontEnd là gì.?

Cũng giống như MicroService trong Backend chúng ta sẽ chia nhỏ thành nhiều service FE con riêng lẻ theo chức năng thay vì viết tất cả vào 1 Project. Như vậy mỗi tính năng sẽ được quản lý bởi 1 project riêng, để dễ dàng cho việc quản lý và maintain.

Build Micro Frontend trên Angular

Đầu tiên chúng ta tạo 1 project Dashboard làm nhiệm vụ là 1 project cha
- ng new Dashboard
Tương tự chúng ta tạo các Microservice con
- ng new Notes
Sau khi tạo xong ta được thư mục như hình

Bây giờ ta vào từng Project vừa chạy và khởi chạy bằng lệnh npm start

Bây giờ mình sẽ sửa lại 1 chút ở Dashboard để giao diện được trực quan hơn mở index.html sửa thành

<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>Dashboard</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">

  <link href='https://fonts.googleapis.com/css?family=Comfortaa' rel='stylesheet'
    type='text/css'>

  <style>
    body {
      font-family: 'Comfortaa', cursive;
      padding-top: 80px;
      padding-left: 10px;
    }

    ul {
      list-style-type: none;
      margin: 0;
      padding: 0;
      overflow: hidden;
      background-color: #333;

      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
    }

    li {
      float: left;
      height: 50px;
      margin-top: auto;
      margin-bottom: auto;
    }

    li a {
      display: block;
      color: white;
      text-align: center;
      padding: 14px 16px;
      text-decoration: none;
      cursor: pointer;
    }

    li a:hover {
      background-color: #111;
    }

    pre {
      background-color: lightgray;
      padding: 10px;
    }
  </style>

</head>

<body>
  <app-root></app-root>
</body>

</html>

Chỉnh sửa app.component.html như sau

<ul>
  <li><img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg==" width="50"></li>
  <li><a routerLink="/">Home</a></li>
  <li><a routerLink="/notes">Notes</a></li>
  <li><a routerLink="/todo">Todo</a></li>
</ul>
<router-outlet></router-outlet>

Tiếp theo sẽ kết nối Dashboard với Project Notes

Vào thư mục source Dashboard thêm webpack5 bằng lệnh ng add @angular-architects/module-federation Nhập Project Name là DashBoard tiếp theo nhập port ở đây mình dùng port 4200

Lúc này source Dashboard sẽ sinh ra thêm 2 file webpack.config.js và webpack.prod.config.js

Tiếp theo chúng ta sẽ sang source Notes và làm tương tự với Project name: Notes và port 4201

Ở source Notes ta sẽ mở webpack.config.js ra và mở comment remote

vì đây là microservice con vì thế trong app-routing.module.ts chúng ta sẽ sửa

imports: [RouterModule.forRoot(routes)] thành imports: [RouterModule.forChild(routes)]

Quay lại với source Dashboard ta setting sẽ setting router remote bằng cách thêm router trong app-routing.module.ts như bên dưới

{

path:’notes’,

loadChildren: () =>loadRemoteModule({

type:’module’,

remoteEntry:’http://localhost:4201/remoteEntry.js’,

exposedModule:’./module’

})

.then(m => {return m.AppModule})

},

Cuối cùng khởi chạy 2 project ta sẽ thấy port 4200 của Dashboard đã load được source ở Notes với port 4201 qua remoteEntry.js như hình là đã thành công.

Link download source: Micro FE source

Cảm ơn các bạn đã đọc bài.!