OORT Front-end

Versions

Branch	Version	CI
main
next
beta

Introduction

This front-end was made using Angular. It uses multiple external packages, but the relevant ones are:

KendoUI Angular, for the widgets of the dashboards
SurveyJS, for the form builder
Apollo Angular, as a GraphQL client, to interact with the back-end

It was made for a Proof of Concept of a UI Builder for WHO.

To read more about the project, and how to setup the back-end, please refer to the documentation of the project.

In top of Angular, Nx was installed, to better split projects and libs.

General

The project is seperated into three sub-projects:

back-office, an application accessible to administrators
front-office, an application that would depend on the logged user
web-widgets, an application to genereate the web components

One library exists:

safe, a library for common ui / capacity, shared with other projects

Library changes should automatically be detected when serving the other projects.

Azure configuration

If you want to deploy on Azure, build back-office and front-office:

npx nx run back-office:build:azure-dev
npx nx run front-office:build:azure-dev

For prod, replace azure-dev with azure-prod. For uat, replace azure-dev with azure-uat.

The compiled applications can be found there in ./dist/apps/ folder.

Useful commands

Development server

To serve a project, run:

npx nx run <project>:server:<config>

Navigate to http://localhost:4200/. The app will automatically reload if you change any of the source files.

For example:

npx nx run back-office:serve

will serve back-office with default development configuration.

npx nx run back-office:serve:oort-local

will serve back-office, connecting to the deployed back-end for development.

Code scaffolding

Generate a component:

npx nx g component <component-name>

Generate a module:

npx nx g module <module-name>

Build

Run npx nx run <project>:build:<config> to build a project. The build artifacts will be stored in the dist/apps/ directory.

Prettify scss and html

Run npx prettier --write "**/*.{scss,html}" to execute prettier and update all scss / html files locally.

Analyze bundle

Start by building apps adding --stats-json flag. For example:

npx nx run back-office:build -- --stats-json

Then, run webpack-bundle-analyzer command to see the tree of your bundles:

npx webpack-bundle-analyzer dist/apps/back-office/stats.json

Storybook

UI library has its own storybook definition. To execute storybook locally, you can run:

npx nx run ui:storybook

To build it, you can run:

npx nx run ui:build-storybook

Pushing the code on the repo should automatically deploy storybook on a public environment.

Web components

To test web components, you can:

go to this repo: https://github.com/ReliefApplications/app-builder-widgets-poc
Switch to the branch: https://github.com/ReliefApplications/app-builder-widgets-poc/tree/fix/68747_add_forms_and_missing_styles_file
execute: npm i && npm run start You should find under the form widget dropdown some form types in order to test the form web component.

Common issues

Javascript heap out of memory

In case you encounter any memory issue, open your terminal and type following command, depending on your vscode terminal. You should then be able to pass your commands as before.

Bash

export NODE_OPTIONS="--max-old-space-size=4096"

In case you still face issues, you can still increase it:

export NODE_OPTIONS="--max-old-space-size=8192"

Powershell

set NODE_OPTIONS="--max-old-space-size=4096"