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(["route": "/maps"])    .create()
PortalManager.newPortal("shopping")    .setStartDir("web")    .setInitialContext(["route": "/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.