Microfronend example in react.js tutorials in hindi

-

 

Microfrontend Example in React.js - हिंदी में ट्यूटोरियल

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

इस ट्यूटोरियल में हम React.js का उपयोग करके एक सिंपल Microfrontend आर्किटेक्चर बनाएंगे, जहाँ अलग-अलग React ऐप्स को एक मुख्य कंटेनर ऐप में जोड़ा जाएगा।

1. Microfrontend का उद्देश्य और लाभ

  • Scalability: बड़े प्रोजेक्ट्स में फ्रंट-एंड को छोटे-छोटे हिस्सों में बांटना।
  • Independent Development: अलग-अलग टीम्स हर एक माइक्रोफ्रंटेंड को अलग-अलग तरीके से डेवलप कर सकती हैं।
  • Independent Deployment: प्रत्येक माइक्रोफ्रंटेंड को अलग-अलग डिप्लॉय किया जा सकता है।
  • Technology Agnostic: हर माइक्रोफ्रंटेंड में अलग-अलग तकनीक (जैसे React, Angular, Vue, आदि) का उपयोग किया जा सकता है।

2. Microfrontend Architecture

हमारी Microfrontend आर्किटेक्चर तीन मुख्य भागों में बांटी जाएगी:

  1. Main Application (Container): यह मुख्य एप्लिकेशन है जो माइक्रोफ्रंटेंड्स को कंटेन करता है और इन्हें एक साथ जोड़े रखता है।
  2. Microfrontend 1: यह एक स्वतंत्र React एप्लिकेशन है।
  3. Microfrontend 2: यह भी एक अलग React एप्लिकेशन है, जिसे अलग से डिप्लॉय किया जा सकता है।

हम इसे Module Federation तकनीक का उपयोग करके बनाएंगे, जो Webpack 5 में आई एक नई सुविधा है, जिससे विभिन्न ऐप्स को एक-दूसरे के साथ साझा किया जा सकता है।

3. Step-by-Step Microfrontend Example in React

Step 1: Set up the Main Application (Container App)

सबसे पहले, हम मुख्य एप्लिकेशन बनाएंगे जो अन्य माइक्रोफ्रंटेंड्स को कंटेन करेगा। इसके लिए हम create-react-app का उपयोग करेंगे।

bash
npx create-react-app container-app
cd container-app
npm install webpack webpack-cli webpack-dev-server --save-dev

अब, हमें webpack और module federation को सेटअप करना होगा।

webpack.config.js (Container App):

javascript
const ModuleFederationPlugin = require("webpack").container.ModuleFederationPlugin;

module.exports = {
  mode: "development",
  devServer: {
    port: 3000,
  },
  plugins: [
    new ModuleFederationPlugin({
      name: "container",
      remotes: {
        microfrontend1: "microfrontend1@http://localhost:3001/remoteEntry.js",
        microfrontend2: "microfrontend2@http://localhost:3002/remoteEntry.js",
      },
    }),
  ],
};

यहां remotes में हम दो माइक्रोफ्रंटेंड्स (microfrontend1 और microfrontend2) को संदर्भित कर रहे हैं, जिन्हें हम कंटेनर एप्लिकेशन में लोड करेंगे।

Step 2: Create Microfrontend 1

अब, हम माइक्रोफ्रंटेंड 1 बनाएंगे, जो एक React एप्लिकेशन होगा।

bash
npx create-react-app microfrontend1
cd microfrontend1
npm install webpack webpack-cli webpack-dev-server --save-dev

अब, हमें ModuleFederationPlugin का उपयोग करते हुए Webpack सेटअप करना होगा।

webpack.config.js (Microfrontend 1):

javascript
const ModuleFederationPlugin = require("webpack").container.ModuleFederationPlugin;

module.exports = {
  mode: "development",
  devServer: {
    port: 3001,
  },
  plugins: [
    new ModuleFederationPlugin({
      name: "microfrontend1",
      filename: "remoteEntry.js",
      exposes: {
        "./Microfrontend1": "./src/Microfrontend1", // यहाँ हम जो कंपोनेंट एक्सपोज़ करेंगे
      },
    }),
  ],
};

अब, Microfrontend1 नामक एक सिंपल React कंपोनेंट बनाएं।

src/Microfrontend1.js:

javascript
import React from 'react';

const Microfrontend1 = () => {
  return (
    <div>
      <h1>Microfrontend 1</h1>
      <p>Welcome to Microfrontend 1!</p>
    </div>
  );
};

export default Microfrontend1;

अब, App.js में इस कंपोनेंट को डिफाइन करें ताकि माइक्रोफ्रंटेंड 1 सही तरीके से दिख सके।

src/App.js:

javascript
import React from 'react';
import Microfrontend1 from './Microfrontend1';

function App() {
  return (
    <div className="App">
      <Microfrontend1 />
    </div>
  );
}

export default App;

अब, webpack-dev-server को चलाएं:

bash
npm run start

Step 3: Create Microfrontend 2

माइक्रोफ्रंटेंड 2 बनाने के लिए, हम एक और React एप्लिकेशन बनाएंगे।

bash
npx create-react-app microfrontend2
cd microfrontend2
npm install webpack webpack-cli webpack-dev-server --save-dev

Webpack के लिए सेटअप करें:

webpack.config.js (Microfrontend 2):

javascript
const ModuleFederationPlugin = require("webpack").container.ModuleFederationPlugin;

