Small Business Lending

A small app to explore Typescript, Vite and React.

Features

• Vite with React, TypeScript and absolute imports.
• PWA with 17/17 Lighthouse score.
• Write unit and integration tests with Vitest and Testing Library.
• Write e2e tests with Cypress.

Getting started (Updated 12/13/2023)

1. Install Node v16.9+: nvm install && nvm use

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 five repos sbl-frontend, sbl-project, regtech-user-fi-management, sbl-filing-api, and regtech-mail-api as sibling directories.

   code-root
   ├── 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 five 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.

• This project uses yarn v3.5 in "plug n play" mode. There is no node_modules/ directory. Packages are stored in .yarn/cache/.

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 the Cypress Test Runner.
• 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