Skip to main content

Bootstrapping of Dynamic App

Bootstrap mechanism makes it easy to integrate Dynamic App into the project.

The only thing that project need to do (in most cases) is to overwrite the boot.js file inside the compoents folder.

Structure of boot.js file​

Example of boot.js for SAMO DEMO project:

// boot.js
var bootHelper = window.samo.bootHelper;
var opts = window.samo.dynamicBoot({
  clientId: "demo-dynamic-client",
  defaultPart: "cockpit",
  defaultPage: "dashboard",
  defaultLanguage: "en",

  extraResources: [
    bootHelper.prepareScriptResource("resources/themes/samo.js")
  ]
});

This should be really the only thing that you need to do to bootstrap the Danymic App.

Available options​

All options that are accessible for application bootstrap.

Minimal​

gatewayUrl string required Gateway URL is used for constructing other URLs and it serves as base URL for Dynamic App to know where to ask for resources, metadata, ...

serveBaseUrl string required URL from where the Dynamic App components are served.

clientId string required The GTW client ID.

extraResources array Array of objects which define extra resources which should be loaded before application is bootstrapped.

E.g. loading theme resource:

extraResources: [
    {
        type: "link",
        href: "resources/nergie/samo/themes/samo.html"
    }
]

The resources are loaded after the webcomponents so it should be safe to use custom elements in these resources.

applicationType string Required option indicates which application type will be bootstrapped. Enum:

  • dynamic-app (default)
  • dynamic-portlet

Specific for dynamic-app​

defaultPart string Default part to be loadded. This option is related only when applicationType is set to dynamic-app.

defaultPage string Default pge to be loadded. This option is related only when applicationType is set to dynamic-app.

disableSessionWatcher string Dynamic app has implicit session warning in case of session is about to expire. This behavior can be disabled by setting disableSessionWatcher to false. This option is related only when applicationType is set to dynamic-app.

Specific for dynamic-portlet​

part string Metadata application part. This option is related only when applicationType is set to dynamic-portlet.

portlet string Portlet ID. This option is related only when applicationType is set to dynamic-portlet.

Common options​

loadingImage string Resource for loading logo/image.

defaultLanguage string Default language for application.

resize object Definition of resize function. This is handy when placing portlet into page content so we need to dinamically resize the portlet according to other elements on page.

resize: {
    minHeight: 400,
    excludeExtraHeight: 30,
    excludeElementsHeight: [
        "header<small>[role=banner]</small>",
        "footer.wpthemeFooter"
    ]
}

It takes the whole height of window and disctracts heights of elements excludeElementsHeight from it. You can also exclude extra height with excludeExtraHeight property or specify minimum height with minHeight.

navigation object Navigation objest allows to map Dynamic App navigate events to URLs.

navigation: {
    routes: {
        "part/page": {
            url: "https://lighthouse.samo-asseco.com/"
        }
    }
}

This is handy when using portlet. e.g.: redirect to portal's home page after succesfull form submit.

showNotifications boolean Portlet does not show any notification by default. Notifications must be explicitly enabled with showNotifications=true. This option is related only when applicationType is set to dynamic-portlet.

targetElement string Specify element in which the application should be bootstrapped. By default the application is bootstrapped into the body element.

messageTargetElement string Specify element in which the application notification messages should be bootstrapped. By default they are bootstrapped into the body element.

Offline - experimental​

disableServiceWorker boolean Options to disable service worked registration.

offlineEnabled boolean Enables offline capabilities for caching resources.

runtimeCacheStrategy string Definition of cache strategy. Enum:

  • networkFirst
  • networkOnly
  • cacheFirst

nGinx configuration

Dynamic App is almost in all cases served via GTW in the application and client context e.g.: /a/demo/c/demo-dynamic-client/ Accessing the dynamic app using directly GTW and this context should not make any troubles.

But projects often need to add proxy server (mostly nGinx) in fron the GTW so that only some subset of endpoints are accesible from internet. In this case the application might be accessible on root context / and the the proxy server proxies the requests to the proper places. Multiple GTW endpoint has to be accessed on the root context so we cannot just proxy everything to the client components endpoint /a/demo/c/demo-dynamic-client/.

One solution would be to fix the paths in the index.html file using filter:

  location / {
    proxy_pass http://localhost:10080/a/demo/c/demo-dynamic-client/;
  }

  location /a/ {
    proxy_pass http://localhost:10080/a/demo/;
    proxy_cookie_path /a/demo /;
  }

Customers needs and infrastructure might be very complex so the nGinx configuration is very individual. Contact SAMO Support in case you need help configuring it.