Blaise UAC Service (BUS) UI 🚌

Web UI for BUS that generates and manages UACs.

Users upload questionnaire sample CSVs which are stored in a Google Cloud Storage bucket. The app sends the questionnaire name and serial numbers to BUS to generate UACs, appends them to the CSV in the bucket, and provides a download link for the original sample with UACs added.

The UI also supports enabling and disabling UACs.

The application is a React frontend served by an Express backend and is deployed to Google App Engine.

Local Development

Prerequisites

• Node.js 24+ (see engines in package.json)
• Yarn 4+
• Google Cloud SDK (gcloud CLI)

Clone and install packages

git clone https://github.com/ONSdigital/blaise-uac-service-ui.git
cd blaise-deploy-questionnaire-service
yarn install

Authenticate with Google Cloud (keyless)

Use service account impersonation to auth with BUS.

gcloud auth login
gcloud config set project ons-blaise-v2-dev
gcloud auth application-default login --impersonate-service-account=ons-blaise-v2-dev@appspot.gserviceaccount.com

Start an IAP tunnel to Blaise REST API

Run this in a separate terminal and keep it running:

gcloud compute start-iap-tunnel restapi-1 80 --local-host-port=localhost:8080 --zone europe-west2-a

Expected output includes Listening on port [8080].

Configure environment variables

Create a .env file in the repository root. You can find IAP client IDs from an existing deployment:

• App Engine -> Versions -> bus-ui -> View Config

Example .env file:

BLAISE_API_URL=localhost:8080
BUCKET_NAME=ons-blaise-v2-dev-sandbox123-bus
BUS_API_URL=https://dev-sandbox123-bus.social-surveys.gcp.onsdigital.uk
BUS_CLIENT_ID=blah.apps.googleusercontent.com
PROJECT_ID=ons-blaise-v2-dev-sandbox123
SERVER_PARK=gusty
URL_DOMAIN=localhost
SESSION_SECRET=blah

Run the app

yarn dev

UI is available at http://localhost:3000/.

If local processes become stale, stop known ports and watchers:

yarn kill

Common Scripts

• yarn dev: Run frontend + backend in watch mode
• yarn build: Build client and server
• yarn typecheck: Run TypeScript checks for frontend and server projects
• yarn lint: Run typecheck, ESLint, Prettier checks, and knip
• yarn lint-fix: Auto-fix lint/prettier issues and run knip fix
• yarn test: Run Vitest suite with coverage
• yarn test-watch: Run Vitest in watch mode
• yarn spellcheck: Run cspell over code/config/docs files