Skip to content

Heimdall Architecture Information

George M. Dias edited this page Nov 14, 2024 · 3 revisions

Application Structure

Heimdall is a Nest.js/Vue application that can be instantiated as a stand-alone, browser-only application called Heimdall-Lite or as a server based application called Heimdall Server or Heimdall with Backend.

Instructions listed here are not intended to teach the technologies being used by the application; they are simply intended to show how the main components are structured and located.

Heimdall-Lite

It is a Typescript and Vue (lightweight JavaScript framework) application built on reactive web user interfaces that make up the front-end. It is a Single-Page-Application (SPA) containing 1 main shell page and multiple User Interface (UI) components that are loaded in response to user actions.

Entry Pointapp/frontend/main.ts ( new Vue({ … }).$mount(’#app’)

Supporting components:

  • router.js -> Defines the Vue Router, allows for application navigation from one page to another without reloading the pages. It also implements a listener for routing events globally across the application
  • server.js -> Starts the Express server where the application will run, default port 8000 - used as an entrypoint for the npx deployment strategy.

Frontend High Level Architecture

Components

Heimdall-Server

It is a TypeScript and NestJs based, server-side application that leverages the Heimdall-Lite front-end and a Postgres DB.

Entry Pointapps/backend/main.ts (async function bootstrap() { … } uses the core function NestFactory to create a Nest application instance.

Controller - apps/backend/app.controller.ts contains basic controller logic for a single route /server which contains configuration information to instantiate the Heimdall-Lite frontend as the Heimdall Server frontend instead.

Module - apps/backend/app.module.ts is the root module of the application, defines what controller to use and what modules to import (including the path to the frontend distribution).

Services - apps/backend/app.service.ts sets up the logger and some lifecycle hooks.

Backend High Level Architecture

Server Deployment(s) Diagram

Server Logic Diagram

Clone this wiki locally