मॉड्यूल फ़ेडरेशन के साथ माइक्रो फ्रंटएंड आर्किटेक्चर · पाठ

होस्ट और रिमोट ऐप्लिकेशन

फ़ेडरेटेड सेटअप में होस्ट और रिमोट ऐप्लिकेशन के बीच अंतर तथा उनकी भूमिकाएँ सीखिए।

पाठ 3, कुल 4 में से11 चरण

होस्ट और रिमोट ऐप्लिकेशन, CoddyKit पर मॉड्यूल फ़ेडरेशन के साथ माइक्रो फ्रंटएंड आर्किटेक्चर का एक निःशुल्क पाठ है। यह 4 में से 3वाँ पाठ है। आप नीचे पूरा पाठ निःशुल्क पढ़ सकते हैं—फिर अंतर्निहित कोड संपादक और 24/7 एआई ट्यूटर के साथ ब्राउज़र में इसका व्यावहारिक अभ्यास कर सकते हैं। यह मॉड्यूल फ़ेडरेशन के साथ माइक्रो फ्रंटएंड आर्किटेक्चर सीखने के मार्ग का हिस्सा है और आपकी प्रगति वेब तथा CoddyKit ऐप पर सिंक होती रहती है। मॉड्यूल फ़ेडरेशन के साथ माइक्रो फ्रंटएंड आर्किटेक्चर पाठ्यक्रम में कुल 4 पाठ शामिल हैं।

होस्ट और रिमोट क्या होते हैं?

Module Federation में एप्लिकेशन अलग-अलग भूमिकाएँ निभाते हैं: कुछ होस्ट होते हैं और कुछ रिमोट। इसे ऐसे समझिए जैसे एक मुख्य मंच (होस्ट) अतिथि कलाकारों (रिमोट) को अपने कार्यक्रम साझा करने के लिए आमंत्रित करता है।

इस व्यवस्था से बड़े एप्लिकेशन को छोटे, स्वतंत्र रूप से विकसित और परिनियोजित किए जा सकने वाले हिस्सों में बाँटा जा सकता है।

होस्ट: आपका मुख्य एप्लिकेशन

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

यह उस मुख्य वेबसाइट जैसा है जो अन्य सेवाओं से अलग-अलग विजेट या अनुभाग लाती है।

होस्ट की मुख्य ज़िम्मेदारियाँ

होस्ट एप्लिकेशन की कुछ महत्वपूर्ण ज़िम्मेदारियाँ होती हैं:

रिमोट लोड करना: यह Webpack को बताता है कि किन रिमोट एप्लिकेशन को लोड करना है।
संदर्भ प्रदान करना: यह अक्सर पूरे एप्लिकेशन का ढाँचा, रूटिंग और साझा निर्भरताएँ प्रदान करता है।
मॉड्यूल एकीकृत करना: यह रिमोट एप्लिकेशन द्वारा दिए गए घटकों को रेंडर करता है या फ़ंक्शन का उपयोग करता है।

रिमोट: साझा किया गया हिस्सा

रिमोट एप्लिकेशन एक अलग, स्व-निहित एप्लिकेशन है जो अपने कोड के विशिष्ट हिस्सों को दूसरों के उपयोग के लिए उजागर करता है। यह अन्य रिमोट से मॉड्यूल का उपयोग भी कर सकता है या स्वयं होस्ट की भूमिका निभा सकता है!

इन उजागर किए गए हिस्सों में घटक, उपयोगिता फ़ंक्शन या पूरे पृष्ठ तक शामिल हो सकते हैं।

रिमोट की मुख्य ज़िम्मेदारियाँ

रिमोट एप्लिकेशन का ध्यान इन कार्यों पर होता है:

सुविधाएँ विकसित करना: यह विशिष्ट सुविधाएँ या UI घटक स्वतंत्र रूप से बनाता है।
मॉड्यूल उजागर करना: यह स्पष्ट रूप से तय करता है कि उसके कोडबेस के कौन-से हिस्से होस्ट एप्लिकेशन के साथ साझा किए जा सकते हैं।
स्वतंत्र परिनियोजन: इसके उजागर किए गए इंटरफ़ेस समान बने रहने तक, इसे होस्ट या अन्य रिमोट को प्रभावित किए बिना बनाया और परिनियोजित किया जा सकता है।

ModuleFederationPlugin: जोड़ने वाली कड़ी

Webpack का ModuleFederationPlugin इस पूरी परस्पर क्रिया के पीछे की मुख्य शक्ति है। होस्ट और रिमोट, दोनों एप्लिकेशन अपने Webpack कॉन्फ़िगरेशन में इस प्लगइन का उपयोग करते हैं।

यह रिमोट द्वारा मॉड्यूल उजागर करने और होस्ट द्वारा उनका उपयोग करने की प्रक्रिया को व्यवस्थित करता है, जिससे वे रनटाइम पर उपलब्ध हो जाते हैं।

रिमोट: मॉड्यूल उजागर करना

रिमोट की ओर, आप ModuleFederationPlugin कॉन्फ़िगरेशन में exposes प्रॉपर्टी का उपयोग करते हैं।

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

// webpack.config.js (remote app)
new ModuleFederationPlugin({
  name: 'remoteApp',
  exposes: {
    './Button': './src/Button.js',
    './Header': './src/Header.js'
  }
})

