Creating Structural Micro Frontend Using single-spa
I would like to design my frontend as a micro frontend project, and I would like to use single-spa. The problem I have is:
I would like to create an application called MF1 as a based structure, it is a react applicant and would have a header, footer, sidebar, and an empty place for main content.
Now, I would like to render other applications inside MF1's main content.
I am familiar with the single-spa layout engine, but the problem with that is the restriction of using a UI framework inside root config project. For example, the sidebar has a button to open and close and it will be handled in a React application, because of this I could not use the single-spa layout engine to make the structure I am looking for or maybe I do not know how.
How can I implement this scenario? Is single-spa a good choice for reaching this feature?
I would like to have something like the below image. header, sidebar, and footer area in the MF1, and based on which menu item is selected, the related micro frontend project would be rendered in the white area.
I will be grateful for any help.
You can perfectly achieve your goal with single-spa. On top of your description, I'll add that you can:
layout the microfrontends inside the root-config add add css grid layout to have the layout described in your screenshot
for the sidebar toggle, you have two options:
make the grid layout responsive inside the root-config: so that when the sidebar collapses, the content of both the main and header fill grows.
propagate an event inside the sidebar when it toggles and make the main and header microfrontends listen to that even inside their own self to modify their width.
When in doubt, please do join our single-spa slack channel, as they recommend.
- Setting showPrintMargin to false not working in React Ace Editor
- Animate toggle height from 0 to auto or 100%
- Conditional Logpoint in Chrome Devtools
- How can I conditionally render a React component if a sessionStorage variable does not exist in Next.js?
- How to set root directory for resolving absolute paths in esbuild?
- Concatenate two JSON objects
- Photoshop Scripting (JS): Duplicate layer set and subs
- Debugging Electron renderer process with VSCode
- I don't understand this javascript function call and where it would be used
- How to programmatically Download a file from Google Drive, using Javascript and HTML? (NOT Google Drive API)
- React Native const vs let vs var in Functional Components
- How to disable time from now with time picker antd
- Why does this function mutate innerHTML of a div element and extract its first child to parse HTML if you can just use jQuery to do the same?
- How can I pause setInterval() functions?
- How to remove spaces from a string using JavaScript?
- Add CSS3 transition expand/collapse
- Remove content of p tag
- How to detect CSS3 resize events
- How to extend an existing JavaScript array with another array, without creating a new array
- Attaching click event handlers in Astro pages
- var express = require('express'); var app = express(), What is express()?? is it a method or a constructor? Where does it come from
- How to set volume of audio object?
- Is it possible to add a new element to top of Map?
- How do I remove a property from a JavaScript object?
- Can't Add Ajax Pagination in ASP NET CORE
- No extra Boolean cast in JavaScript
- Why we have to add an 'async' declaration word to the javascript function which call a sync javascript function?
- Better way to filter an array of objects with one constant and one always changing value
- Generate A Weighted Random Number
- Code on scroll event is not executing if window is zoomed in/out in chrome