Dependency

Now, we will see at the dependency and modules that are required for Login and Homepage.

 

  • CSS -

Once you are inside the micro-UI-internals folder, open packages and inside the packages you will find the CSS component. In the CSS component all dependency code for login and the homepage is there in the form of css. So you can edit the CSS properties for the login and homepage component, as seen in the below image.

 

  • libraries:-

In packages components, we will be able to find libraries components. Inside the libraries components all common Hooks, Services, Translation and utils are there and other common dependencies are present.

So we can add all common utils, hooks, services, etc. inside the libraries so that it is easily accessible for any other component that is present in the package's component.

  • React-components:-

The React Components contains all Common and reusable code.So we can access it whenever we need that specific component, we need to import that specific component where we need to use it.

 

  • Modules:-

Inside the modules component all services codes are present e.g:- Core, Fsm, hrms, etc. here we need to import only a Core module.
Inside the Core Module, we maintain the following project structure.

  • Core:-

In Core Module it contains components, config, context, hooks, Images, pages, redux, App.js and Module.js

This project structure is the same for other modules also e.g:- FSM, obps, hrms, etc.

  • Config:-

In Config.js It contains a sidebar menu and It contains a Home Icon, Language selection, and a logout button in the sidebar.
We can change the setting of the sidebar menu from Config.js

  • Hooks:-

All Common hooks that are related to the login and homepage are added in the userInterval.js.

  • Images:-

Digit.js and powered.js These files contain all images related to the login and homepage.

We need to import these two files for getting images for login and homepage.

  • Pages:-

    • Citizen:-
      When the user Login as a Citizen it will redirect to the citizen login page. All source code related to the login and homepage for citizen contain in the citizen component.

    • Employee:-
      When the user Login as an Employee ,it will redirect to the employee login page all source code related to the login and homepage for the employee contain in employee component.

  • Module.js:-
    It is the entry point of the core module where it contains all page components, all routes or redirects where the user login as an employee or citizen on that basis it will render the UI.

  • Package.json:-

In package.json for login and homepage, we need to add only the core module, digit-ui-css, libraries, and react-components.
In the web folder, we can see this package.json file, and there only we can add other modules dependency.