3 Langkah Mudah Membangun Micro Frontends Di React - CRUDPRO
Home  ›  Others

3 Langkah Mudah Membangun Micro Frontends Di React

Written By Tuesday, May 9, 2023
3 Langkah Mudah Membangun Micro Frontends Di React

Pernahkah Anda bertanya-tanya bagaimana situs web besar seperti Amazon atau Netflix dapat memberikan pengalaman pengguna yang lancar di banyak halaman? Jawabannya terletak pada penggunaan arsitektur mikrofrontend mereka.

Microfrontend adalah pendekatan untuk membangun aplikasi di mana front-end dipecah menjadi bagian yang lebih kecil dan independen, masing-masing dengan antarmuka pengguna dan fungsinya sendiri. Bagian-bagian independen ini kemudian diintegrasikan untuk membentuk sebuah aplikasi yang lengkap.

Keuntungan dari microfrontend adalah membuat aplikasi lebih fleksibel dan lebih mudah untuk dipelihara. Daripada memiliki satu ujung depan monolitik, Anda dapat memecahnya menjadi komponen yang lebih kecil dan dapat digunakan kembali. Hal ini memungkinkan developer untuk bekerja pada bagian aplikasi yang berbeda tanpa mengganggu bagian lain. Ini juga berarti bahwa jika salah satu bagian dari aplikasi perlu diperbarui, hal itu dapat dilakukan tanpa mempengaruhi bagian aplikasi lainnya.

Catatan: Mengelola komponen dan ketergantungannya di dalam Microfrontends dapat menjadi tantangan tersendiri. Di sinilah Bit berguna. Bit adalah alat open-source untuk berbagi dan mengelola komponen yang dapat digunakan kembali di berbagai proyek dan tim. Dengan Bit, Anda dapat dengan mudah membuat, berbagi, dan menggunakan kembali komponen, sehingga memudahkan pemeliharaan dan pembaruan arsitektur mikrofrontend Anda. Pelajari lebih lanjut di sini.

Mari kita mulai dan bangun microfrontend pertama kita di React dalam 3 langkah sederhana.

1. Atur Proyek React Microfrontend

Kita akan menggunakan federasi modul webpack dengan React untuk membangun mikrofrontend pertama kita.

  • Buat direktori proyek microfrontend Anda. Sebut saja: mikro-host.
  • Jalankan perintah di bawah ini untuk memulai proyek dan pasang semua dependensi: 
npm init -y
npm install react react-dom --save
npm install @babel/core @babel/preset-env @babel/preset-react babel-loader css-loader html-webpack-plugin sass sass-loader style-loader webpack webpack-cli webpack-dev-server --save-dev
  • Buka file package.json dan salin tempel di bawah skrip npm: 
"scripts": {
  "build": "webpack",
  "start": "webpack serve --watch-files ./src"
}
  • Buat file babel.config.json dan tempelkan di bawah konfigurasi: 
{
  "presets": [
    "@babel/preset-env",
    "@babel/preset-react"
  ]
}
  • Buat file webpack.config.js dan tempelkan di bawah konfigurasi: 
const HtmlWebpackPlugin = require("html-webpack-plugin");
const path = require("path");
const ModuleFederationPlugin = require("webpack/lib/container/ModuleFederationPlugin");
const deps = require("./package.json").dependencies;

module.exports = {
  mode: "development",
  resolve: {
    extensions: [".css", ".scss", ".js", ".jsx"],
  },
  module: {
    rules: [
      {
        test: /\.s?css$/,
        use: [
          "style-loader",
          {
            loader: "css-loader",
            options: {
              url: {
                filter: (url) => {
                  if (url.startsWith("data:")) {
                    return false;
                  }
                  return true;
                },
              },
            },
          },
          "sass-loader",
        ],
      },
      {
        test: /\.jsx?$/,
        use: ["babel-loader"],
        exclude: /node_modules/,
      },
      {
        test: /\.(png|svg|jpg|jpeg|gif)$/i,
        type: "asset/resource",
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: path.resolve(__dirname, "public", "index.html"),
    }),
    new ModuleFederationPlugin({
      name: "FIRST_APP",
      filename: "remoteEntry.js",
      exposes: {
        "./app": "./src/components/App",
      },
    }),
  ],
};

