TL;DR: माइक्रो फ्रंटएंड बनाने के लिए सिंगल-स्पा का उपयोग करने से एक बड़े ऐप को छोटे, स्वतंत्र टुकड़ों में विभाजित करना आसान हो जाता है ताकि अलग-अलग टीमें दूसरों को प्रभावित किए बिना भागों पर काम कर सकें। यह ब्लॉग दिखाता है कि एंगुलर और रिएक्ट माइक्रो फ्रंटेंड कैसे बनाएं, उन्हें रूट कॉन्फिगरेशन से कैसे जोड़ें, और उन्हें कैसे तैनात करें।

फ्रंटएंड ऐप्स को स्केल करने के लिए माइक्रो फ्रंटेंड एक लोकप्रिय वास्तुशिल्प शैली बन गई है, खासकर जब कई टीमें यूजर इंटरफेस के विभिन्न हिस्सों पर काम करती हैं। मोनोलिथिक फ्रंटएंड को छोटे, स्वतंत्र मॉड्यूल में तोड़कर, टीमें किसी ऐप के हिस्सों को अलग से तैनात, अपडेट और स्केल कर सकती हैं। यह आलेख चर्चा करेगा कि सिंगल-स्पा का उपयोग करके विभिन्न फ़्रेमवर्क के माइक्रो फ्रंटएंड कैसे बनाएं और कनेक्ट करें।

सिंगल-स्पा का परिचय

सिंगल-स्पा एक जावास्क्रिप्ट-आधारित ढांचा है जिसे माइक्रो फ्रंटएंड आर्किटेक्चर के लिए डिज़ाइन किया गया है। यह आपको एंगुलर, रिएक्ट और वीयू जैसे फ्रेमवर्क का उपयोग करके माइक्रो फ्रंटएंड बनाने और उन्हें एक ऐप के रूप में पेश करने की अनुमति देता है। यह कनेक्टेड ऐप्स का एक रजिस्टर रखता है और उपयोगकर्ताओं को विभिन्न ऐप्स पर रीडायरेक्ट करने के लिए मार्गों का उपयोग करता है।

सिंगल-एसपीए फ्रेमवर्क का उपयोग करने के कई फायदे हैं, जैसे ऐप के विभिन्न हिस्सों के लिए अलग-अलग भाषाओं को चुनना, स्वतंत्र विकास और माइक्रो फ्रंटेंड की तैनाती, और स्केलेबिलिटी। तो, आइए सिंगल-स्पा बनाना शुरू करें।

सिंगल-स्पा बनाना

आवश्यक शर्तें

सिंगल-स्पा को लागू करने के लिए, Node.js और npm स्थापित होना महत्वपूर्ण है। उन्हें स्थापित करने के लिए, Node.js वेबसाइट पर जाएं और अपने ऑपरेटिंग सिस्टम के लिए नवीनतम संस्करण डाउनलोड करें। इंस्टॉलेशन पूरा करने के लिए इंस्टॉलर चलाएँ।

फिर, कमांड प्रॉम्प्ट में निम्नलिखित कमांड निष्पादित करके नोड.जेएस और एनपीएम इंस्टॉलेशन को सत्यापित करें।

npm - version
node - version

चरण 1: प्रोजेक्ट स्थापित करना

इस उदाहरण में, एंगुलर और रिएक्ट का उपयोग करके दो सरल माइक्रो फ्रंटएंड बनाए जाएंगे। एक रूट-कॉन्फ़िगरेशन दो माइक्रो फ्रंटएंड की सेवा करेगा।

एक ऐप बनाएं

हम निम्नलिखित कमांड निष्पादित करके एक सरल एंगुलर माइक्रो फ्रंटएंड ऐप बना सकते हैं।

ng new angular-spa-frontend

प्रोजेक्ट बन जाने के बाद, सिंगल-स्पा लाइब्रेरी स्थापित करने के लिए अगला कमांड निष्पादित करें।

ng add single-spa-angular

एक बार लाइब्रेरी ठीक से स्थापित हो जाने के बाद, एंगुलर प्रोजेक्ट में main.single-spa.ts नाम की एक फ़ाइल बनाई जाएगी, जिसमें सिंगल-स्पा से संबंधित सभी कॉन्फ़िगरेशन शामिल हैं।

कॉन्फ़िगरेशन कोड देखें।

if (environment.production) {
 enableProdMode();
}

const lifecycles = singleSpaAngular({
 bootstrapFunction: (singleSpaProps) => {
  singleSpaPropsSubject.next(singleSpaProps);

  const extraProviders = [
   ...getSingleSpaExtraProviders(),
   { provide: APP_BASE_HREF, useValue: '/' }
  ];

  return platformBrowserDynamic(extraProviders).bootstrapModule(AppModule);
 },
 template: '',
 Router,
 NavigationStart,
 NgZone,
});

