A small app to explore Typescript, Vite and React.
- 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.
-
Install Node v16.9+:
nvm install && nvm use
-
Enable corepack:
corepack enable
. -
Docker engine version 1.13.0+ with docker compose version 3.0+ support needs to be installed to run all the containerized support services.
-
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)
-
Make sure to
git pull
in each of the five directories to have the latest commits. -
Create a
.env
based on the ENV-GUIDE.md. -
At the
sbl-frontend
command line, runyarn start
. This script usesdocker-compose
to start up Docker containers of all of the project components (User management, API, Frontend) to get you up and running. -
At the
sbl-frontend
command line, runyarn 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/
.
If you'll be using VS Code, be sure to:
- Open this
app/
dir in VS Code so that it's the workspace root. Otherwise imports may not work. - Install this project's suggested plugins (you should see a VS Code pop-up).
- Use the workspace version of Typescript (you should see a VS Code pop-up). This is required and unfortunately can't be automatically applied.
yarn dev
- start a development server with hot reload.yarn build
- build for production. The generated files will be on thedist
folder.yarn preview
- locally preview the production build.yarn start
- start the app's full stack (auth, api, frontend) viadocker-compose
yarn update
- update all dependent repos and then start the app's full stack (auth, api, frontend) viadocker-compose
yarn seed
- run all mock data generation scriptsyarn 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
- runslint
,test:ci
andtest:e2e:ci
.
The following commands can be used from the browser console when in a dev environment:
logout()
- logs the current user out of KeycloaktoggleRouting()
- toggles routing logic on/off to allow a dev to view any page despite being logged out or having incorrect user profile datasetIsRoutingEnabled(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
In order to run Playwright tests, you'll need to download the requisite browsers using the command: yarn playwright install --with-deps