installation.md

SCION Microfrontend Platform	Projects Overview	Changelog	Contributing	Sponsoring

SCION Microfrontend Platform > Installation

This short manual helps to install the SCION Microfrontend Platform and describes how to start the platform. For more detailed instructions, please refer to the Developer Guide.

1. Install SCION Microfrontend Platform using the NPM command-line tool

   npm install @scion/microfrontend-platform @scion/toolkit rxjs@^7.5.0 --save

   SCION Microfrontend Platform requires some tools of the module @scion/toolkit. By using the above command, those are installed as well.

2. Start the platform

   The platform is started differently in the host application and the micro applications to be integrated.

   Start the platform in the host application

   
   

   The host application provides the top-level integration container for microfrontends. Typically, it is the web app which the user loads into the browser that provides the main application shell, defining areas to embed microfrontends.

   The host application starts the platform by invoking the method MicrofrontendPlatformHost.start and passing a config with the web applications to register as micro applications. Registered micro applications can interact with the platform and other micro applications.

   await MicrofrontendPlatformHost.start({
     applications: [
       {symbolicName: 'products-app', manifestUrl: 'http://localhost:4201/manifest.json'},
       {symbolicName: 'customers-app', manifestUrl: 'http://localhost:4202/manifest.json'},
     ],
   });

   For each micro application to register, you must provide an application config with the application's symbolic name and the URL to its manifest. Symbolic names must be unique and are used by the micro applications to connect to the platform host. The manifest is a JSON file that contains information about the micro application.

   As with micro applications, the host can provide a manifest to contribute behavior, as following:

   await MicrofrontendPlatformHost.start({
     host: {
       manifest: {
         name: 'Host Application',
         capabilities: [
           // capabilities of the host application
         ],
         intentions: [
           // intentions of the host application
         ],
       }
     },
     applications: [
       {symbolicName: 'products-app', manifestUrl: 'http://localhost:4201/manifest.json'},
       {symbolicName: 'customers-app', manifestUrl: 'http://localhost:4202/manifest.json'},
     ],
   });

   The method for starting the platform host returns a Promise that resolves once platform startup completed. You should wait for the Promise to resolve before interacting with the platform.

   Connect to the platform host in a micro application

   
   

   For a micro application to connect to the platform host, it needs to provide a manifest file and be registered in the host application.

   Create the manifest file, for example, manifest.json. The manifest declares at minimum the name of the application.

   {
     "name": "Products Application"
   }

   A micro application connects to the platform host by invoking the method MicrofrontendPlatformClient.connect and passing its identity as argument. The host checks whether the connecting micro application is qualified to connect, i.e., is registered in the host application under that origin; otherwise, the host will reject the connection attempt.

   await MicrofrontendPlatformClient.connect('products-app');

   As the symbolic name, you must pass the exact same name under which you registered the micro application in the host application.

   The method for connecting to the platform host returns a Promise that resolves when connected to the platform host. You should wait for the Promise to resolve before interacting with the platform.

   ---

   For Angular applications, we recommend starting the platform in an app initializer and synchronizing the message client with the Angular zone. For more detailed information on integrating the SCION Microfrontend Platform into an Angular application, please refer to the Angular Integration Guide.