DIGIT UI: Implementation - Development Guidelines & FAQs

Owned by Abhinav Kushwaha
Last updated: Mar 05, 2021
1 min read

Development Setup

We will use this doc for development setup guidelines and FAQs.

Repo: https://github.com/egovernments/digit-ui

Use the dev branch as the base branch for the development.

Create branches as per following <bug/feature>/<JIRA ticket ID>, e.g.,

  • bug/LIN-90

  • feature/FSM-05

Once done with the change, create a pull request to the development branch. We will deploy and test this branch on QA and after the final QA signoff, it will be merged to the master branch with a release tag.

Clone the repo and following steps to start

## install yarn install ## start dev server yarn start

Development Guidelines

Component Storybook

Please access components here https://digit-ui-internals-react-components.surge.sh

Adding or modifying modules

Modules are enabled by MDMS config at https://github.com/egovernments/egov-mdms-data/blob/DEV/data/pb/tenant/citymodule.json

To add and enable any module in the new UI, src/App.js needs to be changed.

Till PGR, we used to export Module and Links to be added to the registry, now add to the registry is part of the modules themselves. We export only the init function of the module to take care of all the initializations. So, going forward, these init functions will have to be called. We will create the init function of PGR as well. These init modules must be called after initLibraries

Changing CSS

CSS classes are published over CDN and can be seen at https://unpkg.com/@egovernments/digit-ui-css/dist/index.css

Any class can be overwritten. Please make changes in the src/index.css file.

Customizing fields in a form

First, add any new component created in the registry,

Digit.ComponentRegistryService.setupRegistry({ SelectName: SelectName });

Module Specific details

FAQ

  1. API calls are failing, what should I do?

Check src/setupProxy.js for proxy url in dev mode

2. API calls are failing with no auth token

Create a .env file with following

REACT_APP_USER_TYPE= REACT_APP_CITIZEN_TOKEN=a3e5f0a2-4ff0-4680-855e-75051fb3e8f7 REACT_APP_EMPLOYEE_TOKEN=061bad07-c0d5-4200-a74f-ca5ed090cf30 REACT_APP_GRO_TOKEN=43af4c18-6418-4a35-8484-31f0700f465a REACT_APP_LME_TOKEN=fa9f4184-dc64-495d-bded-31674c71b09e