module.exports = {
  mode: "development",
  devServer: {
    port: 3002,
  },
  plugins: [
    new ModuleFederationPlugin({
      name: "microfrontend2",
      filename: "remoteEntry.js",
      exposes: {
        "./Microfrontend2": "./src/Microfrontend2", // यहाँ हम जो कंपोनेंट एक्सपोज़ करेंगे
      },
    }),
  ],
};

अब, Microfrontend2 नामक एक सिंपल React कंपोनेंट बनाएं।

src/Microfrontend2.js:

javascript
import React from 'react';

const Microfrontend2 = () => {
  return (
    <div>
      <h1>Microfrontend 2</h1>
      <p>Welcome to Microfrontend 2!</p>
    </div>
  );
};

export default Microfrontend2;

अब, App.js में इस कंपोनेंट को डिफाइन करें।

src/App.js:

javascript
import React from 'react';
import Microfrontend2 from './Microfrontend2';

function App() {
  return (
    <div className="App">
      <Microfrontend2 />
    </div>
  );
}

export default App;

अब, webpack-dev-server को चलाएं:

bash
npm run start

Step 4: Integrating Microfrontends in Container App

अब, Container App में माइक्रोफ्रंटेंड्स को इंटीग्रेट करने का समय है।

src/App.js (Container App):

javascript
import React, { Suspense, lazy } from 'react';

const Microfrontend1 = lazy(() => import('microfrontend1/Microfrontend1'));
const Microfrontend2 = lazy(() => import('microfrontend2/Microfrontend2'));

function App() {
  return (
    <div className="App">
      <h1>Main Container App</h1>
      <Suspense fallback={<div>Loading...</div>}>
        <Microfrontend1 />
        <Microfrontend2 />
      </Suspense>
    </div>
  );
}

export default App;

हमने lazy और Suspense का उपयोग किया है ताकि माइक्रोफ्रंटेंड्स को लाज़ी लोड किया जा सके।

Step 5: Running the Applications

अब, हमें तीन एप्लिकेशनों को रन करना होगा:

  1. Container App: npm start (Port: 3000)
  2. Microfrontend 1: npm start (Port: 3001)
  3. Microfrontend 2: npm start (Port: 3002)

निष्कर्ष

इस ट्यूटोरियल में हमने देखा कि कैसे React.js में Microfrontends का निर्माण किया जा सकता है। हमनें Webpack और Module Federation Plugin का उपयोग करते हुए माइक्रोफ्रंटेंड्स को एक कंटेनर एप्लिकेशन में जोड़ा। इस आर्किटेक्चर के द्वारा आप अलग-अलग टीम्स के द्वारा विकसित किए गए स्वतंत्र React एप्लिकेशनों को एक साथ जोड़ सकते हैं और बड़ी एप्लिकेशनों को छोटे हिस्सों में विभाजित कर सकते हैं।

Comments

Post a Comment

Popular posts from this blog

PrimeNG tutorial with examples using frequently used classes

-
  PrimeNG Tutorial: Frequently Used Classes and Components PrimeNG is a comprehensive and flexible UI component library for Angular applications. It provides a wide range of ready-to-use components like forms, data tables, dialogs, buttons, and many others, all styled using Material Design principles. In this tutorial, we will explore some of the frequently used components and classes in PrimeNG , along with examples for creating interactive, modern, and responsive UIs. 1. Setting Up PrimeNG Before using PrimeNG components, you need to install PrimeNG in your Angular project. If you haven’t done so, follow these steps: Step 1: Install PrimeNG and PrimeIcons Run the following commands to install PrimeNG and PrimeIcons: bash Copy code npm install primeng npm install primeicons Step 2: Import Required Modules After installation, you need to import the relevant PrimeNG modules in your app.module.ts . Example of importing commonly used modules: typescript Copy code import { NgModule ...
Read more

Docker and Kubernetes Tutorials and QnA

-
 Docker and Kubernetes Tutorials: Detailed Guide Let's dive into detailed tutorials for Docker and Kubernetes, starting with their core concepts and progressing to hands-on examples. These tutorials are designed for both beginners and intermediate learners. Part 1: Docker Tutorial 1. Introduction to Docker Docker is a platform used to develop, ship, and run applications inside containers. Containers are lightweight, portable, and ensure consistent environments across different stages of the application lifecycle. They help solve the "works on my machine" problem. Key Concepts of Docker: Images : A blueprint for containers, containing everything needed to run an application (code, runtime, libraries, etc.). Containers : A runtime instance of an image, running isolated from the host system. Dockerfile : A script with a set of instructions to build Docker images. Docker Hub : A public repository of Docker images. Docker Compose : A tool to define and manage multi-container a...
Read more

Building strong foundational knowledge in frontend development topics

-
 These topics are essential for building strong foundational knowledge, and each comes with a simple solution or code snippet to illustrate the concept. 1. What is the difference between HTML, CSS, and JavaScript? Answer : HTML (Hypertext Markup Language) is used for structuring web content (headings, paragraphs, images, links, etc.). CSS (Cascading Style Sheets) is used for styling the layout, design, and appearance of the web content. JavaScript is used for adding interactivity and dynamic behavior to the website (e.g., form validation, animations, events). html <!-- HTML --> < div class = "box" > </ div > css /* CSS */ .box { width : 100px ; height : 100px ; background-color : blue; } javascript // JavaScript document . querySelector ( '.box' ). addEventListener ( 'click' , function ( ) { alert ( 'Box clicked!' ); }); 2. What are semantic HTML elements and why are they important? Answer : Semantic HTML elements cl...
Read more