Dalam konfigurasi di atas, kami menamai mikrofrontend FIRST_APP. Kami mengekspos komponen Aplikasi kami yang dapat diintegrasikan secara langsung menggunakan URL long distancenya.

  • Buat direktori public dan buat file public/index.html dan tempelkan kode di bawah ini: 
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Micro App</title>
  </head>
  <body>
    <div id="container"></div>
  </body>
</html>

File ini membuat struktur untuk aplikasi web React kita. Aplikasi akan dirender di dalam div “container” saat Anda mengunjungi aplikasi secara normal seperti yang Anda lakukan pada aplikasi React lainnya.

  • Buat direktori src dan buat file src/index.js dan tempelkan kode di bawah ini: 
import React from 'react';
import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import MainApp from './components/Main';

const rootElement = document.getElementById("container");
const root = createRoot(rootElement);

root.render(
  <StrictMode>
    <MainApp />
  </StrictMode>
);

Kami menggunakan React 18 di sini dan komponen MainApp dibuat untuk menggunakan aplikasi langsung di browser web.

  • Buat direktori src/components dan buat file App.js dan tempelkan kode di bawah ini: 
import * as React from 'react';
import "./styles.css";

export default function App({ onChange }) {
  return (
    <div className="MicroApp">
      <h1>Micro App</h1>
      <input onChange={onChange} type="text" placeholder="Enter your name" />
    </div>
  );
}

App komponen di atas adalah microfrontend utama yang akan kami paparkan dalam proyek kami. Anda juga dapat membuat lebih banyak komponen dan mengeksposnya menggunakan webpack.config.js.

  • Buat file src/components/Main.js dan tempelkan kode di bawah ini: 
import * as React from 'react';
import App from './App';
import "./styles.css";

export default function MainApp() {
  const [name, setName] = React.useState(null);
  return (
    <>
      <h3 style={{ textAlign: 'center' }}>{ name ? <p>Your name is: {name}</p> : null }</h3>
      <App onChange={(e) => setName(e.target.value)} />
    </>
  );
}

Komponen MainApp hanya digunakan untuk satu tujuan, yaitu untuk mengizinkan penggunaan aplikasi seperti aplikasi React lainnya.

  • Buat file src/components/styles.css dan tempelkan kode di bawah ini: 
.MicroApp {
    box-sizing: border-box;
    margin: auto;
    margin-top: 100px;
    padding: 30px;
    width: 95%;
    border: 2px solid black;
    border-radius: 12px;
    font-family: sans-serif;
    text-align: center;
}

.MicroApp input {
  height: 32px;
  border-radius: 8px;
  border: 2px solid gray;
  width: 350px;
  padding-left: 10px;
  padding-right: 10px;
}

2. Boot Aplikasi MicroFrontend Pertama Anda

Untuk memulai server aplikasi mikrofrontend Anda, jalankan perintah di bawah ini:

npm start
3 Langkah Mudah Membangun Micro Frontends Di React

3. Mengintegrasikan MicroFrontend di React

Mengintegrasikan aplikasi mikrofrontend di React lain sangatlah sederhana. Aplikasi microfrontend akan dihosting di port 8080 dan aplikasi kedua kami akan mengintegrasikannya melalui URL long distance yang diekspos melalui package web.

  • Buat direktori proyek Anda. Sebut saja: klien mikro.
  • Jalankan perintah di bawah ini untuk memulai proyek dan instal semua dependensi: 
npm init -y
npm install react react-dom --save
npm install @babel/core @babel/preset-env @babel/preset-react babel-loader css-loader html-webpack-plugin sass sass-loader style-loader webpack webpack-cli webpack-dev-server --save-dev
  • Buka file package.json dan salin tempel di bawah skrip npm: 
"scripts": {
  "build": "webpack",
  "start": "webpack serve --watch-files ./src"
}
  • Buat file babel.config.json dan tempelkan di bawah konfigurasi: 
{
  "presets": [
    "@babel/preset-env",
    "@babel/preset-react"
  ]
}
  • Buat file webpack.config.js dan tempelkan di bawah konfigurasi: 