export const bootstrap = lifecycles.bootstrap;
export const mount = lifecycles.mount;
export const unmount = lifecycles.unmount;

सिंगल-स्पा के रूप में काम करने के लिए APP_BASE_HREF मान प्रदान करना आवश्यक है।

इसके अलावा, सिंगल-स्पा लाइब्रेरी जोड़ने पर, package.json में दो अतिरिक्त स्क्रिप्ट होंगी।

"scripts": {
  "ng": "ng",
  "start": "ng serve",
  "build": "ng build",
  "watch": "ng build --watch --configuration development",
  "test": "ng test",
  "build:single-spa:angular-spa-frontend": "ng build angular-spa-frontend --prod",
  "serve:single-spa:angular-spa-frontend": "ng s --project angular-spa-frontend --disable-host-check --port 4200 --live-reload false"
 }

angular.json फ़ाइल को निम्नलिखित कॉन्फ़िगरेशन का उपयोग करके संशोधित किया जाएगा।

"build": {
   "builder": "@angular-builders/custom-webpack:browser",
   "options": {
      "outputPath": "dist/angular-spa-frontend",
      "index": "src/index.html",
      "main": "src/main.single-spa.ts",
      "polyfills": "src/polyfills.ts",
      "tsConfig": "tsconfig.app.json",
      "inlineStyleLanguage": "scss",
      "assets": [
       "src/favicon.ico",
       "src/assets"
      ],
      "styles": [
       "src/styles.scss"
      ],
      "scripts": [],
      "customWebpackConfig": {
       "path": "extra-webpack.config.js",
       "libraryName": "angular-spa-frontend",
       "libraryTarget": "umd"
      },
      "deployUrl": "http://localhost:4200/"
     },

}

“main”: “src/main.ts” को “main”: “src/main.single-spa.ts” से बदल दिया जाएगा। एक नया बिल्ड कॉन्फ़िगरेशन जावास्क्रिप्ट मॉड्यूल के रूप में जोड़ा जाएगा।

एक बार कॉन्फ़िगरेशन पूर्ण और सत्यापित हो जाने पर, हम निम्नलिखित कमांड का उपयोग करके एंगुलर ऐप की सेवा कर सकते हैं।

npm run serve:single-spa:angular-spa-frontend

अब जब हमने सफलतापूर्वक माइक्रो फ्रंटएंड ऐप बना लिया है, तो आइए देखें कि root-config को कैसे लागू किया जाए।

रूट-विन्यास

रूट-कॉन्फ़िगरेशन बनाने के लिए निम्नलिखित कमांड निष्पादित करें।

npx create-single-spa

इस कमांड को दर्ज करने पर, रूट-कॉन्फ़िगरेशन बनाने के लिए कॉन्फ़िगरेशन की एक श्रृंखला प्रस्तुत की जाएगी।

पिछली कॉन्फ़िगरेशन का चयन करने के बाद, कई फ्रंटएंड की सेवा के लिए रूट कॉन्फ़िगरेशन बनाया जाएगा।

बनाए गए माइक्रो फ्रंटएंड को रूट-कॉन्फ़िगरेशन से कनेक्ट करने के लिए, हमें root-config.ts और index.ejs फ़ाइलों को संशोधित करने की आवश्यकता है।

registerApplication({
 name: "@org/angular-spa-frontend",
 app: () =>
  System.import("@org/angular-spa-frontend")
   .then((module: LifeCycles) => ({
    bootstrap: module.bootstrap,
    mount: module.mount,
    unmount: module.unmount,
   }))
   .catch((error) => {
    console.error("Failed to load micro-frontend:", error);
    return Promise.reject(error);
   }),
  activeWhen: ['/'],
});

start({
 urlRerouteOnly: true,
});

जैसा कि पिछले कोड ब्लॉक में बताया गया है, बनाए गए माइक्रो फ्रंटएंड को root-config.ts फ़ाइल में आयात किया जाना चाहिए।

name: "@org/angular-spa-frontend",

निम्नलिखित स्क्रिप्ट को index.ejs फ़ाइल में जोड़ा जाना चाहिए।

