Stitch individual Aurelia applications

Question

Is it possible to have a general aurelia shell application that can load and move between separately hosted child applications?

So far, I only saw this question, answering the fact that they have several divs with the aurelia-app attribute. But this assumes that each application will be served from the same server instance and place files / routes there.

What I get is a way to have a separate SPA, each of which can be hosted independently on different machines (virtual or other), which can act as stand-alone applications or be embedded in the parent SPA, which can move between these SPAs, and perhaps the coordinates of the data transfer between them.

Is this possible in Aurelia or any other SPA system?

Answer 1

You can use the setRoot () method of the Aurelia object to change what is loaded for the one specified in index.html. I use this in my application to switch between full-screen login mode and application mode with full navigation bar.

private aurelia: Aurelia;

showLogin() : Promise<any> {
    return this.setRoot(PLATFORM.moduleName('Login', 'login'));
}

showApplication() : Promise<any>  {
    return this.setRoot(PLATFORM.moduleName('Client', 'application'));
}

setRoot(root: string) {
    // NOTE: Aurelia will call router.deactivate() & router.reset() if there is an existing root
    // this.router.navigate('/', { replace: true, trigger: false });
    return this.aurelia.setRoot(root);
}