होस्ट: रिमोट का उपयोग करना

होस्ट की ओर, आप यह घोषित करने के लिए remotes प्रॉपर्टी का उपयोग करते हैं कि आप किन रिमोट एप्लिकेशन से मॉड्यूल का उपयोग करना चाहते हैं।

आप रिमोट के लिए एक विशिष्ट नाम और उसका एंट्री-पॉइंट URL निर्दिष्ट करते हैं।

// webpack.config.js (host app)
new ModuleFederationPlugin({
  name: 'hostApp',
  remotes: {
    remoteApp: 'remoteApp@http://localhost:3001/remoteEntry.js'
  }
})

वे आपस में कैसे काम करते हैं

जब होस्ट एप्लिकेशन लोड होता है, तो वह कॉन्फ़िगर किए गए रिमोट URL से remoteEntry.js फ़ाइल प्राप्त करता है। इस एंट्री फ़ाइल में रिमोट द्वारा उजागर किए गए सभी मॉड्यूल का घोषणापत्र होता है।

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

त्वरित जाँच

निम्नलिखित में से कौन-सा कथन Module Federation व्यवस्था में होस्ट एप्लिकेशन की मुख्य भूमिका का सबसे अच्छा वर्णन करता है?

इंटरैक्टिव पाठ में इसका उत्तर दें

होस्ट और रिमोट का पुनरावलोकन

हमने Module Federation में होस्ट और रिमोट एप्लिकेशन की मूल भूमिकाओं के बारे में सीखा।

होस्ट एप्लिकेशन मुख्य एकीकरणकर्ता होते हैं और कार्यक्षमता का उपयोग करते हैं।
रिमोट एप्लिकेशन स्वतंत्र इकाइयाँ होती हैं जो विशिष्ट मॉड्यूल उजागर करती हैं।

स्केलेबल माइक्रो फ्रंटएंड बनाने के लिए इन भूमिकाओं को समझना आवश्यक है। अब हम अपना पहला संघबद्ध एप्लिकेशन सेट करने के बारे में विस्तार से जानेंगे!

शुरुआत निःशुल्क

एआई शिक्षक के साथ JavaScript सीखें — निःशुल्क

अपने ब्राउज़र में वास्तविक कोड लिखें और चलाएँ, चौबीसों घंटे एआई शिक्षक से तुरंत सहायता पाएँ, और वेब या ऐप पर वहीं से शुरू करें जहाँ आपने छोड़ा था।

पाठ्यक्रम: 12
पाठ: 48

निःशुल्क सीखना शुरू करें पूरा पाठ्यक्रम देखें

अक्सर पूछे जाने वाले प्रश्न

क्या “होस्ट और रिमोट ऐप्लिकेशन” पाठ निःशुल्क है?

हाँ—“होस्ट और रिमोट ऐप्लिकेशन” का पूरा पाठ यहाँ वेब पर निःशुल्क पढ़ा जा सकता है। इंटरैक्टिव अभ्यास (अंतर्निहित कोड संपादक और 24/7 एआई ट्यूटर) करने और मॉड्यूल फ़ेडरेशन के साथ माइक्रो फ्रंटएंड आर्किटेक्चर पाठ्यक्रम का बाकी हिस्सा अनलॉक करने के लिए CoddyKit PRO लें। मॉड्यूल फ़ेडरेशन के साथ माइक्रो फ्रंटएंड आर्किटेक्चर पाठ्यक्रम में कुल 4 पाठ शामिल हैं।

“होस्ट और रिमोट ऐप्लिकेशन” में मैं क्या सीखूँगा?

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

क्या मॉड्यूल फ़ेडरेशन के साथ माइक्रो फ्रंटएंड आर्किटेक्चर शुरू करने के लिए मुझे किसी अनुभव की आवश्यकता है?

पहले के अनुभव की आवश्यकता नहीं है। CoddyKit पर मॉड्यूल फ़ेडरेशन के साथ माइक्रो फ्रंटएंड आर्किटेक्चर शुरुआती से लेकर उन्नत शिक्षार्थियों तक सभी के लिए व्यवस्थित किया गया है, इसलिए आप यहीं से या शुरुआत से सीखना शुरू कर सकते हैं और अपनी गति से आगे बढ़ सकते हैं। यह 4 में से 3वाँ पाठ है।

“होस्ट और रिमोट ऐप्लिकेशन” पाठ पूरा करने में कितना समय लगता है?

CoddyKit का अधिकांश पाठ लगभग 5–10 मिनट में पूरा हो जाता है। हर पाठ छोटा और संवादात्मक है, इसलिए आप लगातार प्रगति करते हैं और वेब या ऐप पर वहीं से सीखना जारी रख सकते हैं जहाँ आपने छोड़ा था।

क्या मैं इस मॉड्यूल फ़ेडरेशन के साथ माइक्रो फ्रंटएंड आर्किटेक्चर पाठ में कोड लिख और चला सकता हूँ?

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

इस पाठ्यक्रम के सभी पाठ

← मॉड्यूल फ़ेडरेशन के साथ माइक्रो फ्रंटएंड आर्किटेक्चर पर वापस जाएँ