# User Interface
## **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
{% stepper %}
{% step %}
### Set Up CI/CD Pipeline for DIGIT UI
Before you start developing UI modules, it's recommended to set up the [CI/CD](https://urban.digit.org/installation/jenkins-setup) 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](https://github.com/egovernments/DIGIT-Frontend/blob/4971c2d4f4b53428867366d8e5554242e0d7e9db/build/build-config.yml#L48).
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
{% hint style="info" %}
**Refer to the** [**build**](https://core.digit.org/guides/developer-guide/ui-developer-guide/build-and-deploy#build) **and** [**deployment**](https://core.digit.org/guides/developer-guide/ui-developer-guide/build-and-deploy#deploy) **process for more details.**
{% endhint %}
{% endstep %}
{% step %}
### Configure Helmchart
* Add an entry for the new UI module inside the **frontend Helm chart.** [Reference Directory](https://github.com/egovernments/DIGIT-DevOps/blob/unified-env-lts/deploy-as-code/helm/charts/frontend/workbench-ui/values.yaml) [DIGIT-DevOps](https://github.com/egovernments/DIGIT-DevOps/tree/unified-env-lts) repository.
```
Deploy-as-code/helm/charts/frontend/digit-ui
```
* This ensures the UI module is included when deploying with Helm.
{% endstep %}
{% step %}
### 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.
```yaml
workbench-ui:
custom-js-injection: |
sub_filter.conf: "
sub_filter '' '
';"
```
* Modify the development environment [sample file ](https://github.com/egovernments/DIGIT-DevOps/blob/888cd18925fea2793b9e02c8aae8aa718c168a37/deploy-as-code/helm/environments/unified-health-dev.yaml#L789C1-L795C12)as per the requirements.
{% endstep %}
{% step %}
### 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`](https://core.digit.org/guides/developer-guide/ui-developer-guide/ui-configuration-devops#environment-configuration)
```javascript
var globalConfigs = (function () {
var stateTenantId = '<>'
var gmaps_api_key = '<>'
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
};
}());
```
{% endstep %}
{% step %}
### Configure AWS S3 Bucket
Refer to the [steps given here](/complaints-management/complaints-resolution-v2.10/deploy/configure/aws-s3-bucket.md).
{% endstep %}
{% step %}
### Link S3 Bucket in Your Environment Config
Refer to the [steps given here](/complaints-management/complaints-resolution-v2.10/deploy/configure/aws-s3-bucket.md).
{% endstep %}
{% endstepper %}
---
# Agent Instructions: Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://docs.digit.org/complaints-management/complaints-resolution-v2.10/deploy/configure/user-interface.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
