Integration Manager Application

This is the integration manager app project for creating EDI equivalent MicroFrontend with Angular

This app demonstrates the following:

• Building and exposing web components required to do EDI equivalent processing
• Localization
• Both types of µFE components for use with the Alegeus AppShell environment
• Use of the Alegeus Design System for styling
• Integration of the federation plugin for angular webpack builds
• Use of dev/qa/beta proxies and MOCK API environment for local development and testing
• Build and deployment scripts for Azure AKS
• Routing
• Integration of Cypress for automation_

Usage

To get started, this project directory can be copied into a local repo as a place to get started.

/manifest, azure-pipelines.yaml

The AzDo build and deployment pipeline templates have been included in this project.

/shared/i18n

This folder should be kept if you are supporting i18n as described in the below Localization section.

/assets/locales

This folder contains the localized strings associated for i18n support described in the Localization section.

Local development

run npm install

To start the dev server run

npm run start:dev

Access the application via http://localhost:4001/

There are a few different "modes" you can start the dev server in.

• "dev" - this is the default and will proxy all API request to the dev environment at https://development.alegeuslabs.com
• "beta" - this connects your app to the beta environment at https://beta.alegeuslabs.com
• "mock" - this connects your app to a mock environment

Working with a live environment

For both dev and beta modes, the local app server will proxy all API calls to the respective environment. The assumption is that services are outside the realm of AppShell and µFE, so will exist in a real deployment. This means that any µFE that makes an api call, should do so just like they would if they were running in the actual environment.

Working with the mock environment

run npm run start:mock run 'ng serve --configuration mock' Starting the local environment with npm run start:mock will start the local mock server running on port 4007 and then bring up the app shell in mock mode where all API calls will be proxied to that server. Proxy details are in proxy/mock.proxy.conf.json.

The mock server will handle all API requests that the app would make in a live env. Right now that means /apis/v1/*/*. This makes it easy to start the app shell without needing to log in at all. The user credentials that are returned were captured at some point and really need to return a valid user identity.

The mock server is currently implemented with json-server uses files in the mock folder.

• json-server.json - Mock server config
• db.json - this contains all the data for each API call.
• routes.json - any custom routes that are needed to handle API calls can be added here. Currently all API calls on the path /apis/v1/*

Localization

Localiztion is supported in µFE development with the help of AppShell. The goal of AppShell is to offload as much of the work for setting up, loading, and translation so the developer of the µFE doesnt have to worry. As of AppShell V1, we are using the i18next library. When AppShell loads a µFE, it will load the resource bundles as specified in the configuration, and pass a translator function 't' to the component through a property. Once the µFE is loaded it can simply use that funciton to reference it's keys when putting translatable text on the screen.

Setup

Strings should all be stored in the 'assets/locales' folder in a subdirectory that identifies the language using IETF language codes Example:

public
 ├── locales
 |  ├── en
 |  |   ├── main-view.json
 |  ├── fr
 |  |   ├── main-view.json

When Appshell loads your strings, it uses a namespace that matches the name of your exposed module identified in the mfe-config.json in either exposedModule or settings.module.

Local development

Since Appshell is supposed to load your language resources and pass in a translator function, when doing local development you will need to use the localConnectI18n helper function provided by @alegeus/appshell-utilities.

import { localConnectI18n } from '@alegeus/appshell-utilities';

localConnectI18n('<local locales folder>', '<language to load>', '<namespace to load').then((t)=>{
    // add your element to DOM
})