Small Business Lending

The frontend of the Small Business Lending Data Filing Platform.

Features

• Vite with React, TypeScript and absolute imports.
• Write unit and integration tests with Vitest and React Testing Library.
• Write e2e tests with Playwright.

Getting started (Updated 12/13/2023)

1. Install Node v22+: nvm install 22 && nvm use 22

2. Enable corepack: corepack enable.

3. Docker engine version 1.13.0+ with docker compose version 3.0+ support needs to be installed to run all the containerized support services.

4. Have the six repos sbl-frontend, sbl-project, regtech-user-fi-management, sbl-filing-api, regtech-mail-api, and regtech-cleanup-api as sibling directories.

   code-root
   ├── regtech-cleanup-api
   ├── regtech-mail-api
   ├── regtech-user-fi-management
   ├── sbl-filing-api
   ├── sbl-project
   └── sbl-frontend (current repository)
   
   

5. Make sure to git pull in each of the six directories to have the latest commits.

6. Create a .env based on the ENV-GUIDE.md.

7. At the sbl-frontend command line, run yarn start. This script uses docker-compose to start up Docker containers of all of the project components (User management, API, Frontend) to get you up and running.

8. At the sbl-frontend command line, run yarn seed to generate the necessary mock data in the backend systems.

Setting up your VS Code environment

If you'll be using VS Code, be sure to:

1. Open this app/ dir in VS Code so that it's the workspace root. Otherwise imports may not work.
2. Install this project's suggested plugins (you should see a VS Code pop-up).
3. Use the workspace version of Typescript (you should see a VS Code pop-up). This is required and unfortunately can't be automatically applied.

Scripts

• yarn dev - start a development server with hot reload.
• yarn build - build for production. The generated files will be on the dist folder.
• yarn preview - locally preview the production build.
• yarn start - start the app's full stack (auth, api, frontend) via docker-compose
• yarn update - update all dependent repos and then start the app's full stack (auth, api, frontend) via docker-compose
• yarn seed - run all mock data generation scripts
• yarn test - run unit and integration tests related to changed files based on git.
• yarn test:ci - run all unit and integration tests in CI mode
• yarn test:e2e - run all e2e tests with Playwright UI mode.
• yarn test:e2e:headless - run all e2e tests headlessly.
• yarn test:e2e:snapshot - run all e2e tests with snapshot testing.
• yarn test:e2e:snapshot-update - update all snapshots.
• yarn test:e2e:snapshot-update <TEST_PATH> - update snapshots for specific tests. Example: yarn test:e2e:snapshot-update e2e/pages/shared-lending-platform/UserProfile*
• yarn format - format all files with Prettier.
• yarn lint - runs TypeScript, ESLint and Stylelint.
• yarn validate - runs lint, test:ci and test:e2e.

Dev Tools

The following commands can be used from the browser console when in a dev environment:

• logout() - logs the current user out of Keycloak
• toggleRouting() - toggles routing logic on/off to allow a dev to view any page despite being logged out or having incorrect user profile data
• setIsRoutingEnabled(true|false) - sets routing logic on/off via a boolean parameter to allow a dev to view any page despite being logged out or having incorrect user profile data

Running Playwright Tests

In order to run Playwright tests, you'll need to download the requisite browsers using the command: yarn playwright install --with-deps