https://github.com/arinzejeffrey-droid/understanding-micro-frontend

A demo project to help me understand how micro-frontends works.
https://github.com/arinzejeffrey-droid/understanding-micro-frontend

express node reactjs webpack

Last synced: 24 days ago
JSON representation

A demo project to help me understand how micro-frontends works.

• Host: GitHub
• URL: https://github.com/arinzejeffrey-droid/understanding-micro-frontend
• Owner: ArinzeJeffrey-droid
• Created: 2024-05-12T23:06:08.000Z (7 months ago)
• Default Branch: main
• Last Pushed: 2024-05-13T12:54:18.000Z (7 months ago)
• Last Synced: 2024-05-14T11:02:43.064Z (7 months ago)
• Topics: express, node, reactjs, webpack
• Language: JavaScript
• Homepage:
• Size: 11.2 MB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Micro Frontends Demo

This is a simple application designed to help me understand how micro frontends work. It demonstrates the usage of `ModuleFederationPlugin` from webpack to export and import components across multiple projects.

## How to run project

**Install Dependencies**: Run the setup script to install npm dependencies for each app:

```sh

script/setup

```

**Manage Processes**: This project utilizes Overmind to manage processes for each app. To start all processes, use:

```sh

overmind start

```

If you need to restart a specific process, open another terminal and use:

```sh

overmind restart 

```

Replace  with the name of the app you want to restart.

For detailed instructions on installing Overmind, refer to the [Overmind installation guide](https://github.com/DarthSim/overmind).

## Urls

| App                 | Url                          |

| ------------------- | ---------------------------- |

| ExpressServer       | http://localhost:5555/movies |

| HomePageApp         | http://localhost:3000        |

| MAIN APP (MovieApp) | http://localhost:9000        |

| ReactComponents     | http://localhost:3002        |

| SeatSelectionApp    | http://localhost:3003        |

## My notes

### Using ModuleFederationPlugin

The core functionality of this demo relies on the `ModuleFederationPlugin` from webpack. This plugin allows me to export components from one project and import them into another seamlessly.

In the `ReactComponents` project webpack config file, I use ModuleFederationPlugin to export components:

```js

new ModuleFederationPlugin({

  name: "components",

  filename: "remoteEntry.js",

  exposes: {

    "./MovieCard": "./src/components/MovieCard/MovieCard.jsx",

    "./BuyButton": "./src/components/Button/BuyButton/BuyButton.jsx",

  },

}),

```

And in the `HomePageApp` project webpack config file, I import these components:

```js

new ModuleFederationPlugin({

  name: "home",

  filename: "remoteEntry.js",

  remotes: {

    components: "components@http://localhost:3002/remoteEntry.js",

  },

});

```

For more detailed information about ModuleFederationPlugin, refer to the [official documentation](https://webpack.js.org/plugins/module-federation-plugin/).

### Importing components

I import components dynamically using React.lazy, which allows for code splitting and lazy loading:

```js

const MovieCard = React.lazy(() => import("components/MovieCard"));

// Usage by wrapping the component with the Suspense wrapper

const renderMovieList = () => {

  let items = movies.map((movie) => {

    return (

      
 movieClicked(movie)} key={movie.name}>

        

      

    );

  });


  return items;

};

return (

  


    

    

      
{renderMovieList()}

    

  

);

```


React.lazy can efficiently load components only when they are needed, improving performance and reducing initial bundle size.