Skip to main content

Multiple Portals and Single Page Applications

In some cases, it break down a large Single Page Application (SPA) into multiple Portals to create a better User Experience. The below example is similar to the Multi Portals with Multiple Web Applications example, but it is a SPA rather than multiple applications.

Declaring Multiple Portals​

Setting up multiple Portals is as easy as declaring another Portal in the PortalManager. Each Portal will function independently of one another and will be a separate instance of the SPA.

PortalManager.newPortal("maps")
    .setStartDir("web")
    .setInitialContext(mapOf("route" to "/maps"))
    .create()

PortalManager.newPortal("shopping")
    .setStartDir("web")
    .setInitialContext(mapOf("route" to "/shopping"))
    .create()

The "Maps & Geolocation" Portal will be an instance of the SPA in the web folder in the Assets directory with an "initialContext" of the following.

{
  "route": "/map"
}

Similarly, the "Shopping & Checkout" Portal will be a separate instance of the SPA in the web folder in the Assets directory with an "initialContext" of the following.

{
  "route": "/shopping"
}

Injecting the Initial Context Into the Web Application​

With this initialContext value set, you can use this to properly navigate to the correct route within your Portal. The Portals E-commerce example uses this method. You can see how we inject the context here on Github using the Portal.getInitialContext() function.

Project Structure​

In your project, you'll need to a single folder in your Assets directory that contains the built output for your SPA. For more information on how to setup web bundles in your native project, see our how-to guide.

Contents