List of the issues - Githubissues

Description

I suggest keeping the conversation on technical part here to be able to format the messages better and reference them easier. I explain everything here, then we can create a task for each or open PR for each part we can take over.

Status on the previous items mentioned on LinkedIn

So, here is an update on those those 5 items I mentioned last time:

I didn't use react-app-rewired and I just created a fresh project via ReactCLI and it is working. Not sure exactly for which customization it is recommended to use it? (I didn't use it because I don't want to lose the possibility of the upgrades from React in the future. Correct me if I am wrong)

It was a question that looks ok-ish and apparently we don't necessarily need to install the react-app-rewired dependency.

If you check out those three repos and run them locally you see they're nicely working, except for the time you go from MicroFrontend React to Vue and vice versa. If you look at the console you see it throws an error and breaks the app and I don't know why. (this is the most important issue)

It's fixed on this commit.

I see when we are on development mode on the container, we are missing the hot reload feature. I can understand the reason. But any workaround on this by any chance?

The hot reload of the MFs "inside" the container is not working (not a big deal. But it'll be nice if we can find a way to have this feature on the container level.) What I mean by that, in case you are working on one MF and you are coding in there, but you wanna test it the integrated version with the container, then you don't need to reload the page to see your changes. (if it's still not clear, run the container, vue and react app. Open the container on your browser, go to the React MF and change something [add a dummy text or change the bg color] save it and go to the browser. You'll see the change is not reflected automatically until you refresh the page). But as I said this is not very major even if we couldn't find a solution to it.

Vue is acting very weird. If you look at the line #19 to #21 here: https://github.com/keyhangholami/micro-frontend-vue/blob/master/src/main.js#L19 you see I had to hack it around because without these lines, as soon as the app gets mounted to my container (#VueMFApp-container in this case) Vue replaces it with #app :|

This issue refers to this part of the Vue doc

I think since the container is in React and the DOM manipulation from here to here is done by the Vue app and it's changing the DOM from outside, and it is a bad practice when it comes to React applications. IMO, we should change the Microfrontend.js in a way that based on the type of the app, it either returns:

<main id={`${name}-container`} />

For react apps

<main id={`${name}-container`}>

  <div id="app"/>

</main>

for Vue apps

Remaining Issues

In addition to the unsolved items above, there are a couple of problems that I couldn't deal with so far:

Dependency management. As many MF we add to our project, the payload size increases significantly and it's a huge downside. Imagine we have a project including 3 MFs. Each is developed by React. Then in each we also used some common libraries like Lodash. Whenever the user tries to access to a module or page that is a MF on background, then he needs to download the bundle for that particular MF. Then in total he will be forced to download the react, react-dom, react-dom-router, lodash, etc. 3 times. And it's not nice. I know in the main article that you referred to this approach was suggested but I think it's again a bottleneck and we can not update the MF dependencies independently (because they all depend on the main version that is defined in there). In the Frameworks like SingleSPA, they offer an option like this: You can load the common dependencies in the container application. In order to do that we have to:

Externalize the dependency in the webpack configuration of the microfrontend, so that it’s not included in the bundle of the application.
In the container application, add the dependency (Vue, in this case) to the import-maps:

They've also thought about technology updates. Meaning, you can update the dependencies to whatever version you want and then in the container specify for which MF use which version. Something like this:

Caching the script is not working for the Vue. As I explained on LinkedIn, when I change this if (key === 'main.js') to this if (key === 'main.js' || key === '/app.js') it stops working after switching from one MF to another. Therefore it always downloads the scripts and append them to the head and the problem is in asset-manifest config and chunks. If we could set it up to generate an asset-manifest exactly same as the one React generates, then we could tackle this issue as well. Major issue
The asset-manifest.json: 3.1. I couldn't manage to make the output look like what create-react-app generates. For building the images, the shape of the final object (if you compare the asset-manifest of Vue with React, you see the categorisation is different and for that I had to update the code on Microfrontend.js. If we can config it properly here then we don't need to add extra code to Microfrontend.js file only for Vue cases. 3.2. I couldn't generate the assets' links. You said that you've already fixed it by hardcoding it. But instead of hardcoding we can move the logo to the public folder and use the following code in Home.js
```
<template>
<div class="home">
<img
  alt="Vue logo"
  :src="logoSrc"
/>
<HelloWorld msg="Welcome to Your Vue.js App" />
</div>
</template>
```


But in this regard, I wish we could set it up in a way that we just put all the images in the Public folder and then use relative path in our code. Then while complication it would automatically add the host. By doing so, we didn't need to repeat this `process.env.VUE_APP_CONTENT_HOST` wherever we wanna reference to an image.

keyhangholami / micro-frontend-container

List of the issues #2

Description

Status on the previous items mentioned on LinkedIn

Remaining Issues