I have a React application that is quite mature which has been developed using React version 16.14.0. Recently, there has come a need to Plugin some of the MFEs developed using Single SPA to this application. As I have tried out converting the current application to Single SPA seems to be quite far fetched given the breaking changes that the application has to go through. Therefore, I would like to know whether it is possible to mount those MFEs as DOM elements into my current application and interact them as React components. I would like to know the feasibility of such approach and any suggestions are appreciated.
Mount a Single SPA MFE to DOM of a NON Single SPA application
107 Views Asked by KasunKP At
1
There are 1 best solutions below
Related Questions in REACTJS
- setting OpenGL version in objective-C
- How to run OpenGL version 3.3 (with Intel HD 4000) on Ubuntu 15.04
- Can linear filtering be used for an FBO blit of an MSAA texture to non-MSAA texture?
- How to get shader version from QOpenGLShader?
- "Capture GPU Frame" in XCode -- iOS only?
- Difference between glewGetString(GLEW_VERSION) and glewIsSupported
- Tesselation result flickering - OpenGL/GLSL
- Water rendering in opengl
- Texture mapping consuming physical memory
- Rotating a Cube using Quaternions in PyOpenGL
Related Questions in SINGLE-SPA
- setting OpenGL version in objective-C
- How to run OpenGL version 3.3 (with Intel HD 4000) on Ubuntu 15.04
- Can linear filtering be used for an FBO blit of an MSAA texture to non-MSAA texture?
- How to get shader version from QOpenGLShader?
- "Capture GPU Frame" in XCode -- iOS only?
- Difference between glewGetString(GLEW_VERSION) and glewIsSupported
- Tesselation result flickering - OpenGL/GLSL
- Water rendering in opengl
- Texture mapping consuming physical memory
- Rotating a Cube using Quaternions in PyOpenGL
Related Questions in SINGLE-SPA-REACT
- setting OpenGL version in objective-C
- How to run OpenGL version 3.3 (with Intel HD 4000) on Ubuntu 15.04
- Can linear filtering be used for an FBO blit of an MSAA texture to non-MSAA texture?
- How to get shader version from QOpenGLShader?
- "Capture GPU Frame" in XCode -- iOS only?
- Difference between glewGetString(GLEW_VERSION) and glewIsSupported
- Tesselation result flickering - OpenGL/GLSL
- Water rendering in opengl
- Texture mapping consuming physical memory
- Rotating a Cube using Quaternions in PyOpenGL
Trending Questions
- UIImageView Frame Doesn't Reflect Constraints
- Is it possible to use adb commands to click on a view by finding its ID?
- How to create a new web character symbol recognizable by html/javascript?
- Why isn't my CSS3 animation smooth in Google Chrome (but very smooth on other browsers)?
- Heap Gives Page Fault
- Connect ffmpeg to Visual Studio 2008
- Both Object- and ValueAnimator jumps when Duration is set above API LvL 24
- How to avoid default initialization of objects in std::vector?
- second argument of the command line arguments in a format other than char** argv or char* argv[]
- How to improve efficiency of algorithm which generates next lexicographic permutation?
- Navigating to the another actvity app getting crash in android
- How to read the particular message format in android and store in sqlite database?
- Resetting inventory status after order is cancelled
- Efficiently compute powers of X in SSE/AVX
- Insert into an external database using ajax and php : POST 500 (Internal Server Error)
Popular # Hahtags
Popular Questions
- How do I undo the most recent local commits in Git?
- How can I remove a specific item from an array in JavaScript?
- How do I delete a Git branch locally and remotely?
- Find all files containing a specific text (string) on Linux?
- How do I revert a Git repository to a previous commit?
- How do I create an HTML button that acts like a link?
- How do I check out a remote Git branch?
- How do I force "git pull" to overwrite local files?
- How do I list all files of a directory?
- How to check whether a string contains a substring in JavaScript?
- How do I redirect to another webpage?
- How can I iterate over rows in a Pandas DataFrame?
- How do I convert a String to an int in Java?
- Does Python have a string 'contains' substring method?
- How do I check if a string contains a specific word?
Yes, strictly speaking it is possible to mount MFE's in your existing project. The single-spa team will tell you to create a root config project, then mount your current application as MFE, and in turn, make your MFE mount the others.
While perfectly OK route, I dislike it because it is not as simple. Furthermore, root config projects use SystemJS modules and not native ES Modules. If you want ES modules, you'll have to reconfigure.
So, for the record: Seriously consider going the path recommended.
My Answer
Now, personally speaking, I prefer to do exactly what you say you want to do: Just mount stuff in my existing project.
To do this, in a nutshell:
registerApplication()
andstart()
in your current project.import()
function according to the type of module in use (System.import()
for SystemJS modules, orimport()
for native ES modules).<div>
elements, most of the time) in the places where the MFE's will be mounted. They require theid
attribute set tosingle-spa-application:<mfe Name>
, where<mfe Name>
is the name given to the MFE in the call toregisterApplication()
.Optionally, you could assign bare specifiers (or aliases) to the URL's of the MFE's and also include an import map in your current application's index page. This is another conversation, so I'll just stop here.