const HtmlWebpackPlugin = require("html-webpack-plugin");
const path = require("path");
const ModuleFederationPlugin = require("webpack/lib/container/ModuleFederationPlugin");
const deps = require("./package.json").dependencies;

module.exports = {
  mode: "development",
  resolve: {
    extensions: [".css", ".scss", ".js", ".jsx"],
  },
  module: {
    rules: [
      {
        test: /\.s?css$/,
        use: [
          "style-loader",
          {
            loader: "css-loader",
            options: {
              url: {
                filter: (url) => {
                  if (url.startsWith("data:")) {
                    return false;
                  }
                  return true;
                },
              },
            },
          },
          "sass-loader",
        ],
      },
      {
        test: /\.jsx?$/,
        use: ["babel-loader"],
        exclude: /node_modules/,
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: path.resolve(__dirname, "public", "index.html"),
    }),
    new ModuleFederationPlugin({
      name: "MICRO",
      remotes: {
        FIRST_APP: "FIRST_APP@http://localhost:8080/remoteEntry.js",
      },
    }),
  ],
};

Dalam konfigurasi di atas, kami memulai long distance aplikasi mikrofrontend FIRST_APP.

  • Buat direktori public dan buat file public/index.html dan tempelkan kode di bawah ini: 
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Micro App</title>
  </head>
  <body style="width: 100%; height: 100%">
    <div id="container"></div>
  </body>
</html>
  • Buat direktori src dan buat file src/index.js dan tempelkan kode di bawah ini: 
import React from 'react';
import { StrictMode } from "react";
import { createRoot } from "react-dom/client";

import App from "./App";

const rootElement = document.getElementById("container");
const root = createRoot(rootElement);

root.render(
  <StrictMode>
    <App />
  </StrictMode>
);
  • Buat direktori src dan buat file src/index.js dan tempelkan kode di bawah ini: 
import React, { lazy, Suspense } from "react";
import "./styles.css";

const FirstApp = lazy(() => import("FIRST_APP/app"));

const App = () => {
  const [name, setName] = React.useState(null);

  return (
    <div className="App">
      <h1>This is second app</h1>
      <h2>Micro host app is integrated here</h2>
      { name ? <p>Your name is: {name}</p> : null }
      <div>
        <Suspense fallback={<span>Loading...</span>}>
          <FirstApp onChange={(e) => setName(e.target.value)} />
        </Suspense>
      </div>
    </div>
  );
};

export default App;

Kami menggunakan Suspense untuk memuat aplikasi remote microfrontend kami di aplikasi React ini.

  • Buat file src/components/styles.css dan tempelkan kode di bawah ini: 
.App {
  font-family: sans-serif;
  text-align: center;
}

Jalankan perintah di bawah ini untuk memulai aplikasi kedua:

npm start

Aplikasi akan mulai di port 8081. Kunjungi http://localhost:8081/ untuk membuka dan memeriksa aplikasi.

3 Langkah Mudah Membangun Micro Frontends Di React

Aplikasi mikrofrontend dimuat menggunakan URL long distance di aplikasi React kedua kami.

Kode untuk tutorial ini dapat ditemukan di sini.

Kesimpulan

Kesimpulannya, membangun aplikasi yang dapat digunakan kembali dan bertahan lama sampai jangka panjang sangat penting untuk bisnis atau organisasi mana pun yang ingin tetap berada di depan kurva. Menggunakan microfrontends dengan React dan Webpack Module Federation adalah cara yang bagus untuk mencapai tujuan ini.

Dengan membagi front-end menjadi komponen yang lebih kecil dan independen, Anda dapat membuat aplikasi yang lebih fleksibel dan modular. Hal ini memudahkan pemeliharaan dan pembaruan aplikasi, serta mengurangi jumlah kode duplikat yang perlu Anda tulis.

Bangun Aplikasi dengan komponen yang dapat digunakan kembali, seperti Lego

3 Langkah Mudah Membangun Micro Frontends Di React