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 PortalsSetting 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.
- Swift
- Kotlin
- Java
PortalManager.newPortal("maps") .setStartDir("web") .setInitialContext(["route": "/maps"]) .create()
PortalManager.newPortal("shopping") .setStartDir("web") .setInitialContext(["route": "/shopping"]) .create()
PortalManager.newPortal("maps") .setStartDir("web") .setInitialContext(mapOf("route" to "/maps")) .create()
PortalManager.newPortal("shopping") .setStartDir("web") .setInitialContext(mapOf("route" to "/shopping")) .create()
PortalManager.newPortal("maps") .setStartDir("web") .setInitialContext(Map.of("route", "/maps")) .create();
PortalManager.newPortal("shopping") .setStartDir("web") .setInitialContext(Map.of("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 ApplicationWith 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 StructureIn 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.