React Client

React Web implementation for the Open Volunteer Platform

Getting Started

• Running the Client in Developer Mode
• Adding Keycloak Integration to the Client
• Customizing the Action Reports Grid
• Customizing Action Report Nearby Distance

Requirements:

• Node.js 12.x or later version
• Keycloak server (Optional)

Running the Client in Developer Mode

1. Install Ionic

npm install -g @ionic/cli

2. Install dependencies

npm install

3. Start the app

npm run dev

Adding Keycloak Integration to the Client

Rename the keycloak.example.json to keycloak.json and update the fields accordingly.

{

"realm": "<your realm>",

"auth-server-url": "https://your-server/auth",

"ssl-required": "none",

"resource": "<your-client>",

"public-client": true,

"use-resource-role-mappings": true,

"confidential-port": 0

}

Customizing the Action Reports Grid

• Column size can be customized by using the REACT_APP_REPORT_COLUMN_SIZE environment variable.
• This value can be changed in the .env file.
• The default value is 4.

Customizing Action Report Nearby Distance

• Nearby distance to calculate actions reports depending on closeness of recipient location can be customized via REACT_APP_NEARBY_MAX_DISTANCE environment variable.
• This value can be changed in .env file.
• The default value is 100 km.*