HMDA Help

• Overview
• Installation
• Building and viewing
  • 1. package.json
  • 2. keycloak.json
  • Start the development server
  • Blank screen
• Getting involved
• Open source licensing info

Overview

The HMDA Help application allows for management (create, update, delete) of HMDA institutions.

This project was bootstrapped with Create React App (CRA).

Installation

We use node and yarn to manage front-end dependencies. You should have both node and yarn installed.

$ git clone git@github.com:cfpb/hmda-help.git
$ cd hmda-help
$ yarn

Building and viewing

Due to the back-end API and authentication requirements there are 2 files changes required before building the UI:

1. package.json

Update package.json to add a proxy. This should be set to the development environment. For example:

{
  "homepage": "/hmda-help",
  "proxy": "https://[devenv].cfpb.gov"
}

This will proxy all API requests to the [devenv].cfpb.gov environment. See the CRA "Proxying API Requests in Development" documentation for more details.

2. keycloak.json

Update the "auth-server-url": "/auth" property of the keycloak.json file to use the [devenv].cfpb.gov environment.

For example:

{
  "realm": "hmda2",
  "auth-server-url": "https://[devenv].cfpb.gov/auth",
  "ssl-required": "all",
  "resource": "hmda2-api",
  "public-client": true,
  "use-resource-role-mappings": true,
  "confidential-port": 0
}

This will allow authentication using Keycloak.

Start the development server

Now you can run yarn start to begin using the UI in development mode. See the available scripts in the CRA documentation for more details.

Blank screen

If you don't have your local keycloak/proxy setup correct, you will get a blank white screen when loading the app (no UI errors, no console errors, no network errors). Previously, the app would go through a visible, rapid cycle of attempting to connect to the Auth server before eventually erroring out.

Getting involved

CONTRIBUTING

Open source licensing info

1. TERMS
2. LICENSE
3. CFPB Source Code Policy