This guide aims at enabling the readers to create a Birth registration for citizen module for the frontend.
Goal:
The goal of this developer guide is to walk through all the steps in building a new frontend citizen module for Birth-Registration.
In this guide, you will learn:
How to set up your development environment
How to register frontend citizen module.
How to integrate with backend service and run it locally.
How to build and deploy the new service in your DIGIT environment
At the end of this guide, you will be able to run the sample module provided with this guide (code provided), test it out locally and also deploy it using CD/CI to your dev environment.
Prerequisites:
Prior Knowledge of React JS.
Prior Knowledge of Redux/Hooks.
Prior Knowledge of SCSS/React Storybook.
Prior knowledge of Git.
Local development setup:
If you are starting off with a fresh Linux/windows machine, we will setup a few things before we can start an application -
i) Install Vs Code -
ii) Install Node JS -
Create:
skeleton code:-
Go to micro-ui--internals → packages → modules. Inside the module, create a folder and give the name of service e.g:- service name is birth-registration then create folder br (you can give any name).
After creating br will add the package.json into a created folder where we mention the module name
and other dependencies.
| Code Block |
|---|
{
"name": "@egovernments/digit-ui-module-br",
"version": "1.5.4",
"license": "MIT",
"description": "Birth Registration Module",
"main": "dist/index.js",
"module": "dist/index.modern.js",
"source": "src/Module.js",
"files": [
"dist"
],
"scripts": {
"start": "microbundle-crl watch --no-compress --format modern,cjs",
"build": "microbundle-crl --no-compress --format modern,cjs",
"prepublish": "yarn build"
},
"peerDependencies": {
"react": "17.0.2",
"react-router-dom": "5.3.0"
},
"dependencies": {
"@egovernments/digit-ui-libraries": "1.5.4",
"@egovernments/digit-ui-react-components": "1.5.4",
"lodash.merge": "^4.6.2",
"react": "17.0.2",
"react-dom": "17.0.2",
"react-hook-form": "6.15.8",
"react-i18next": "11.16.2",
"react-query": "3.6.1",
"react-redux": "7.2.8",
"react-router-dom": "5.3.0",
"react-table": "7.7.0",
"redux": "4.1.2",
"redux-thunk": "2.4.1"
}
}
|
After creating the package.json for birth registration we maintain the following project structure.
Register Module into mdms:-
If you are creating a new module then, first we need to enable that module as true in citymodule.json
update the Module in citymodule.json.
| Code Block |
|---|
{
"module": "BR",
"code": "BR",
"active": true,
"order": 1,
"tenants": [
{
"code": "pb.jalandhar"
},
{
"code": "pb.nawanshahr"
},
{
"code": "pb.amritsar"
}
]
}, |
...
Adding New Screen:-
After Creating the project structure in the module add the required dependency.
Package.Json:-
We need to add or update the module dependency in three places.Micro-ui-internals:-
Now open the micro-ui-internals package.json file and update the dependency. e.g:- If we need to add br module then will add these dependencies.
| Code Block |
|---|
"dev:br": "cd packages/modules/br && yarn start",
"build:br": "cd packages/modules/br && yarn build", |
...
| Code Block |
|---|
"@egovernments/digit-ui-module-br":"^1.4.0", |
Web:-
Now open the Web package.json file and update the dependency. e.g:- If we need to add br module then will add these dependencies.
| Code Block |
|---|
"@egovernments/digit-ui-module-br":"1.5.4", |
Routing:-
Now we will see how to add a new screen.Create an index.js (you can give any name) file in a particular module or service as seen below
So here in pages ->citizen->create-> index.js, we are adding new screen code whatever we need to render on UI that code we will add. after adding the code will add the route for the create.js file.
For Routing will create an index.js file where we mention or add all routes. Above index.js will add a private route so we mention the path and component name which component we need to show or render after entering a specific path or link.
Module.js:-
In Module.js we register the component which components we need to show or render on UI.
e.g:-
| Code Block |
|---|
import { Header, CitizenHomeCard, PTIcon } from "@egovernments/digit-ui-react-components";
import React, { useEffect } from "react";
import { useTranslation } from "react-i18next";
import { useRouteMatch } from "react-router-dom";
import CitizenApp from "./pages/citizen/index";
import Create from "./pages/citizen/create/index";
import EmployeeApp from "./pages/employee";
import BRCard from "./components/BRCard";
const componentsToRegister = {
BRCreate : Create,
};
export const BRModule = ({ stateCode, userType, tenants }) => {
const { path, url } = useRouteMatch();
const moduleCode = "BR";
const language = Digit.StoreData.getCurrentLanguage();
const { isLoading, data: store } = Digit.Services.useStore({ stateCode, moduleCode, language });
Digit.SessionStorage.set("BR_TENANTS", tenants);
useEffect(()=>userType === "employee"&&Digit.LocalizationService.getLocale({
modules: [`rainmaker-${Digit.ULBService.getCurrentTenantId()}`],
locale: Digit.StoreData.getCurrentLanguage(),
tenantId: Digit.ULBService.getCurrentTenantId()
}),
[]);
if (userType === "employee") {
return <EmployeeApp path={path} url={url} userType={userType} />;
} else return <CitizenApp />;
};
export const BRLinks = ({ matchPath, userType }) => {
const { t } = useTranslation();
// const [params, setParams, clearParams] = Digit.Hooks.useSessionStorage("PT_CREATE_PROPERTY", {});
// useEffect(() => {
// clearParams();
// }, []);
const links = [
{
link: `${matchPath}/birth`,
i18nKey: t("Create_BirthRegistration"),
},
];
return <CitizenHomeCard header={t("BirthRegistration")} links={links} Icon={() => <PTIcon className="fill-path-primary-main" />} />;
};
export const initBRComponents = () => {
Object.entries(componentsToRegister).forEach(([key, value]) => {
Digit.ComponentRegistryService.setComponent(key, value);
});
};
export const BRComponents = {
BRModule,
BRLinks,
};
|
So After adding all components to the module.js again we need to enable modules into the web->src-> app.js and in example->src->index.js. there we need to import.
After enabling the module into App.js and index.js routing will work.