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

प्रोजेक्ट सेटअप और कॉन्फ़िगरेशन

शुरुआत से नया प्रोजेक्ट सेट अप कीजिए और कई ऐप्लिकेशन के लिए Webpack तथा Module Federation को कॉन्फ़िगर कीजिए।

पाठ 1, कुल 4 में से12 चरण

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

संघबद्ध एप्लिकेशन में आपका स्वागत है!

क्या आप अपना पहला माइक्रो फ्रंटएंड एप्लिकेशन बनाना चाहते हैं? यह पाठ आपको Webpack के Module Federation का उपयोग करके होस्ट और रिमोट एप्लिकेशन सेट करने का तरीका बताएगा।

हम शुरुआत से शुरू करेंगे और प्रोजेक्ट संरचना, Webpack का मूल कॉन्फ़िगरेशन तथा शक्तिशाली Module Federation Plugin के एकीकरण को समझेंगे।

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

Module Federation में एप्लिकेशन के दो मुख्य प्रकार होते हैं:

होस्ट एप्लिकेशन: यह आपका मुख्य ढाँचा एप्लिकेशन है, जो अन्य एप्लिकेशन से घटकों या मॉड्यूल का उपयोग करता है। इसे समन्वयक की तरह समझिए।
रिमोट एप्लिकेशन: यह एक स्वतंत्र एप्लिकेशन है, जो अपने घटकों या मॉड्यूल को दूसरों के उपयोग के लिए उजागर करता है।

हम अपने प्रोजेक्ट में दोनों को सेट करेंगे!

प्रोजेक्ट फ़ोल्डर संरचना

आइए अपने प्रोजेक्ट को व्यवस्थित करें। हम एक मुख्य डायरेक्टरी बनाएँगे और फिर अपने होस्ट तथा रिमोट एप्लिकेशन के लिए उप-डायरेक्टरी बनाएँगे। इससे वे अलग रहते हैं, लेकिन आसान विकास के लिए एक ही कार्यक्षेत्र में होते हैं।

my-federated-app/
├── host/
│   ├── src/
│   └── public/
└── remote/
    ├── src/
    └── public/

Webpack शुरू करना और इंस्टॉल करना

पहले host और remote दोनों डायरेक्टरी में जाएँ और npm शुरू करें। फिर विकास निर्भरताओं के रूप में Webpack और उसका कमांड-लाइन इंटरफ़ेस (CLI), साथ ही विकास सर्वर और HTML प्लगइन इंस्टॉल करें।

// In host/ and remote/ directories:
npm init -y
npm install webpack webpack-cli webpack-dev-server html-webpack-plugin --save-dev
npm install react react-dom --save

होस्ट एप्लिकेशन: एंट्री और HTML

होस्ट एप्लिकेशन को एक एंट्री-पॉइंट की आवश्यकता होती है। हम एक सरल index.js फ़ाइल बनाएँगे, जो हमारे होस्ट की मुख्य स्क्रिप्ट होगी। यहीं से हमारा एप्लिकेशन शुरू होगा।

// host/src/index.js
console.log('Host application is now running!');

// host/public/index.html
<!DOCTYPE html>
<html>
  <head><title>Host App</title></head>
  <body>
    <div id="root"></div>
  </body>
</html>

रिमोट एप्लिकेशन: घटक और एंट्री

हमारा रिमोट एप्लिकेशन एक सरल React घटक उजागर करेगा। आइए घटक के लिए App.js और स्थानीय विकास के लिए उसे रेंडर करने हेतु index.js बनाएँ। हम मान लेते हैं कि React पहले से इंस्टॉल है।

// remote/src/App.js
import React from 'react';

const App = () => {
  return (
    <div style={{ padding: '10px', border: '1px solid blue' }}>
      <h3>Remote App Component</h3>
      <p>Hello from the remote!</p>
    </div>
  );
};

export default App;

// remote/src/index.js (for local dev)
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);

Webpack कॉन्फ़िगरेशन: होस्ट का आधार

अब होस्ट के लिए एक मूल webpack.config.js बनाएँ। यह कॉन्फ़िगरेशन Webpack को बताता है कि बंडल बनाना कहाँ से शुरू करना है, अंतिम बंडल कहाँ आउटपुट करना है और विकास सर्वर कैसे सेट करना है।

