Choose where to render application on root HTML with Single-SPA

0 votes

To create a microfrontend architecture for a website, I intend to combine Angular with the single-SPA framework. We intend to strangle the website's existing old monolithic design and replace it with a microfrontend architecture that will allow independent teams to work and perform autonomous deploys.

My strategy is to coexist with the actual monolith while using it as the root for single-SPA and strangling the microfrontends one at a time. The coexistence is conceivable, according to my experiments, but single-SPA always renders the applications at the bottom of my page.

The query is whether it is possible to render the application using single-SPA into a certain spot on my HTML, such as inside a particular div element, for example. I've been performing a fairly straightforward test, and this is how I register Angular applications on single-SPA. By doing this, the application is always rendered at the conclusion of my body element.

  <script>
            System.import('single-spa').then(function (singleSpa) {

                singleSpa.registerApplication(
                    'dashboard',
                    function () {
                        return System.import('dashboard');
                    },
                    function (location) {
                        return location.pathname.startsWith('/dashboard');
                    }
                );

                singleSpa.start();
            })
        </script>
Jul 26, 2022 in HTML by Tejashwini
• 3,820 points

edited 4 days ago 6 views

No answer to this question. Be the first to respond.

Your answer

Your name to display (optional):
Privacy: Your email address will only be used for sending these notifications.
webinar REGISTER FOR FREE WEBINAR X
REGISTER NOW
webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP