R4C-Cesium-Viewer

R4C user interface Vue3 interface with Vite and Cesium

Environment Variables

Copy .env.example to .env and configure your environment variables:

cp .env.example .env

PygeoAPI Configuration

The PygeoAPI host can be configured via environment variable:

• VITE_PYGEOAPI_HOST: The PygeoAPI host (default: pygeoapi.dataportal.fi)
  • For production hosts (without port), HTTPS protocol is used automatically
  • For localhost with port (e.g., localhost:5000), HTTP protocol is used automatically

For development, you can point to a local PygeoAPI instance:

VITE_PYGEOAPI_HOST=localhost:5000

Quick Start

Choose your development mode:

Fastest: Mock API (No Database Required)

Perfect for frontend development. No Kubernetes or PostgreSQL needed.

npm install
just dev-mock

Available at: http://localhost:5173 (frontend) | http://localhost:5050 (mock API)

Full Stack: With Database

For testing with real database queries or production data.

# First time setup
cp .env.example .env
just setup

# Start development (services persist, frontend iterates)
just dev

# Seed with test data (recommended)
just db-seed

Available at: http://localhost:5173 (frontend) | http://localhost:5000 (pygeoapi)

Development Modes

Command	Description	Frontend	Backend
just dev-mock	Mock API (no database)	localhost:5173	Mock server on :5050
just dev	Local frontend + K8s services	localhost:5173	Persist on Ctrl+C
just dev-full	All in containers	localhost:4173	Persist on Ctrl+C
just stop	Stop everything	-	Data preserved in PVC

just dev-mock (Fastest)

Uses a lightweight Bun server with synthetic GeoJSON data. No containers, no database:

just dev-mock
# Ctrl+C stops both mock server and frontend

The mock API:

• Serves all 11 PyGeoAPI collections
• Supports query parameters (postinumero, bbox, limit, etc.)
• Auto-detected by Vite (no configuration needed)

See mock-api/README.md for details.

just dev (Recommended for Full Stack)

Backend services run in Kubernetes, frontend runs locally with Vite for fast hot-reload:

just dev
# Ctrl+C stops frontend only, services keep running
# Run again to restart just the frontend

just dev-full

Everything runs in containers (closer to production):

just dev-full
# Ctrl+C stops frontend container, services keep running

Other Options

# Stop all services
just stop

# Stop only frontend (keep services)
just stop-frontend

# Stop mock API
just mock-stop

# View all commands
just help

Legacy Commands

These still work but just commands are preferred:

# Direct Vite (uses production pygeoapi)
npm run dev

# Docker Compose
docker compose up

# Direct Skaffold
skaffold dev --port-forward

For detailed setup including database migrations and mock data seeding, see docs/GETTING_STARTED.md.

Database Management

This project uses dbmate for database schema management with PostgreSQL + PostGIS.

Quick Database Setup

# Initialize database with migrations and mock data
./scripts/init-local-db.sh

Migration Commands

# Apply migrations
dbmate up

# Create new migration
dbmate new add_new_feature

# Check migration status
dbmate status

For complete database documentation, see db/README.md.

Testing with Playwright

Important: E2E tests require VITE_E2E_TEST=true to expose the Cesium viewer to the test harness.

Start dev server with E2E mode, then run tests:

bun run dev:test  # Terminal 1: Start with E2E flag
npx playwright test  # Terminal 2: Run tests

Or use just (handles E2E flag automatically):

just test-e2e

Run tests in interactive UI mode:

npx playwright test --ui

Run tests in headed browsers (default: headless):

npx playwright test --headed

Troubleshooting

skaffold delete
docker system --prune --all

Project Documentation

• Getting Started Guide - Complete setup with all options
• Mock API Documentation - Lightweight development without database
• Getting Started Guide - Complete setup with PostgreSQL + pygeoapi
• Database Migrations - Schema management with dbmate
• Database Seeding - Mock data for testing
• pygeoapi Integration - API endpoint documentation

Sentry

• Source Maps with Vite
• Vue.js Integration
• Pinia Store Monitoring