The HMDA Help application allows for management (create, update, delete) of HMDA institutions.
This project was bootstrapped with Create React App (CRA).
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
$ yarnDue to the back-end API and authentication requirements there are 2 files changes required before building the UI:
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.
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.
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.
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.