UI Configuration (DevOps)

UI configuration for the application

Overview

This page offers details of the DIGIT UI configuration required to enable it in any environment. Browse through the configuration details listed below:

DevOps Configuration

Build Configuration

eGov recommends CD/CI be set up before developing on top of DIGIT. This ensures that new modules can be developed and deployed in a streamlined way. DIGIT ships with CI as code as part of the DevOps repository. Please run the CI installer to setup DIGIT CD/CI before developing on DIGIT.

Step 1: Add entry in build-config.yaml file in the master branch of the forked repository. This will set up the job pipeline in Jenkins. Make sure to add the same config to the feature branch you are working on. Refer build-config.yaml

Add the below content for digit-ui.

  - name: builds/digit-dev/frontend/micro-ui/digit-ui
    build:
      - work-dir: frontend/micro-ui/
        dockerfile: frontend/micro-ui/web/docker/Dockerfile
        image-name: digit-ui

Step 2: Go to the Jenkins build page, select "Job Builder" and click on "Build now". This will pull the config from build_config.yaml and identify all modules that need to be built.

Step 3: Once the build is done, go to your Jenkins build page. The service will appear under the repository path in which it has been added, i.e. if the service is added under frontend, it will show up in the frontend section as below,

To learn more about the Build and deployment process visit

Build & Deploy

Helmchart Configuration

Step 1: Add an entry in the helm chart of the frontend directory in the master branch of the forked DIGIT-DevOps repository.

Step 2: Deploy-as-code/helm/charts/frontend/digit-ui

Reference Directory

Environment Configuration

Step 1: Locate the following "deploy-as-code/helm/environments/works-dev.yaml" in the DevOps repository of your organization.

Step 2: Add the below code block within the environment YAML file used to deploy the Works platform -

digit-ui:
  custom-js-injection: |
    sub_filter.conf: "
      sub_filter  '<head>' '<head>
      <script src={{INSERT_YOUR_AWS_BUCKET_NAME}}/globalConfigs.js type=text/javascript></script>';"

Step 3: Modify the development environment sample file as per requirements.

Global Configuration

This section contains the configuration that applies globally to all UI modules. These need to be configured before the configuration of service-specific UI.

Steps to create a globalconfig.js file:

Create a config file (globalconfigs.js) with the below-mentioned config (refer to code below).
Configure all the images/logos required in the S3 and add links as footerBWLogoURL , footerLogoURL.
Mention the state tenant ID as stateTenantId.
If any User roles have to be made invalid add as invalidEmployeeRoles.
Then push this global config file into your S3 bucket as globalconfigs.js
Mention the globalconfig file URL in your Environment config.

var globalConfigs = (function () {
  var stateTenantId = '<<INSERT_STATE_TENANT_ID>>'
  var gmaps_api_key = '<<INSERT_GMAP_GENERATED_TOKEN>>';
  var centralInstanceEnabled = false;
  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 assetS3Bucket = '{{INSERT_YOUR_AWS_BUCKET_NAME}}';
  var invalidEmployeeRoles = ["CBO_ADMIN","STADMIN","ORG_ADMIN","ORG_STAFF"] 
  var configModuleName = 'commonMuktaUiConfig'; 

   var getConfig = function (key) {
     if (key === 'STATE_LEVEL_TENANT_ID') {
       return stateTenantId;
     }
     else if (key === 'GMAPS_API_KEY') {
       return gmaps_api_key;
     }
     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 === 'S3BUCKET') {
       return assetS3Bucket;
     } else if (key === 'CONTEXT_PATH'){
	return contextPath;
     } else if (key === 'UICONFIG_MODULENAME'){
	return configModuleName;
     } else if (key === 'INVALIDROLES'){
	return invalidEmployeeRoles;
     }
   };
 
 
   return {
     getConfig
   };
 }());

AWS S3 Bucket Configuration

The S3 bucket has to be configured by the DevOps team, to store all the assets being used in the application like Logos, globalConfigs, etc.

Steps to create a new AWS Bucket -

Create a new AWS S3 Bucket
Update the Bucket Policy with the following content, to make the bucket public

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "PublicReadGetObject",
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::works-dev-asset/*"
        }
    ]
}

Update the Cross-Origin Resource Sharing (CORS) configuration with the following content

[
    {
        "AllowedHeaders": [
            "*"
        ],
        "AllowedMethods": [
            "GET",
            "PUT",
            "POST",
            "DELETE"
        ],
        "AllowedOrigins": [
            "*"
        ],
        "ExposeHeaders": [
            "x-amz-server-side-encryption",
            "x-amz-request-id",
            "x-amz-id-2"
        ],
        "MaxAgeSeconds": 3000
    }
]

To proxy the same bucket in any environment and make the necessary changes in the environment.yaml file located in the DevOps repository's configmaps under egov-config, follow the steps below:
- Add the s3-assets-bucket: "pg-egov-assets"

 configmaps:
    egov-config:
      data:
        s3-assets-bucket: "(pg-egov-assets|egov-playground-assets|egov-uat-assets)"

After adding the proxy in the environment file, restart the s3-proxy build in the environment with config enabled.

PreviousDIGIT UI Development Pre-requisites NextLocal Development Setup

Last updated 5 months ago