Getting Started
This guide walks you through setting up your local development environment and covers the most common developer workflows.
Prerequisites
- Node.js 22+ (download)
- pnpm package manager (
npm i -g pnpm) - AWS CLI configured with access to the development account (
856284715153) - AWS Profile set in
.envvia theAWS_PROFILEvariable (typicallysrdev)
Initial Setup
-
Clone the repository:
git clone git@github.com:trilogy-group/wseng-monorepo-starter.git cd wseng-monorepo-starter -
Install dependencies (from root):
pnpm install -
Populate your
.envfrom a deployed environment:# Sync from the integration environment pnpm script update-env --env integration # Or sync from a specific PR environment pnpm script update-env --pr 20This reads CloudFormation stack outputs + Secrets Manager values and writes them into the root
.envfile. All workspaces (backend, frontend, infra) share this single.env.
Local Development — Full Stack
To run both frontend and backend locally:
Step 1: Configure .env for localhost
After running update-env, override these two variables in your .env:
ENVIRONMENT=localhost
API_BASE_URL=http://localhost:3001
Step 2: Start the backend
cd backend/
pnpm run dev # Starts on http://localhost:3001
# or
pnpm run dev:watch # Starts with auto-reload on file changes
The backend dev server serves all API routes on port 3001, including Scalar docs at /docs/viewer and OpenAPI spec at /docs/openapi.json. It resolves AWS credentials from your AWS_PROFILE.
Step 3: Start the frontend
cd frontend/
pnpm run dev # Starts on http://localhost:3000
Step 4: Open the app
Navigate to: http://localhost:3000?setEnv=localhost
The ?setEnv=localhost query parameter tells the frontend to use http://localhost:3001 as the API backend. This setting is persisted in browser storage, so you only need the query parameter once.
Hot-Connecting to Remote Backends
You can run the frontend locally (pnpm run dev in frontend/) and point it at any deployed backend using the ?setEnv query parameter. No backend changes needed.
http://localhost:3000?setEnv=integration # Points to integration backend
http://localhost:3000?setEnv=production # Points to production backend
http://localhost:3000?setEnv=pr0020 # Points to a specific PR environment
http://localhost:3000?setEnv=localhost # Switch back to local
The setting is persisted in browser storage. To switch, just navigate with a different ?setEnv value — the page reloads with the new config.
API Client Generation
The monorepo uses OpenAPI Generator (typescript-fetch) to produce a fully typed API client in shared/ts/api/generated/. This client is consumed by both the frontend (via @ws-mono/shared/api) and the API tests.
How to Regenerate
The generator fetches the OpenAPI spec from a running backend, so you need a backend available:
Option A: Regenerate from Local Backend (Recommended during development)
# 1. Start your local backend (in a separate terminal)
cd backend/
pnpm run dev
# 2. From the repo root, regenerate the client
pnpm generate:api-client --local
The --local flag tells the generator to fetch the spec from http://localhost:3001/docs/openapi.json.
Option B: Regenerate from a Deployed Environment
# Regenerate from integration environment
pnpm generate:api-client --url https://api-monorepo-integration.wseng.rp.devfactory.com/docs/openapi.json
# Or it uses API_BASE_URL from your .env by default
pnpm generate:api-client
Additional Flags
pnpm generate:api-client --force # Regenerate even if the spec hasn't changed
pnpm generate:api-client --keep-spec # Keep the downloaded OpenAPI spec file for inspection
pnpm generate:api-client --skip-lint # Skip post-generation linting (faster, useful in CI)
Typical Workflow: Add a Backend Endpoint and Use it in Frontend
- Add the route in the backend (e.g.,
backend/app/my-module/routers/my-module.router.ts) - Start the local backend:
cd backend && pnpm run dev - Regenerate the client:
pnpm generate:api-client --local(from root) - Verify: Check
shared/ts/api/generated/apis/for the new API class - Update the wrapper (if needed): Add the new API class to
shared/ts/api/api-client.ts - Use in frontend: Import via
getApiClientService().getClient().myModule.myEndpoint() - Commit both the backend changes and the regenerated client files
API Tests
The api-tests/ package contains auto-generated integration tests that run against a deployed backend. Tests validate that each endpoint returns successful responses with the expected schema.
Generated tests live in api-tests/generated/ (overwritten on regeneration). Put custom tests in api-tests/shared/ (committed) or api-tests/private/ (gitignored).
Prerequisites
Before running API tests, ensure:
- Your
.envhasAPI_BASE_URLpointing to the target backend - Your
.envhasAPI_USERNAMEandAPI_PASSWORDset (Cognito test user credentials) - Your
.envhasUSER_POOL_CLIENT_IDset
Running Tests
cd api-tests/
# Run all tests
pnpm run test
# Run only generated tests
pnpm run test:generated
# Run only shared (hand-written) tests
pnpm run test:shared
Tests run sequentially (no concurrency) with a 30-second timeout. Authentication is handled automatically — the test setup fetches and caches a Cognito token before all tests.
Regenerating Tests
When backend endpoints change, regenerate both the API client and the test files:
# From the repo root — regenerates client first, then test files
pnpm generate:api-tests
This regenerates the API client first, then generates .test.ts and .fixture.ts files for each operation.
Testing Against Different Environments
# Test against integration
pnpm script update-env --env integration
cd api-tests && pnpm run test
# Test against a PR environment
pnpm script update-env --pr 20
cd api-tests && pnpm run test
# Test against local backend
# (update .env: API_BASE_URL=http://localhost:3001)
cd api-tests && pnpm run test
Quality Checks
From the repo root:
pnpm run check # Lint + type-check across all workspaces
pnpm run fix # Auto-fix lint and formatting issues
From the backend directory:
cd backend/
pnpm run test # Run unit tests once
pnpm run test:watch # Run unit tests in watch mode
Troubleshooting
Login button doesn't work
- Open browser console — look for
🔧 Localhost configuration:log - Verify
USER_POOL_ID,USER_POOL_CLIENT_ID,USER_POOL_DOMAINare set in.env - Restart the Vite dev server after
.envchanges - Navigate to
http://localhost:3000?setEnv=localhostto force-reset
AWS credential errors
The backend dev server resolves credentials from AWS_PROFILE on startup and refreshes every 45 minutes. If your SAML session expires:
- Re-authenticate with
saml2aws login - Restart the backend dev server
Environment not found
If update-env fails, ensure:
- The CloudFormation stack for the target environment exists
- Your AWS profile has access to the correct account (856284715153)
- Use
--waitflag if the stack is still deploying:pnpm script update-env --env integration --wait