Midgard-schematics

Midgard-schematics is an npm package that uses @angular-devkit/schematics and gulp.js to clone the repositories of all the frontend clients in a Walhall app and auto-generate the necessary code to build a single UI.

Usage

To use this package for local development, you need to install gulp-cli globally.

The Walhall app will run the Gulp task when it initializes (npm run init), utilizing midgard-schematics as a dev-dependency.

The gulp command looks like this:

gulp <taskname> --gulpfile node_modules/midgard-schematics/lib/gulpfile.js [--cwd optional_custom_execution_path]

Example:

gulp schematics --gulpfile node_modules/midgard-schematics/lib/gulpfile.js

The gulp task will clone the app’s frontend clients to the projects folder in your app root, install each client as an npm package, and make the following configuration modifications:

  1. tsconfig.json: Add the client’s paths to the paths object.
  2. angular.json: Add the Angular configurations of the imported client.
  3. src/tsconfig.app.json: Include the client’s TypeScript files in the app’s TypeScript compilation.
  4. projects/midgard-angular/src/lib/midgard-routing.module.ts: Add the client’s routes to the Midgard-Angular routing component.
  5. projects/midgard-angular/src/lib/modules/store/store.ts: Add the reducers and the epics to the Midgard-Angular Redux store.
  6. [DOM]: Add exit point component to the DOM depending on the exitPointComponent defined in the Walhall app’s configuration.

Available schematics rules

The aforementioned configuration modifications are carried out according to different schematics rules that can be found under src/utils:

  1. updateTsConfigRule(options): Updates tsconfig.json.
  2. addLibraryToWorkspaceFileRule(options): Updates angular.json.
  3. updateAppTsConfigRule(options): Updates src/tsconfig.app.json.
  4. addRouteRule(options): Responsible for adding routes to midgard-routing.module.ts.
  5. addAddReducersAndEpicsRule(options): Responsible for adding epics and reducers to the Redux store.
  6. addExitPointRule(options): Responsible for adding an exitPoint element to the DOM.