Microfrontends Ecommerce

Objective

Documents what was learned during the first project at the course Microfrontends with React: A Complete Developer's Guide by Stephen Grider at Udemy.

What is a microfrontend?
Build-time vs. run-time integration.
How to build a run-time integration microfrontend architecture with VanillaJS and ReactJS (or any other framerwork/library) modules.
Webpack Module Federation.
- Properties:
  - Name:
    - not necessary on hosts, but add by convention.
    - used to identify remotes, used before '@' at remotes list on host
  - remotes:
    - where the project will check additional codes.
    - if 'import' is not found at node_modules, will be checked inside the rmotes object keys.
  - filename:
    - sets the name of the manifest file, means the file that says what other files need to be loaded.
    - no reason to change the name from 'remoteEntry.js'
  - exposes:
    - aliases filenames
    - which files will be exposed externally, filenames used when imported on host container or other external
Host and Remote applications
Shared Modules
- Sharing dependencies between microfrontends.
- Different versions won't be shared automatically, so each project can use the specific one without any unexpected behaviour.
- Singleton: configuration that defines that only one version of the shared dependencies can be downloaded/used in all of the sub-projects.
```
...
shared: {
  dependency_name: {
    singleton: true
  }
}
...
```