Hi my fellow developers,
The Entando Standard Banking Demo provides a set of microservices, micro frontends and CMS components to demonstrate how you can leverage the platform to develop, deploy and make your applications available for your users.
This series gives you an overview of what you can find in the Standard Banking Demo including microservices and micro frontends generated by the Entando Component Generator, CMS components, and Entando global components you need to make this work perfectly.
The Standard Banking Demo application uses banking and insurance terms to create a professional rendering of an Entando application. Please note, this application does not attempt to answer a real business use case and it’s not provided to be used as-is in production.
As with most standard Entando applications that are packaged as bundles, the Standard Banking Demo Application uses different Git repositories.
A central repository, the source repository, contains multiple child source code projects.
Four bundle repositories are artifact repositories tagged by versions and used to install and deploy the compiled components via the Entando Component Repository.
The repositories for the Standard Banking Demo can be found under the Entando Samples GitHub organization. This is the project source repository
These are the bundle artifact repositories:
If you want to learn more about the bundles, please check out our bundle series.
If you want to test the Standard Demo you can follow the dedicated tutorial to deploy and install the bundle. If you don’t have a running Entando instance follow the Getting Started guide first and then move on to the Standard Banking Demo bundle tutorial
The dashboard page is the best example we can take from the Standard Banking Demo to understand how it’s built: several micro frontends gathered under the same page to serve a business purpose.
Micro frontends present in this page are React or Angular applications using custom elements wrapped as web components and using REST APIs to reach the backend APIs through HTTP calls.
The second image presents the different micro frontends you can find on this page. In blue those developed with React and in red with Angular.
The page designer in the Entando App Builder allows you to compose pages with components such as micro frontends. Pages are available under the Pages → Management menu and you can design it by clicking on the design entry in the page kebab menu. Then you can drag and drop components to compose your page.
This tutorial can help you understand how to create pages in the App Builder.
The numbers added here help you to identify the different micro frontends from the design step to the final rendering.
You can also find the descriptor of this page, included in the bundle, to install and configure it. The technical widget names, aka “code” in the descriptor, help you to understand the link between the descriptor widgets entry and what you can see on the page designer.
code: dashboard parentCode: homepagesd titles: en: My dashboard it: La mia Dashboard pageModel: dashboard ownerGroup: free joinGroups:  displayedInMenu: true seo: false charset: utf-8 status: published widgets: - code: Brand-Logo config: null pos: 0 - code: Login_buttons config: null pos: 2 - code: sd_seeds_card config: cardname: checking pos: 4 - code: sd_seeds_card_ng config: cardname: savings pos: 5 - code: sd_seeds_card config: cardname: creditcard pos: 6 - code: sd_alert_bar_icon config: icon: managealerts title: Alerts pos: 7 - code: sd_alert_bar_icon config: icon: viewstatements title: View Statements pos: 11 - code: sd_seeds_card_transaction_table config: null pos: 13
The backend banking application consumed by these micro frontends is running inside a pod on the Kubernetes cluster. You can use the following command to display all the pods and check the banking app:
ent kubectl get pods
The Standard Banking Demo application contains more microservices and micro frontends than the example presented above.
Here is a component map to understand what you can find in the Standard Banking Demo.
Here is a quick schema of what you can find:
This article is only an appetizer regarding all the content you can find in the Standard Banking Demo. The next articles will dive more deeply into the code and the architecture and the next one will focus on the microservices and micro frontends.