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

iOS

Setting up multiple Portals is as simple as initializing them. Each Portal will function independently of one another and will be a separate instance of the SPA.

let mapsPortal = Portal(
    name: "maps",
    startDir: "web",
    initialContext: ["route": "/maps"]
)

let shoppingPortal = Portal(
    name: "shopping",
    startDir: "web",
    initialContext: ["route": "/shopping"]
)

If you find yourself needing these Portals in multiple locations in your application, you may find it convenient to extend Portal:

Portal+SPAPortals.swift
extension Portal {
    static let maps = Portal(
        name: "maps",
        startDir: "web",
        initialContext: ["route": "/maps"]
    )
    
    static let shopping = Portal(
        name: "shopping",
        startDir: "web",
        initialContext: ["route": "/shopping"]
    )
}

Then you can use them throughout your application:

PortalUIView(portal: .maps)
PortalUIView(portal: .shopping)

Android

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.