HMDA Help
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.