यूआरएल ( http://localhost:4200/main.js ) के साथ माइक्रो फ्रंटएंड ( @org/angular-spa-frontend ) बनाया गया, जिसमें माइक्रो फ्रंटएंड होस्ट किया गया है, इसे आयात मानचित्र में जोड़ा जाना है।

फिर, ऐप चलाने के लिए निम्नलिखित कमांड निष्पादित करें।

npm run start

यह मानते हुए कि ये चरण सही ढंग से किए गए हैं, हमें निम्नलिखित छवि के समान दृश्य में अंतिम सिंगल-स्पा देखने में सक्षम होना चाहिए।

चरण 2: उत्पादन में तैनाती

इन माइक्रो फ्रंटएंड को उत्पादन में तैनात करते समय, यह अनुशंसा की जाती है कि प्रत्येक माइक्रो फ्रंटएंड ऐप को एक स्वतंत्र, स्टैंडअलोन ऐप के रूप में तैनात किया जाए। registerApplication में सेट किए गए ऐप रूट के आधार पर, रूट कॉन्फ़िगरेशन संभवतः प्रत्येक ऐप को गतिशील रूप से लोड करेगा।

चरण 3: अधिक माइक्रो फ्रंटेंड जोड़ना

अधिक माइक्रो फ्रंटएंड जोड़ने के लिए, पहले बताए गए चरणों को दोहराएं। आइए देखें कि रिएक्ट माइक्रो फ्रंटएंड को उसी रूट-कॉन्फ़िगरेशन में कैसे एकीकृत किया जाए।

निम्नलिखित कमांड का उपयोग करके एक नया रिएक्ट माइक्रो फ्रंटएंड बनाएं।

npx create-single-spa --module-type react

फिर, बनाए गए प्रोजेक्ट के अंदर नेविगेट करें और सिंगल-स्पा-रिएक्शन इंस्टॉल करें।

npm install single-spa-react

ऐप को सिंगल-स्पा के साथ संगत बनाने के लिए जीवनचक्र विधियों को निर्यात करने के लिए प्रविष्टि फ़ाइल को संशोधित करें।

import React from "react";
import ReactDOM from "react-dom";
import singleSpaReact from "single-spa-react";
import App from "./App";

const lifecycles = singleSpaReact({
  React,
  ReactDOM,
  rootComponent: App,
  errorBoundary(err, info, props) {
    return 
Error loading React micro-frontend
;
  },
});

export const { bootstrap, mount, unmount } = lifecycles;

एक बार कॉन्फ़िगरेशन पूरा हो जाने पर, हम निम्नलिखित कमांड का उपयोग करके रिएक्ट माइक्रो फ्रंटएंड की सेवा कर सकते हैं।

npm start

मौजूदा root-config के साथ बनाए गए माइक्रो फ्रंटएंड को एकीकृत करने के लिए, रूट-कॉन्फिगरेशन में फ़ाइलों में निम्नलिखित संशोधन लागू करें।

import { registerApplication, start } from "single-spa";

registerApplication({
  name: "@org/angular-spa-frontend",
  app: () =>
    System.import("@org/angular-spa-frontend")
      .then((module) => ({
        bootstrap: module.bootstrap,
        mount: module.mount,
        unmount: module.unmount,
      }))
      .catch((error) => {
        console.error("Failed to load Angular micro-frontend:", error);
        return Promise.reject(error);
      }),
  activeWhen: ["/"],
});

registerApplication({
  name: "@org/react-spa-frontend",
  app: () =>
    System.import("@org/react-spa-frontend")
      .then((module) => ({
        bootstrap: module.bootstrap,
        mount: module.mount,
        unmount: module.unmount,
      }))
      .catch((error) => {
        console.error("Failed to load React micro-frontend:", error);
        return Promise.reject(error);
      }),
  activeWhen: ["/react"], 
});

start({
  urlRerouteOnly: true,
});

आपको रिएक्ट ऐप के मुख्य बंडल पथ के साथ index.ejs फ़ाइल को भी अपडेट करना होगा।

गिटहब संदर्भ

इस GitHub डेमो में इस सिंगल-स्पा एप्लिकेशन का पूरा कोड उदाहरण देखें।

निष्कर्ष

माइक्रो फ्रंटएंड बनाने के लिए सिंगल-स्पा का उपयोग करने से बड़े ऐप को छोटे, स्वतंत्र टुकड़ों में विभाजित करना आसान हो जाता है। इस तरह, अलग-अलग टीमें दूसरों को प्रभावित किए बिना अपने हिस्से पर काम कर सकती हैं और अपनी पसंदीदा रूपरेखाओं का उपयोग कर सकती हैं, जैसे एंगुलर या रिएक्ट। इस गाइड में दिए गए चरणों का पालन करके, आप एक सिंगल-स्पा प्रोजेक्ट सेट कर सकते हैं, कई माइक्रो फ्रंटएंड कनेक्ट कर सकते हैं और उपयोगकर्ताओं को एक सहज अनुभव दे सकते हैं। सिंगल-स्पा समय के साथ आपके ऐप को विकसित करना और आवश्यकतानुसार नई सुविधाएँ जोड़ना आसान बनाता है।

संबंधित ब्लॉग

• RxJS के साथ एसिंक्रोनस जावास्क्रिप्ट में महारत हासिल करें
• एक्सिओस और फ़ेच एपीआई? सही HTTP क्लाइंट चुनना
• टाइपस्क्रिप्ट उपयोगिता प्रकार: एक संपूर्ण मार्गदर्शिका
• सुरक्षित जेडब्ल्यूटी भंडारण: सर्वोत्तम अभ्यास