DIGIT Core
PlatformDomainsAcademyDesign SystemFeedback
2.9-LTS
2.9-LTS
  • 🖥️Platform
    • Overview
    • Why DIGIT?
    • Principles
    • Architecture
      • Service Architecture
      • Technology Architecture
        • Open Source Tools
      • Infrastructure Architecture
      • Deployment Architecture
    • API Specifications
      • Access Control
      • Boundary
      • Document Uploader
      • Encryption
      • File Store
      • ID Generation
      • Indexer
      • Localisation
      • Master Data Management
      • OTP
      • Payment Gateway
      • PDF Generation
      • URL Shortner
      • WhatsApp Chatbot
      • Workflow
    • Core Services
      • Access Control Services
      • Audit Service
        • Signed Audit Performance Testing Results
      • API Gateway
        • Configuring Gateway Rate Limiting
      • Boundary Service
        • Migrate Old Boundary Data - Steps
      • Email Notification Service
      • Encryption Service
        • Encryption Client Library
        • User Data Security Architecture
        • Guidelines for supporting User Privacy in a module
      • FileStore Service
      • ID Generation Service
      • Indexer Service
        • Indexer Configuration
      • Internal Gateway
      • Location
      • Localization Service
        • Configuring Localization
          • Setup Base Product Localisation
          • Configure SMS and Email
      • MDMS V2 (Master Data Management Service)
        • Adopt New MDMS - Steps
        • MDMS (Master Data Management Service)
          • Setting up Master Data
            • MDMS Overview
            • MDMS Rewritten
            • Configuring Tenants
            • Configuring Master Data
            • Adding New Master
            • State Level Vs City Level Master
        • MDMS Migration
      • OTP Service
      • Payment Gateway Service
      • PDF Generation Service
      • Persister Service
        • Persister Configuration
      • Service Request
      • SMS Notification Service
        • Setting Up SMS Gateway
          • Using The Generic GET & POST SMS Gateway Interface
      • User
        • User Session Management
      • User OTP Service
      • URL Shortening Service
      • Workflow
        • Setting Up Workflows
        • Configuring Workflows For An Entity
        • Workflow Auto Escalation
        • Migration To Workflow 2.0
      • Libraries
        • Tracer Library
        • Encryption Client
      • Accelerators
        • Inbox Service
    • DIGIT: How-Tos
      • SMS Template Approval Process
      • Notification Enhancement Based On Different Channel
    • Releases
      • DIGIT 2.9 LTS
        • Test Automation
        • Release Checklist
        • Service Build Updates
          • Hotfix
        • Test Cases
        • Automated DIGIT Deployment
        • Upgrade Guide: Transitioning DIGIT Modules to Spring Boot Version 3.2.2
        • Postgres Upgrade: Service Code Changes
        • Updating RDS Version in AWS
        • LTS DIGIT Migration - v2.8 To v2.9
        • Changelog
        • Backup PostgreSQL Database In AWS - Steps
    • Source Code
  • 📓Guides
    • Installation Guide
      • Infrastructure Setup
        • AWS
          • 1. Pre-requisites
          • 2. Setup AWS Account
          • 3. Provision Infrastructure
          • FAQ
        • Azure
          • 1. Azure Pre-requisites
          • 2. Understanding AKS
          • 3. Infra-as-code (Terraform)
        • SDC
          • 1. SDC Pre-requisites
          • 2. Infra-as-code (Kubespray)
          • CI/CD Setup On SDC
        • CI/CD Set Up
          • CI/CD Build Job Pipeline Setup
      • DIGIT Deployment
        • Full Deployment
          • Deploy DIGIT
            • Prepare Deployment Configuration
        • Full Deployment (Beta)
          • Creating New HelmChart
          • Prepare Helm Release Chart
      • Quick Setup (AWS)
    • Data Setup Guide
      • Bootstrap DIGIT
      • Productionize DIGIT
      • User Module
      • Localisation Module
      • Location Module
      • MDMS - V2
    • Design Guide
      • Model Requirements
      • Design Services
      • Design User Interface
      • Checklists
    • Developer Guide
      • Pre-requisites Training Resources
      • Backend Developer Guide
        • Section 0: Prep
          • Development Pre-requisites
          • Design Inputs
            • High Level Design
            • Low Level Design
          • Development Environment Setup
        • Section 1: Create Project
          • Generate Project Using API Specs
          • Create Database
          • Configure Application Properties
          • Import Core Models
          • Implement Repository Layer
          • Create Validation & Enrichment Layers
          • Implement Service Layer
          • Build The Web Layer
        • Section 2: Integrate Persister & Kafka
          • Add Kafka Configuration
          • Implement Kafka Producer & Consumer
          • Add Persister Configuration
          • Enable Signed Audit
        • Section 3: Integrate Microservices
          • Integrate IDGen Service
          • Integrate User Service
          • Add MDMS Configuration
          • Integrate MDMS Service
          • Add Workflow Configuration
          • Integrate Workflow Service
          • Integrate URL Shortener Service
        • Section 4: Integrate Billing & Payment
          • Custom Calculator Service
          • Integrate Calculator Service
          • Payment Back Update
        • Section 5: Other Advanced Integrations
          • Add Indexer Configuration
          • Certificate Generation
        • Section 6: Run Final Application
        • Section 7: Build & Deploy Instructions
        • FAQs
      • UI Developer Guide
        • DIGIT-UI
          • UI Components Standardisation
            • DIGIT UI Core React Components
            • DIGIT UI Core Flutter Components
              • Input Field
              • Radio
              • Toggle
              • Button
              • Dropdown
              • Checkbox
              • Toast
              • Info Card
            • DIGIT UI Components v0.2.0
              • Foundation
                • Typography
                • Colour Pallete
                • Spacer
              • Atom
                • Accordion
                • Button
                • Checkbox
        • DIGIT UI Development Pre-requisites
        • UI Configuration (DevOps)
        • Local Development Setup
        • Run Application
        • Build & Deploy
        • Pre-defined Screens In DIGIT-UI
          • Create Screen (FormComposer)
          • Inbox/Search Screen
          • Workflow Component
        • Create a New UI Module/Package
          • Project Structure
          • Install Dependency
          • Module.js
          • Import Required Components
          • Common Hooks
        • Employee Module Setup
          • Write Employee Module Code
          • Create Form - Create Screen
        • Citizen Module Setup
          • Sample screenshots
          • Citizen Landing Screen
          • Write Citizen Module Code
        • Customisation
          • Integrate External Web Application/UI With DIGIT UI
          • Utility - Pre-Process MDMS Configuration
          • CSS Customisation
          • Kibana Dashboard Integration With DSS Module
          • Login Page
        • Setup Monitoring Tools
        • Android Web View & How To Generate APK
        • FAQs
          • Troubleshoot Using Browser Network Tab
          • Debug Android App Using Chrome Browser
      • Flutter (Mobile App) UI Developer Guide
        • Introduction to Flutter
          • Flutter - Key Features
          • Flutter Architecture & Approach
          • Flutter Pre-Requisites
        • Setup Development Environment
          • Flutter Installation & Setup Guide
          • Setup Device Emulators/Simulators
          • Run Application
        • Build User Interfaces
          • Create Form Screen
        • Build Deploy & Publish
          • Build & Deploy Flutter Web Application
          • Generate Android APKs & App Bundles
          • Publishing App Bundle To Play Store
        • State Management With Provider & Bloc
          • Provider State Management
          • BloC State Management
        • Best Practices & Tips
        • Troubleshooting
    • Operations Guide
      • DIGIT - Infra Overview
      • Kubernetes
        • RBAC Management
        • Database Dump - Playground
      • Setup Jenkins - Docker way
      • GitOps
        • Git Client installation
        • GitHub organization creation
        • Adding new SSH key to it
        • GitHub repo creation
        • GitHub Team creation
        • Enabling Branch protection:
        • CODEOWNER Reviewers
        • Adding Users to the Git
        • Setting up an OAuth with GitHub
        • Fork (Fork the mdms,config repo with a tenant-specific branch)
      • Working with Kubernetes
        • Installation of Kubectl
      • Containerizing application using Docker
        • Creation of Dockerhub account
      • Infra Provisioning Using Terraform
        • Installation of Terraform
      • Customise Existing Terraform Templates
      • Cert-Manager
        • Obtaining SSL certificates with the help of cluster-issuer
      • Moving Docker Images
      • Pre and post deployment checklist
      • Multi-tenancy Setup
      • Availability
        • Infrastructure
        • Backbone services
          • Database
          • Kafka
          • Kafka Connect
          • Elastic search
            • Elastic Search Rolling Upgrade
            • ElasticSearch Direct Upgrade
        • Core services
        • DIGIT apps
        • DSS dashboard
      • Observability
        • ES-Curator - Clear Old Logs/indices
        • Monitoring
        • Environment Changes
        • Tracing
        • Jaeger Tracing Setup
        • Logging
        • eGov Monitoring & Alerting Setup
        • eGov Logging Setup
      • Performance
        • What to monitor?
          • Infrastructure
          • Backbone services
          • Core services
        • Identifying bottlenecks
        • Solutions
      • Handling errors
      • Security
      • Reliability and disaster recovery
      • Privacy
      • Skillsets/hiring
      • Incident management processes
      • Kafka Troubleshooting Guide
        • How to clean up Kafka logs
        • How to change or reset consumer offset in Kafka?
      • SRE Rituals
      • FAQs
        • I am unable to login to the citizen or employee portal. The UI shows a spinner.
        • My DSS dashboard is not reflecting accurate numbers? What can I do?
      • Deployment using helm
        • Helm Installation
        • Helm chart creation
        • Helm chart customization
      • How to Dump Elasticsearch Indexes
      • Deploy Nginx-Ingress-Controller
      • Deployment Job Pipeline Setup
      • OAuth2-Proxy Setup
      • Jira Ticket Creation
    • Implementation Guide
    • Security & Privacy Guide
      • Security & Privacy Guidelines For Product Developers
      • Security & Privacy Guidelines For Solution Implementing Agencies
      • Security & Privacy Guidelines For Program Owners
  • 🚀Accelerators
    • UI Frameworks
      • Service Build Updates
    • Integrations
      • Payment
      • Notification
      • Transaction
      • Verification
      • View
      • Calculation
    • Concepts
      • Deployment - Key Concepts
        • Security Practices
        • Readiness & Liveness
        • Resource Requests & Limits
        • Deploying DIGIT Services
        • Deployment Architecture
        • Routing Traffic
        • Backbone Deployment
    • API Playground
    • Sandbox
    • Checklists
      • API Checklist
      • Security Checklist
        • Security Guidelines Handbook
        • Security Flow - Exemplar
      • Performance Checklist
      • Deployment Checklist
    • Contribute
    • Discussion Board
    • Academy
    • Events
