How to build your own Operational Dashboard

To start building your own IPF Operational Dashboard, you need an Angular application that matches our library versions. We strongly recommend the use of NX with your dashboard.

Install NodeJS

Download Node.js 20 here: nodejs.org/

Installing NX and creating your Angular application

Install the CLI using the npm package manager:

npm install -g @angular/cli

Create the Nx Workspace (with versions specified)

Run npx create-nx-workspace@20 my-workspace

When prompted:

Prompt Selection

Workspace Type

Integrated Monorepo

What to Create

Angular

Enable Routing?

Yes

Styles

SCSS (recommended)

Install Dependencies

Yes

Using create-nx-workspace@20 ensures you get Nx 20, which in turn installs Angular 19 by default.

Docs: nx.dev/getting-started/angular

(Optional) Confirm Angular 19 Installed

If you want to verify: npm list @angular/core

You should see something like: @angular/core@19.x.x

Generate Your Dashboard Application

nx g @nx/angular:application my-app

Docs: nx.dev/packages/angular/generators

Update your .npmrc.

Open your .npmrc and make sure you have the extra lines below with the relevant auth token supplied.

@iconsolutions:registry=https://nexus.ipf.iconsolutions.com/repository/ipf-npm/
//nexus.ipf.iconsolutions.com/repository/:_authToken={AuthToken}
//nexus.ipf.iconsolutions.com/repository/ipf-npm/:_authToken={AuthToken}

Customising your application

Adding modules

To install any of the @iconsolutions modules, you need to run npm install @iconsolutions/{module-name}. For example, to install the ODS module, run: npm install @iconsolutions/common

Here is a list of available modules:

Adding configurations

For each module, you may need to add specific configurations in your service. For instructions on how to configure each module, refer to Ops GUI Service page.