Frontend Setup

Frontend Local Setup Guide

This guide covers local setup, configuration, and developer workflows for the Vue 3 single-page application (frontend/).

---

Prerequisites

• Node.js: Version 22 LTS or 24 LTS.
• npm: Version 10+.
• VS Code (recommended editor).

---

Configuration (.env)

In the frontend/ directory, create a .env file containing:

# URL of the Spring Boot backend API
VITE_BACKEND_URL=http://localhost:8080

# URL of the Vite dev server (used for CORS and redirect resolution)
VITE_FRONTEND_URL=http://localhost:3000

# Application environment identifier
VITE_NODE_ENV=openshift-dev

# Coverage instrumentation during dev/build
VITE_COVERAGE=true

# Optional JSON-stringified feature flags (e.g. enable multiple address entries)
VITE_FEATURE_FLAGS={"BCEID_MULTI_ADDRESS":true}

---

Running the Application

Option A: Connected to Live Backend

When running the full stack with local Docker databases and the Spring Boot backend:

cd frontend
npm install
npm start

The application starts at http://localhost:3000.

Option B: Standalone Mode with WireMock Stubs

If you are developing UI components, refining forms, or working on styling without running backend containers, you can use the built-in WireMock stub server:

cd frontend

# Starts both the WireMock stubs and the Vite development server
npm run preview

# Or run the WireMock stub server independently in a dedicated terminal
npm run stub

WireMock responses are located in frontend/stub/. You can add or modify simulated JSON responses using WireMock response templating.

---

VS Code Recommended Extensions & Settings

To ensure consistency with team styling standards:

1. Extensions

• Vue - Official (Volar): High-performance language support for Vue 3 SFCs.
• Prettier - Code Formatter: Automatic code formatting.
• ESLint: Real-time lint feedback.

2. Workspace Settings (.vscode/settings.json)

{
  "editor.tabSize": 2,
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "[vue]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }
}

---

Available Scripts

Script	Command	Description
npm start	vite --host --port 3000	Starts local Vite development server with HMR.
npm run test:unit	vitest run --coverage	Executes all frontend unit tests and generates coverage report.
npm run coverage	test:unit + component + e2e	Executes unit, component, and E2E tests with merged coverage.
npm run build	vue-tsc && vite build	Type-checks and bundles the production asset distribution into dist/.
npm run stub	wiremock --port 8080 ...	Starts the local WireMock backend API mock server.
npm run preview	start-server-and-test ...	Starts WireMock stubs and the Vite development server.