Powered by GitBook

All content on this page by eGov Foundation is licensed under a Creative Commons Attribution 4.0 International License.

On this page
  • Overview
  • DevOps Configuration
  • Build Configuration
  • Helmchart Configuration
  • Environment Configuration
  • Global Configuration
  • AWS S3 Bucket Configuration

Was this helpful?

  1. Guides
  2. Developer Guide
  3. UI Developer Guide

UI Configuration (DevOps)

UI configuration for the application

PreviousDIGIT UI Development Pre-requisitesNextLocal Development Setup

Last updated 10 months ago

Was this helpful?

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 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 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

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,

Helmchart Configuration

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

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>';"

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:

  1. Create a config file (globalconfigs.js) with the below-mentioned config (refer to code below).

  2. Configure all the images/logos required in the S3 and add links as footerBWLogoURL , footerLogoURL.

  3. Mention the state tenant ID as stateTenantId.

  4. If any User roles have to be made invalid add as invalidEmployeeRoles.

  5. Then push this global config file into your S3 bucket as globalconfigs.js

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 -

  1. Create a new AWS S3 Bucket

  2. 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/*"
        }
    ]
}
  1. 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
    }
]
  1. 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)"
  1. After adding the proxy in the environment file, restart the s3-proxy build in the environment with config enabled.

To learn more about the and process visit

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

Step 3: Modify the development environment as per requirements.

Mention the globalconfig file URL in your .

📓
Build
deployment
Build & Deploy
DIGIT-DevOps
Reference Directory
sample file
CD/CI be set up
CI installer to setup DIGIT CD/CI
build-config.yaml
Build configuration
Helmchart configuration
Environment configuration
Global configuration
AWS S3 Bucket configuration
Environment config
build ui docker image from jenkins
Sample S3 Bucket with Public access