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