This repository contains the UI code for MOSIP compliance toolkit. For an overview refer here.
The code is written in Angular JS.
-
Install node.js – To build the angular code using angular cli that runs on node. We recommend Node: 14.17.3, Package Manager: npm 6.14.13
-
Install angular cli – To install angular cli for building the code into deployable artifacts. Follow the following steps to install angular cli on your system.
npm install -g @angular/cli
(to install angular cli)ng --version
(to verify angular is installed in system) We recommend Angular CLI: 13.3.2
-
Check out the source code from GIT – To download the source code from git. Follow the following steps to download source code on your system.
git clone https://github.com/mosip/mosip-compliance-toolkit-ui.git
(to clone the source code repository from git)
-
Build the code – Follow the following steps to build the source code on your system.
- Navigate to the mosip-compliance-toolkit-ui directory inside the cloned repository. Then run the following command in that directory
ng build "--prod" "--base-href" "." "--output-path=dist"
(to build the code)
-
Build Docker Image – Follow the following steps to build docker image on your system.
docker build -t name .
(to build the docker image, replacename
with the name of the image you want, "." Signifies the current directory from where the docker file has to be read.- Example:
docker build -t toolkitui .
-
Run the docker image – Follow the following steps to build docker image on your system.
docker run –d –p 80:80 --name container-name image-name
(to run the docker image created with the previous step,-d signifies to run the container in detached mode, -p signifies the port mapping left side of the":" is the external port that will be exposed to the outside world and right side is the internal port of the container that is mapped with the external port. Replacecontainer-name
with the name of your choice for the container, replaceimage-name
with the name of the image specified in .the previous step)- Example:
docker run -d -p 8080:8080 --name nginx toolkitui
-
Now you can access the user interface over the internet via browser.
- Example:
http://localhost:8080
- Example:
- Build & deploy the code locally – Follow the following steps to build the source code on your system.
- Navigate to the mosip-compliance-toolkit-ui directory inside the cloned repository. Then run the following command in that directory
ng serve
- Now you can access the user interface via browser.
- Example:
http://localhost:4200
- Example:
- But this will give you CORS issue in accessing backend toolkit services. To get around the CORS issue, angular CLI proxy can be used.
- Update the API services BASE_URL in config.json
{ "BASE_URL": "https://localhost:4200/proxyapi/", "toolkitUiUrl": "/toolkit-ui/" }
- Create a new file named proxy.conf.json. Replace ${servicesUrl} with correct url.
{ "/proxyapi": { "target": ${servicesUrl}, "secure": true, "changeOrigin": true, "pathRewrite": { "^/proxyapi": "" } } }
- Now start the server by typing
ng serve --proxy-config proxy.conf.json
- Open the browser, load the app with
https://localhost:4200
- Set the kube config file of the Mosip cluster having dependent services.
- Below are the dependent services required for compliance toolkit service:
Chart Chart version Clamav 2.4.1 Keycloak 7.1.18 Keycloak-init 12.0.1-beta Postgres 10.16.2 Postgres Init 12.0.1-beta Minio 10.1.6 Config-server 12.0.1-beta Artifactory server 12.0.1-beta Auditmanager service 12.0.1-beta Authmanager service 12.0.1-beta Keymanager service 12.0.1-beta Notifier service 12.0.1-beta Partner manager service 12.0.1-beta Complaince service 0.9.0
Install kubectl
and helm
utilities, then run:
cd helm
./install.sh [cluster-kubeconfig-file]
cd helm
./restart.sh [cluster-kubeconfig-file]
cd helm
./delete.sh [cluster-kubeconfig-file]