Midgard

Overview

Midgard is a customizable frontend application that you can add to your Walhall app. It comes pre-configured to communicate with your app’s logic modules via the BiFrost API.

How Midgard works

When you create a Walhall app with Midgard included, Walhall forks Midgard to your GitHub account along with the logic modules you selected.

The Midgard fork contains the source code of your web application, built in the frontend framework you selected. It will have the same name as your Walhall app. From there, you can develop Midgard just like any other Angular/React/etc. web application.

Midgard follows a micro-frontends approach; if your logic modules have frontend clients (i.e., pre-defined frontend interfaces for interacting with backend services), then they will be injected into Midgard as dependencies.

The README contains instructions on how to set up and develop the app locally. You can preview the README here:

Create a frontend client from a blueprint

The Walhall marketplace offers a number of blueprint clients that you can use to build frontends for your backend services.

  1. Clone the client blueprint and Midgard repositories (linked above).
  2. Open your terminal, navigate to your application root repository, and run npm run init. This will clone the blueprint to your /clients directory and connect it with Midgard.
  3. Now an empty client is set up, but you need to connect it to a service. Change the following default values:
    • The API URL is set to the one provided for your Walhall application. In Angular, you can change this in /src/lib/state/client.epics.ts.
    • The data model in all service requests is called client. You have to change this based on which data model your client needs to access.

Midgard-core features

Midgard implements the following core features from the midgard-core package:

HTTP client

Midgard uses the HTTP client to communicate with the app’s backend services. It exposes one method for making HTTP requests of all kinds: request. The request method wraps the axios library.

Redux store

Midgard includes a plain Redux store (implemented by the Redux npm package) with redux-observable on top to provide support using observables.

The following functions from redux and redux-observable are included:

  • createStore
  • createSelector
  • combineReducers
  • combineEpics
  • ofType
  • createEpicMiddleware
  • applyMiddleware
  • compose

OAuth client

The simple OAuth client handles user authentication with the app using BiFrost’s core user data model. Currently it only supports credential-based authentication provided through the authenticateWithCredentials method.

Logging library

The logging library exposes a Logger class, which can be instantiated with a few configuration properties:

  • logToConsole: Specifies whether or not logged messages should be logged to the console as well
  • logToServer: Specifies whether or not logged messages should be logged to the server as well
  • APIURL: Server endpoint where logged messages will be sent. If this is not defined, then the logged messages will go to the endpoint defined in the environment variables for the deployment.

Logged messages can be categorized according to various levels. Currently, those levels are:

  • LOG
  • TRACE
  • DEBUG
  • WARN
  • ERROR

The logger will attempt to route messages to the correct console method, if it is available, based on the logLevel defined. Server-side logging will also separate log messages based on these categories.

Midgard-schematics

Midgard-schematics is a Gulp task that initializes the app and puts together the UI based on the source code provided by Midgard and the logic modules.

See the Midgard-schematics page for more information.