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.

• Setup
• Deployment

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:

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

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

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>

You can also use npx nx generate directive|pipe|service|class|guard|interface|enum|module.

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 --statsJson flag. For example:

npx nx run back-office:build --statsJson

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"

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

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