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 StoryBookStorybook.
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 -
...
...
UX flow diagram:
...
Create:
...
package.json:-
| Code Block |
|---|
{
"name": "@egovernments/digit-ui-module-birthregistration",
"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"
}
}
|
Register the Module:-
| Code Block |
|---|
"@egovernments/digit-ui-module-birthregistration":"1.5.3", |
...
Skeleton code:-
Install Dependency:-
Import required components:-
Add Module Code for Birth-Registration:-