Register Module and Routing

Before running the application we will see, How to Register a New Module and routing in Digit UI.
We will proceed step by step to register the module.

Create Project Structure:-

Go to micro-ui--internals → packages → modules. Inside the module, create a folder and give the name of service e.g:- service name is property tax then create folder PT (you can give any name).
After creating pt will add the package.json into a created folder where we mention the module name
and other dependencies.

{
  "name": "@egovernments/digit-ui-module-pt",
  "version": "1.5.4",
  "license": "MIT",
  "description": "Digit Property Tax 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"
  }
}

package.json

After creating the package.json for property tax 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.

 {
      "module": "PT",
      "code": "PT",
      "active": true,
      "order": 1,
      "tenants": [
        {
          "code": "pb.jalandhar"
        },
        {
          "code": "pb.nawanshahr"
        },
        {
          "code": "pb.amritsar"
        }
      ]
    },

Suppose your module name is BR(Birth-Registration) then change the module and code as BR. and update the citymodule.json file.

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 and pt module then will add these dependencies.
  
  "dev:br": "cd packages/modules/br && yarn start", "dev:pt": "cd packages/modules/br && yarn start", "build:br": "cd packages/modules/br && yarn build", "build:pt": "cd packages/modules/pt && yarn build",
  
  micro-ui-internals/package.json
- example:-
  Now open the example package.json file and update the dependency. e.g:- If we need to add br and pt module then will add these dependencies.
- Web:-
  Now open the Web package.json file and update the dependency. e.g:- If we need to add br and pt module then will add these dependencies.

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

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.