Rainmaker UI app structure

Owned by Gyan
Last updated: Oct 14, 2020 by jk
3 min read


Rainmaker GitHub URL:  

https://github.com/egovernments/frontend

Primary development branch: develop

Production branch : master


Tech stack used in Rainmaker App:-

Dev tools:-


Citizen & Employee Apps (Packages module → \egov-web-app\web\rainmaker\packages\citizen)

  • Both are independently running react apps, deployed in production
  • What it contains?
    1. It has Landing page, profile and all user-specific components like OTP, Login, Forgot password as its native routes.
    2. It imports all the modules(eg. PGR, PT, TL, etc) as a package in its node-modules.
  • The citizen and Employee apps provide the basic layout - The header with ULB name and Logo, and the left side navigation bar
  • The content area is rendered from respective modules.

Egov-UI-Kit (Dev-Packages  → \egov-web-app\web\rainmaker\dev-packages\)

  • It's a common utility package, was made from the beginning of our first module PGR
  • What it contains?
    1. A component library, with all the UI elements being used in PGR and PT can be found here.
    2. React HOCs - for controlling authorization access of the components at the top level(withAuthorization.js, withoutAuthorization.js), Creating components with all form related actions attached in a generic way, including all data population in dropdowns, managing onField change, onClick actions, dynamic creation of API request body and API calls onSubmit. (form.js, withData.js). It is mainly used in PGR and PT. 
  • The component Library contains UI elements(eg. Textfields, dropdowns, map, Radio Buttons, etc) which can be reused anywhere.
  • The components are made on top of Material UI (version 0.20.1), with some customizations as per the existing Rainmaker design and theme we follow. (Mainly used in PGR and PT).


Egov-UI-Framework (Dev-Packages  → \egov-web-app\web\rainmaker\dev-packages\)

  • A UI Framework to provide similar form based screens and other reusable UIs with consistent designs, all achieved just by writing JSON configs.
  • The framework was made in the later part of our journey of rainmaker, it's use can be found in the modules starting from TL. 
  • The Framework also contains the updated material UI (4.1.3) component library similar to the one in egov-ui-kit.
  • For more information - Please refer the detailed documentation on egov-ui-framework.


Other Dev-Package Modules (Dev-packages → \egov-web-app\web\rainmaker\dev-packages)

  • All packages inside dev-packages are independently runnable and deployable react apps
  • What it contains? 
    1. All the module specific contents resides here.
    2. It also contains their respective login, OTP, and other user-info pages for separate deployment purpose. (Not being used currently)
  • The modules like PGR and PT, which has huge differences between citizen and employee interface are kept separate.
  • Other modules are common for both Citizen and Employee. 
  • The apps are written in javascript ES6 version.
  • These modules are transpiled and converted to ES5 version so that it can be imported and used in our citizen and employee apps as a node module.


Cloning, Transpiling, Bundling, and Running apps locally:-

  1. Clone rainmaker from the remote repo:  
  2. Switch path to  \egov-web-app\web\rainmaker
    1. Run "yarn install"  → to install all required dependencies in rainmaker app
    2. Run "yarn run go" →  what it does? 
      1. It first builds CSS and sass files for all the modules.
      2. Transpiles all the packages present inside the dev-package folder to ES5 version and put them in lib folder inside packages.
      3. When all the transpiled packages are available in /packages/lib, Lerna works on soft-linking the dependencies for each module including citizen and employee package.
      4. Lerna goes inside all the packages mentioned in the lerna.json file and maps the dependencies required by them to their node-modules. Thus by soft-linking the dependencies and putting them in the respective node-modules, it is made sure that all dependencies are available to be used wherever required.
      5. In case of Mutex error do yarn run go until it gets successful , it happens in the first time installation due to weak internet connections
  3. After successful completion of above steps, The apps are ready to run.
  • For running apps: 
  1. Citizen app: "yarn run dev:citizen"
  2. Employee app: "yarn run dev:employee"
  3. Individual apps: move to /dev-packages/..." and run "yarn start"
  • Bundling of files is done by webpack.Â