// host/webpack.config.js
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  mode: 'development',
  entry: './src/index.js',
  devServer: {
    port: 8080,
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './public/index.html',
    }),
  ],
};

Webpack कॉन्फ़िगरेशन: रिमोट का आधार

होस्ट की तरह रिमोट एप्लिकेशन को भी अपने Webpack कॉन्फ़िगरेशन की आवश्यकता होती है। हम इसका एंट्री-पॉइंट, आउटपुट, विकास सर्वर का पोर्ट और HTML प्लगइन सेट करेंगे।

// remote/webpack.config.js
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  mode: 'development',
  entry: './src/index.js',
  devServer: {
    port: 8081,
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './public/index.html',
    }),
  ],
};

ModuleFederationPlugin

यही हमारे सेटअप का केंद्र है! Webpack का ModuleFederationPlugin एप्लिकेशन को अन्य एप्लिकेशन से कोड गतिशील रूप से लोड करने में सक्षम बनाता है। इससे आप निम्नलिखित तय कर सकते हैं:

name: आपके एप्लिकेशन का विशिष्ट नाम।
remotes: वे रिमोट एप्लिकेशन जिनसे यह एप्लिकेशन मॉड्यूल का उपयोग करता है।
exposes: वे मॉड्यूल जो यह एप्लिकेशन दूसरों को प्रदान करता है।
shared: साझा की जाने वाली सामान्य निर्भरताएँ।

MF के साथ होस्ट कॉन्फ़िगर करना

अब होस्ट के webpack.config.js को ModuleFederationPlugin का उपयोग करने के लिए अपडेट करें। होस्ट अपना name तय करेगा और उन remotes को निर्दिष्ट करेगा जिनका वह उपयोग करना चाहता है।

// host/webpack.config.js (with MF)
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { ModuleFederationPlugin } = require('webpack').container;

module.exports = {
  mode: 'development',
  entry: './src/index.js',
  devServer: { port: 8080 },
  plugins: [
    new ModuleFederationPlugin({
      name: 'host',
      remotes: {
        remoteApp: 'remote@http://localhost:8081/remoteEntry.js',
      },
      shared: ['react', 'react-dom'],
    }),
    new HtmlWebpackPlugin({ template: './public/index.html' }),
  ],
};

त्वरित जाँच: Module Federation

होस्ट एप्लिकेशन के लिए ModuleFederationPlugin कॉन्फ़िगर करते समय, वह किन रिमोट एप्लिकेशन का उपयोग करेगा, यह तय करने के लिए किस प्रॉपर्टी का उपयोग किया जाता है?

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

पुनरावलोकन: प्रोजेक्ट सेटअप पूरा हुआ!

बहुत अच्छा! आपने होस्ट और रिमोट, दोनों एप्लिकेशन के लिए मूल प्रोजेक्ट संरचना सफलतापूर्वक सेट की और Webpack को Module Federation Plugin के साथ कॉन्फ़िगर किया।

हमने npm शुरू किया और Webpack इंस्टॉल किया।
दोनों एप्लिकेशन के लिए मूल Webpack कॉन्फ़िगरेशन किया।
ModuleFederationPlugin को एकीकृत किया, जिसमें होस्ट का name और remotes, तथा रिमोट का name, filename और exposes तय किया।

अब हम सीखेंगे कि इन एप्लिकेशन के बीच घटकों को वास्तव में साझा और उपयोग कैसे किया जाता है!

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

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

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

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

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

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

क्या “प्रोजेक्ट सेटअप और कॉन्फ़िगरेशन” पाठ निःशुल्क है?

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

“प्रोजेक्ट सेटअप और कॉन्फ़िगरेशन” में मैं क्या सीखूँगा?

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

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

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

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

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

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

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

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

प्रोजेक्ट सेटअप और कॉन्फ़िगरेशन
मॉड्यूल और कॉम्पोनेंट साझा करना
सरल फ़ेडरेटेड ऐप बनाना
अपने फ़ेडरेटेड ऐप को स्थानीय रूप से चलाना और डीबग करना

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