Ctrlk
For the complete documentation index, see llms.txt. This page is also available as Markdown.

User Interface

UI configuration for the application - DevOps

Overview

This guide explains how to configure the DIGIT UI in any environment. It includes setting up builds, environment files, global configs, and AWS S3 for hosting assets.

Steps

1

Set Up CI/CD Pipeline for DIGIT UI

Before you start developing UI modules, it's recommended to set up the CI/CD pipeline using DIGIT’s DevOps setup.

  • Run the CI installer provided in the DIGIT DevOps repository to set up the pipeline.

  • In your forked repository, update the build-config.yaml file (in both master and your feature branch). Refer to build-config.yaml.

Sample entry in build-config.yaml:

# Health Frontend Build pipelines
  - name: builds/Digit-Frontend/health/workbench-ui
    build:
      - work-dir: health/micro-ui/
        dockerfile: health/micro-ui/web/workbench/Dockerfile
        image-name: workbench-ui

  • Go to Jenkins, select the Job Builder, and click "Build now".

  • Once the build completes, the new UI service will appear under its respective folder (e.g., frontend) in Jenkins.

build ui docker image from jenkins

Refer to the build and deployment process for more details.

2

Configure Helmchart

Deploy-as-code/helm/charts/frontend/digit-ui

  • This ensures the UI module is included when deploying with Helm.

3

Configure Environment YAML

  • To enable the UI in a specific environment (e.g., dev), update the environment YAML file. "deploy-as-code/helm/environments/unified-health-dev.yaml"

  • Add the below code block within the environment YAML file.


workbench-ui:
  custom-js-injection: |
    sub_filter.conf: "
      sub_filter  '<head>' '<head>
      <script src=https://egov-dev-assets.s3.ap-south-1.amazonaws.com/analytics/analytics.js type=text/javascript></script>      
      <script src={{INSERT_YOUR_AWS_BUCKET_NAME}}/globalConfigsWorkbenchDev.js type=text/javascript></script>
      ';"

  • Modify the development environment sample file as per the requirements.

4

Configure Global

Global configuration settings apply to all UI modules.

  • Create a globalconfigs.js file with the necessary details.

  • Upload this file to your AWS S3 bucket.

  • Mention the globalconfig file URL in your Environment config 


 var globalConfigs = (function () {
  var stateTenantId = '<<INSERT_INSTANCE_TENANT_ID>>'
  var gmaps_api_key = '<<GoogleApiKey>>'
  var contextPath = 'workbench-ui';
  var configModuleName = 'commonMuktaUiConfig';
  var centralInstanceEnabled = false;
  var localeRegion = "IN";
  var localeDefault = "en";
  var mdmsContext = "egov-mdms-service";
  var footerBWLogoURL = '{{INSERT_YOUR_AWS_BUCKET_NAME}}/digit-footer-bw.png';
  var footerLogoURL = '{{INSERT_YOUR_AWS_BUCKET_NAME}}/digit-footer.png';
  var digitHomeURL = 'https://www.digit.org/';
  var hrmsContext = "health-hrms";
  var projectContext= "health-project";
  var invalidEmployeeRoles = ["CBO_ADMIN", "ORG_ADMIN", "ORG_STAFF", "SYSTEM"]
  var getConfig = function (key) {
    if (key === 'STATE_LEVEL_TENANT_ID') {
      return stateTenantId;
    }
    else if (key === 'ENABLE_SINGLEINSTANCE') {
      return centralInstanceEnabled;
    } else if (key === 'DIGIT_FOOTER_BW') {
      return footerBWLogoURL;
    } else if (key === 'DIGIT_FOOTER') {
      return footerLogoURL;
    } else if (key === 'DIGIT_HOME_URL') {
      return digitHomeURL;
   } else if (key === 'CONTEXT_PATH') {
      return contextPath;
    } else if (key === 'UICONFIG_MODULENAME') {
      return configModuleName;
    } else if (key === "LOCALE_REGION") {
      return localeRegion;
    } else if (key === "LOCALE_DEFAULT") {
      return localeDefault;
    } else if (key === "MDMS_CONTEXT_PATH") {
      return mdmsContext;
    } else if (key === "MDMS_V2_CONTEXT_PATH") {
      return mdmsContext;
    } else if (key === "MDMS_V1_CONTEXT_PATH") {
      return mdmsContext;
    } if (key === 'INVALIDROLES') {
      return invalidEmployeeRoles;
    }
  };
  return {
    getConfig
  };
}());
5

Configure AWS S3 Bucket

Refer to the steps given here.

6

Link S3 Bucket in Your Environment Config

Refer to the steps given here.

Last updated

Was this helpful?