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 v18.2+: nvm install 18 && nvm use 18

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 (legacy Cypress tests until Playwright tests are ready).
• yarn test:e2e - run all e2e tests with Playwright UI mode.
• yarn test:e2e:headless - run all e2e tests headlessly.
• yarn format - format all files with Prettier.
• yarn lint - runs TypeScript, ESLint and Stylelint.
• yarn validate - runs lint, test:ci and test:e2e:ci.

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