microfrontends | nullcreate portal-like application | Frontend Framework library

I am trying to set up the new @faker-js/faker library. So far, I did this:

I´m decomposing an Angular web in several microfrontends. One of these microfrontend handles the shopping cart, and it has a service to store products that have been added. My shell microfrontend needs to use that service to show in a icon how many items are in the car, add new items, etc.

Can I use a service in a microfrontend that is stored in a different microfrontend?

I´m using this tutorial, but it only explains how to route a page that are in another microfrontend.

Thanks.

I'm trying to find any examples I can that outline how to take an existing React application and gradually start migrating towards Next.js. I've read all the Next.js documentation I can regarding the incremental adoption strategies (e.g. subpaths, rewrites, microfrontends, proxies), but have yet to find a solid example showcasing what this actually looks like in a real-life "I've already got a massive React codebase" scenario.

The desired outcome is to corner off a subpath of my existing application, say /workshop, and have /workshop be the entrypoint to the Next.js application. I would then hope to be able to seamlessly navigate between the two applications, although the mechanics of that seem cloudy once you've entered the Next.js realm and need to navigate back out of the proxy.

For added context, both the React and Next.js applications will be served on Netlify. I've poured through their documentation, as well as Vercel's, looking for a working example but am still out of luck. Any knowledge or guidance on how best to approach this type of problem is greatly appreciated!

I'm planning to use single-SPA framework with angular to build a microfrontend architecture to a website. The website already exists in a legacy monolith way and we are planning to strangle it to microfrontend architecture to have independent teams working and doing independent deploys.

My plan is to use the actual monolith as the root for single-SPA and strangle the microfrontends one by one, coexisting with the actual monolith. I did some tests and the coexistence is possible but single-SPA always render the applications at the end of my page.

The question is if it's possible to render the application with single-SPA into a specific location on my HTML as inside a specific div element, for example. It's a really simple test i've been doing by now and this is how I'm registering the angular applications on single-SPA. By doing this it always render the application at the end of my body element.

I'm trying to figured out if it's possible share LESS variables among different React projects. I'm using Single-SPA to build a micro-frontends architecture. My micro-frontends are using some shared components like the react-microfrontend example does with react-mf/styleguide. Beside that, I also need to share some LESS variables (e.g. colors or typography) so I can just define them once into my styleguide project alike and then reference them in every micro-frontends I will define. Is that possible ? If yes, can you suggest to me a way to do that ? I guess the solution is to use webpack but I can't find the right way to do it.

we're creating a new architecture for our microfrontends, and we'd like to avoid the use of another framework to orquestrate it, like single-spa. Our company currently use IIS for other products, and we need to keep it that way.

So, in order to have multiple SPAs responding to the same address, we simply depose our built SPAs in IIS's content directory, like this:

IIS root folder:

• spa1
• spa2

I can access myhost/spa1 and myhost/spa2 normally, and navigate thought their own internal routes (we're using Angular).

The problem is, we want to have URLs without #, and than we need to tell IIS to redirect whatever is a sub-route, to it's SPA main route.

We have something in place, it works for myhost/spa1, myhost/spa1/detail, but does not work for myhost/spa1/detail/1. Let's say, the third level.

Could someone help me with this?

I've created a few apps that follow the same pattern as the react-microfrontend projects listed on the Single-spa examples page. However, these examples are not using TypeScript.

I am receiving a TS error when App2 tries to import a function that exists in App1, because App2 is unable to find the typings for the App1 object. And this makes sense to me, since the importmap.json that is referenced in the index.html file of the root-config project only has a URL listed for the .js file of each microfrontend. I really don't want to add @ts-ignore statements everywhere, and I also don't want to do cross-app communication without being type safe.

An example of what I'm referring to:

This file in the Planets app references the Button component from the Styleguide app. I am unable to build this unless I place a @ts-ignore on the line before the import statement, because my Planets app cannot find the type declarations for Styleguide.

I am very new to import maps and SystemJS in general, so if anyone could point me in the right direction, I'd appreciate it. I've actually gone through the trouble of building my Styleguide as a regular npm library and just including it as a dependency in the Planets package.json file... which kind of defeats the whole purpose of using Single-spa in the first place.

importmap.json

I'm currently working on internationalizing a system built with single-spa (microfrontends) with applications written on Angular and React. I started using i18next and it's going pretty well, however, I've found a problem when trying to share the i18next dependency between all the applications.

When two applications are mounted simultaneously on the view the one who loads last overrides the i18next instance and thus the translations for the first one are never found as they were not loaded on the latter.

Thanks in advance!

We want develop few different services (React Apps) with the same users database and Rest API. Some users might have access to APP 1, some for APP 2, some for both depends on their role.

• We decided to go on multiple subdomain apps method.

• We want SSO so only one page/app to authenticate all the apps and not a local login component for each app. using JWT mechanism in our backend.

1. Lets say i go to the login app and log in, getting accestoken from the backend. How do i deliver the token to app1.company.com? should react login APP redirect with token in url param?

   • local storage is subdomain scoped.

   • iframe has problems with Safari.

   • I don't wanna save jwt in cookies for now because the flask REST can serve non-browser retailed clients.

1. Lets say the user want to go to app2. if we aren't able to share the token from app1 with iframes or any other method, then this app should be redirected to login and make the process again as app1, which is fine for us. But is this really the way? if token is invalid anymore and we get Error from backend, should we redirect to the login app in the other subdomain (embed the url we wanna go back to after login success)?

   • Can i just use 3rd party Open id connect service?

   • Should i consider microfrontends approcah to make the all the "apps" on the same domain?

   • How "Attlassian" as an example handles this process?