Tutorial KonsepKoding.com menunjukkan cara menyiapkan arsitektur mikro-frontend menggunakan Vite, React, TypeScript, dan @originjs/vite-plugin-federation. Kami akan membuat aplikasi jarak jauh yang mengekspos komponen dan aplikasi host yang menggunakannya, dengan jalur file terperinci dan dukungan TypeScript (.tsx).

Tutorial Membuat Micro Frontend Dengan Vite Module Federation React TypeScript

Apa itu Micro Frontend ?

Micro Frontend adalah pendekatan arsitektur pengembangan web di mana aplikasi frontend dibagi menjadi modul-modul kecil yang independen. Setiap modul dapat dikembangkan, diuji, dan dideploy secara terpisah oleh tim yang berbeda. Pendekatan ini memperluas konsep microservices ke sisi frontend. Module Federation, seperti yang digunakan dalam Vite, memungkinkan berbagi komponen antar aplikasi secara dinamis.

Ilustrasi Micro Frontend
Ilustrasi Micro Frontend 


Keuntungan:

  • Skalabilitas Tim: Tim dapat bekerja secara paralel pada modul berbeda, meningkatkan efisiensi.
  • Fleksibilitas Teknologi: Memungkinkan penggunaan teknologi atau framework berbeda untuk setiap modul.
  • Pemeliharaan Mudah: Modul independen memudahkan pembaruan dan debugging tanpa memengaruhi keseluruhan aplikasi.

Kebutuhan

1. Node.js (v16 or higher)
2. npm or yarn/pnpm
3. React, TypeScript, and Vite

Tutorial  Langkah 1  Set Up Aplikasi Remote

1: Siapkan Aplikasi  Remote App

Buat Aplikasi Remote App

npm create vite@latest remote-app -- --template react-ts
cd remote-app
npm install

2. Install Federation Plugin

npm install @originjs/vite-plugin-federation


3. Buat component atau file remote-app/src/components/RemoteComponent.tsx:


import React from 'react';


const RemoteComponent: React.FC = () => (

  <div style={{ border: '1px solid #ccc', padding: '16px', borderRadius: '4px' }}>

    <h2>Hello from Remote Component!</h2>

    <p>This component is loaded from the remote application.</p>

  </div>

);


export default RemoteComponent;



4. Config Update remote-app/vite.config.ts:

import { defineConfig } from 'vite';

import react from '@vitejs/plugin-react';

import federation from '@originjs/vite-plugin-federation';


export default defineConfig({

  plugins: [

    react(),

    federation({

      name: 'remoteApp',

      filename: 'remoteEntry.js',

      exposes: {

        './RemoteComponent': './src/components/RemoteComponent.tsx',

      },

      shared: ['react', 'react-dom'],

    }),

  ],

  build: {

    modulePreload: false,

    target: 'esnext',

    minify: false,

    cssCodeSplit: false,

  },

  server: {

    port: 5001,

    strictPort: true,

  },

  preview: {

    port: 5001,

    strictPort: true,

  },

});


5. Perbarui package.jsonPastikan skrip di remote-app/package.json menyertakan port tetap:

{

  "scripts": {

    "dev": "vite --port=5001 --strictPort",

    "build": "vite build",

    "preview": "vite preview --port=5001 --strictPort"

  }

}


6. Uji  Remote-app Jalankan aplikasi jarak jauh dalam mode preview (diperlukan untuk federasi):

npm run build

npm run preview


Tutorial Langkah 2  Set Up Aplikasi Host

1. Buat Host App

npm create vite@latest host-app -- --template react-ts
cd host-app
npm install


2. Install Federation Plugin

npm install @originjs/vite-plugin-federation

3. Tambahkan Deklarasi TypeScript untuk Modul Remote App. Buat host-app/src/types/remotes.d.ts untuk mengatasi kesalahan modul TypeScript: 

declare module 'remoteApp/RemoteComponent';

4. Consume Host-app/src/App.tsx Remote Component Update untuk mengimpor komponen jarak jauh secara dinamis:


import React, { Suspense } from 'react';

import './App.css';


const RemoteComponent = React.lazy(() => import('remoteApp/RemoteComponent'));


const App: React.FC = () => {

  return (

    <div>

      <h1>Host Application</h1>

      <Suspense fallback={<div>Loading Remote Component...</div>}>

        <RemoteComponent />

      </Suspense>

    </div>

  );

};


export default App;


5. Konfiigurasi host-app/vite.config.ts:

import { defineConfig } from 'vite';

import react from '@vitejs/plugin-react';

import federation from '@originjs/vite-plugin-federation';


export default defineConfig({

  plugins: [

    react(),

    federation({

      name: 'hostApp',

      remotes: {

        remoteApp: 'http://localhost:5001/assets/remoteEntry.js',

      },

      shared: ['react', 'react-dom'],

    }),

  ],

  build: {

    modulePreload: false,

    target: 'esnext',

    minify: false,

    cssCodeSplit: false,

  },

  server: {

    port: 5000,

    strictPort: true,

  },

  preview: {

    port: 5000,

    strictPort: true,

  },

});


6. Update package.json script menjadi host-app/package.json seperti di bawah ini:

{

  "scripts": {

    "dev": "vite --port=5000 --strictPort",

    "build": "vite build",

    "preview": "vite preview --port=5000 --strictPort"

  }

}


Tutorial Langkah 3 Run Aplikasi


1. Jalankan remote-app direktori: 

npm run build

npm run preview

2. Jalankan Host App  host-app direktori:

npm run dev


Catatan Struktur Project:


 remote-app/

├── src/

│   ├── components/

│   │   └── RemoteComponent.tsx

│   ├── main.tsx

│   └── vite-env.d.ts

├── vite.config.ts

├── package.json

├── tsconfig.json

└── tsconfig.node.json


host-app/

├── src/

│   ├── types/

│   │   └── remotes.d.ts

│   ├── App.tsx

│   ├── App.css

│   ├── main.tsx

│   └── vite-env.d.ts

├── vite.config.ts

├── package.json

├── tsconfig.json

└── tsconfig.node.json

Jika berhasil maka hasilnya akan seperti ini

Tutorial Membuat Micro Frontend Dengan Vite Module Federation React TypeScript


Jika ada pertanyaan bisa di tuliskan di kolom komentar, semoga bermanfaat tutorial series React ini.