Mina intyg application.
src
.
├── components ─ Shared components
├── hooks ─ General purpos hooks
├── pages
│ ├── SomePage
│ │ ├── components ─ Page specific components
│ │ ├── hooks ─ Page speicific hooks
│ │ └── utils ─ Page speicific utils
│ └── SomePage.tsx ─ Page
├── store ─ Redux store
└── utils ─ Shared utils
Top layer holds components and functions shared by every page. Parts that are shared between applications should be in packages in the monorepo. Parts that are unique for a page should be put in that page's subfolder, when unsure just add to the page and refactoring can be done later.
Default configuration will communicate with a deployed and shared test API that works in most cases but in some scenarious it's required to have a local backend.
Read more about setting up the backends
Create a .env.development.local in the same folder as .env.development. This file will hold our configuration overrides and will be ignored by git. Add the following or change settings to fit your need:
VITE_API_TARGET=http://localhost:8060
VITE_WS_PROTOCOL=wssVITE_API_TARGETtells the application that our backend is on localhost:8020.VITE_WS_PROTOCOLmake sure that websocket communication uses ssl when behind reverse proxy.
Start the application with pnpm --filter @frontend/minaintyg dev for only webcert or pnpm start for all watchers. Navigate to Webcert-frontend in a chromium-browser: https://rs2.rs.localtest.me/welcome
Read more about environment files over at Vite.
A shared navigation JSON is fetched from 1177 and stored in this project manually as 1177-navbar-services.json. More information can be found at 1177.se.
Links are resolved differently depending on build mode. production is the default mode.
| mode | key | example url |
|---|---|---|
| production | prod |
https://e-tjanster.1177.se/mvk/ |
| development | sys |
https://e-tjanster.st.1177.se/mvk/ |
| staging | acc |
https://e-tjanster.at.1177.se/mvk/ |
Use --mode to force a different mode when building
pnpm --filter @frontend/minaintyg build --mode staging- React ─ Components
- Inera Design System ─ Inera components and styling
- TailwindCSS ─ Styling with utility classes
- React Router v6 ─ Application routing
- Redux Toolkit ─ State management and data fetching
- Vite ─ Application bundling
- MSW ─ API mocks
- zod ─ Schema definitions and mocking
- Vitest ─ Unit testing framework
- Testing Library ─ Unit testing library