How to integrate Angular business applications in eXo Platform

eXo Platform Blog

Frequently, we develop business web applications with Angular framework.

With just a few steps, these applications can be migrated easily to get them integrated as eXo applications.

That way, we will not only benefit from all eXo Platform native features, but also increase adoption by allowing access to our business applications from a unique point, with needed authorization and easier administration.

In this blog post, we would like to explain the required steps to migrate and integrate a sample of a business application into eXo Platform.

You can find the code base of the target application in the eXo samples Github repository.

This is a Maven-based project, so it should be easy to import and run as is.

Let’s in brief present the original angular application

The original application is an example of a CRUD application for github issues management based on Angular 6 as front-end framework.

The migration consists of upgrading to the latest stable version, Angular 7.1.1, in order to manage products instead of github issues.

eXo Add-on structure

The goal is to create an eXo Add-on that will be deployed on top of the eXo Platform 5.1.0 server.

It consists on a Maven project with the following structure:

  • portlets: FrontEnd module to generate a web app with the product management portlet and a custom configuration to add a page displaying this portlet.
  • services: BackEnd module to generate a jar file with CRUD services used by the portlet.
  • packaging: eXo add-on package module to generate a zip file to be installed in the eXo platform server.

To find out more about eXo add-ons development, read the dedicated eXo documentation.

Migration steps

FrontEnd

The first step is to switch the original Angular application into an eXo portlet using the following portlets module structure:

Switch Angular Application into an eXo PortletTo find out more about eXo portlets development, read the dedicated eXo documentation.

We will try to explain the main added and modified files.

Portlet.xml

Every eXo portlet is defined within the portlet descriptor portlet.xml.

In our case, we will develop an eXo GenericDispatchedViewPortlet with the following portlet.xml configuration:

Gatein-resources.xml

In order to define the AMD js module and its dependencies of our portlet, we need to declare them in the eXo configuration file gatein-resources.xml:

To make this configuration work correctly, and since angular is using typescript language, we need to use webpack in order to generate only one js file /frontend/main.js.

This js file will be the entry path for angularSamplePortletBundle module, which needs also polyfillsBundle js module in order to keep our angular application running for all browsers.

Index.html

This file corresponds to the html template of the portlet to be used as is from the original application:

Pom.xml

This is pom.xml of portlets module which should configure frontend-maven-plugin in order to install NodeJS and needed NPM modules:

Typescript components

These files correspond to the Angular Typescript components to be used as are from the original application.

eXo Extension configuration

Configuration.xml

This file should be added under META-INF/exo-conf in order to get the portlet running as an eXo Extension:

Web.xml

In this file, PortalContainerConfigOwner eXo Listener configuration is required for our eXo Extension:

Navigation and pages configurations

We should create a page with Products portlet in order to be accessible by /portal/intranet/products url after server startup.

For that UserPortalConfigService eXo Component should be configured under WEB-INF/conf/configuration.xml file:

A navigation node should be added into navigation.xml file:

The corresponding page definition should be added in pages.xml file:

BackEnd

The second step is to develop CRUD rest services called by angular components using the following structure:

develop CRUD rest services called by Angular

Data structure initialization

We have configured changelog-1.0.0.xml file to be interpreted by Liquibase in order to define the structure of Product Table:

Then, we have configured ChangeLogsPlugin in order to initialize the Product table structure defined above in the database:

Persistence layer

To persist products, we are based on eXo JPA implementation.

Product Entity is implemented according to Product table structure:

Then we need ProducDAO to be implemented and configured as an eXo component in order to be called by CRUD rest services:

Business layer

We have configured CrudPortletRestService as an eXo component:

This component will expose CRUD rest services to be called by frontend angular components in order to perform getAll, add, delete and edit operations:

Addon packaging

After building our Maven project, a zip file is generated with needed war and jar files in order to be deployed in the eXo platform server.

Deployment

First startup

A welcome spinner is shown waiting the product list to be displayed:

Waiting spinnerFor the first startup, the Product table structure is created without data:

Product table structure is createdSecond startup

In order to get data in the Product table, we can restore the original data from an SQL dump.

For the second startup, restored data are displayed and paginated. It is possible to filter and sort  them according to our needs:

restored data are displayed

It is possible to add a new product as shown below:

New product tableIt is possible to edit a product as shown below:

edit product tableIt is possible to remove a product as shown below:

remove product tableConclusion

In this article, we have tried to set up a step-by-step tutorial of angular 7 business applications migration to eXo portlets.

Don’t hesitate to share us your experience by applying this tutorial on your own applications and contact us if you have some questions or issues.

Related Posts
Ayoub Zayati

I am a customer project consultant and technical lead at eXo Platform with over 10 years of experience in Web & IT technologies. I'm here to help you develop your next idea using eXo stack.

2 Comments
Leave a Reply

Your email address will not be published.

I have read and accept terms of the privacy Policy. Learn More

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">