micro-frontend | 微前端框架 之 single-spa 从入门到精通 | Single Page Application library

I'm building an app with micro-frontends using webpack 5's module federation plugin. Everything was fine until I started adding react hooks into my remote app. At that point I received errors about "invalid usage of hooks", i.e. I discovered I had TWO versions of react loaded, one from the remote and one from the app consuming the remote.

That problem was solved by adding a shared key to the ModuleFederationPlugin section of my webpack config that marked React as a singleton. Now everything compiles and seems to run just fine.

However, the webpack compiler is throwing some annoying warnings at me now. Its saying:

I've been creating a micro-frontend project and the glue (nginx) isn't working as expected.

My projects are structured as such:

Given the growing size of frontend code, the concept of micro-frontend and module federation provided by Webpack 5 is a possible solution. However, considering the possibility that you are integrating code from other teams / 3rd parties, the foreign code could potentially try to access information it's not meant to by simply accessing the window object and iterating through its children.

This doesn't have to be critical information like passwords and credit cards, which are often isolated using an iframe. Less sensitive information like user emails, or tracking data could be collected and misused.

In this case, is there any technical set up that doesn't involve iframes that could limit the access scope of scripts? Is this something that could technically be implemented inside a WebAssembly program?

Edit: Yes, the conservative rule is to simply not run untrusted code. The question posed however is if it's technically possible to sandbox frontend code without using iframe to limit its access to information.

I'm using Angular with Webpack 5 Module Federation for micro-frontends. I have 2 apps (let's call them app1 and app2) and my main app, app1, is federating components of app2.

In app2, my exposed components are exported by my main module, so when I try to federate some component, I can get it from the export section of my module. Everything works fine in dev mode, I can get my exposed module, retrieve my exported components and then use the component factory resolver to create it where I want in app1.

But when I build in production (I used ng serve --prod to reproduce the prod environment and test it) my exported components are gone but not the imports and providers. This is the module I get:

I am trying to build a simple micro-frontend example using Vue3 and Module Federation but I have a collision problem.

I have the code here: https://github.com/ghalex/mf-example

There are only two mf:

• container (Vue3)
• auth (Vue3)

The problem I have is that when I import the App.vue component:

I'm trying to write unit tests for a react spa web application that uses micro-frontend architecture. My first step is to write unit tests for the application container.

The application container react component uses a react-router containing a switch with subsequent routes to render the components in the main content area.

Each application is mounted to the application container using JavaScript runtime integration.

I'm using React-Testing-Library and Jest as part of my testing toolset.

I've searched high and low across the Internet and haven't found any useful articles on the issues I'm having. Most of them show a demo of testing a web application that doesn't relate to my scenario.

I have 3 problems that I would like some guidance on.

1. Since Micro Frontends are composed of multiple layers of components chained together with authentication and other business logic. Should I be testing the "page components" only? Or should I be testing the entire application container starting from the App component? If neither is true, how should I be testing this application?

2. I tried to test on the page component level to avoid authentication issues and for simplicity sake, but the component contains a component from React Router library, and Jest is complaining that I should not be using component that isn't enclosed within a component. However, the component is present at the parent component level when executed in runtime. How can I tell Jest to "ignore" this problem?

   I could not find a configuration that allows me to ignore this error.

3. Due to issue #2, I tried to write unit tests by rendering the component, but this component is passed into a Higher Order Component that performs authentication validation. How can I focus on testing the end result instead of the functionality of the authentication HOC just so I can get the component to render and for my tests to execute?

The question:

How (is it possible) to configure webpack (with single-spa), to take make some packages (projects) under a scope (@orginazation) externals and other internals (not external) ?

Project information:

We are building a single-spa application using webpack an uses Github npm registrer (and github actions). All the micro front-ends are projects in Github, and some of them are util/helper/provider projects, that is compiled as externals with webpack.

But some of them are meant to be compiled with the micro-frontend (must not be external)

It seems that when webpack sees one of the project under the organization scope as external, it set all package under that scope to external!

As we can see from the log the "CompilingTool" will also be compiled as external, event thought it should not.

The packages are set in the files as:

Imagine you are developing a big-scale nuxt app that has 100 routes. what is the best solution for managing routes (not micro-frontend) in this app?

The stack is way too complicated to recreate it, so forgive me in advance and ask me for further information.

The Angular app has the following structure: