integration-manager v0.0.0
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 configdb.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
})
10 months ago