Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/danizd/urbanviable/llms.txt

Use this file to discover all available pages before exploring further.

All runtime configuration for the UrbanViable frontend is supplied through Vite environment variables. Because Vite inlines environment variables into the JavaScript bundle at build time (via import.meta.env), there is no runtime config file to edit on the server — you set the values before building, and they are baked into the output bundle permanently.

​
Environment Variables

Create a .env file at frontend/.env (copy frontend/.env.example as a starting point) and set the following variables:
VariableDefaultDescription
VITE_REACT_APP_TILE_URL"" (empty string)Base URL prepended when fetching galicia_scouting.geojson. In development, leave empty so the file is loaded from public/. In production, set to your TileServer GL origin, e.g. http://localhost:8080
REACT_APP_DATA_STATUS_URL"/api/status"Full URL for the DataStatus freshness check. Nginx serves a static last_update.json at this path in production
VITE_REACT_APP_SOURCE_NAME"galicia-scouting"The MapLibre source ID registered with map.addSource()

​
Example .env

# frontend/.env
VITE_REACT_APP_TILE_URL=http://localhost:8080
REACT_APP_DATA_STATUS_URL=/api/status
VITE_REACT_APP_SOURCE_NAME=galicia-scouting

​
How Variables Are Consumed in Code

// MapViewer.jsx
const sourceName = import.meta.env.VITE_REACT_APP_SOURCE_NAME || 'galicia-scouting';
const tileUrl    = import.meta.env.VITE_REACT_APP_TILE_URL !== undefined
                     ? import.meta.env.VITE_REACT_APP_TILE_URL
                     : '';

// The GeoJSON is fetched from:
const geojsonUrl = tileUrl + '/galicia_scouting.geojson';

// services/api.js
const url = import.meta.env.REACT_APP_DATA_STATUS_URL || '/api/status';

​
Building for Production

cd frontend
npm run build
Vite compiles the React application and outputs a static bundle to frontend/build/. The build/ directory contains index.html and the hashed JS/CSS assets.

​
Serving with Nginx

The docker-compose.yml mounts ./frontend/build into the Nginx container: 
volumes:
  - ./frontend/build:/usr/share/nginx/html:ro
Nginx serves the static bundle on port 80. All requests for unknown paths are rewritten to index.html so that react-router-dom handles client-side navigation.

​
Integration Checklist

Before declaring the frontend functional, verify these five steps in order:
  1. Tile metadata reachable — GET http://localhost:8080/data/galicia-scouting.json returns a JSON metadata document ✅
  2. Tile bytes reachable — GET http://localhost:8080/data/galicia-scouting/7/31/50.pbf returns binary protobuf data ✅
  3. No CORS errors — DevTools → Network tab shows .pbf requests completing without a CORS or preflight error ✅
  4. source-layer matches — MapLibre console shows no warning source-layer "secciones" not found; if it does, the --layer value in generate_tiles.sh does not match source-layer in MapViewer.jsx ✅
  5. setPaintProperty succeeds — Moving a slider in the UI produces no setPaintProperty errors in the console; if errors appear, the map has not yet completed its load event when the hook first fires ✅

​
Responsive Breakpoints

The layout adapts to the viewport width without any JavaScript — breakpoints are handled in CSS:
BreakpointSidebar behaviour
≥ 1024 pxSidebar fixed at 320 px on the left (grid-template-columns: 320px 1fr); map fills the remaining width
≤ 1023 pxSingle-column layout (grid-template-columns: 1fr); sidebar stacks above the map and its right border becomes a bottom border
Environment variables are baked into the JavaScript bundle at build time by Vite. Changing any VITE_REACT_APP_* or REACT_APP_* value in .env has no effect on a previously built bundle — you must run npm run build again and redeploy the new frontend/build/ output. If the browser shows stale behaviour after a rebuild, restart the urbanviable-web Nginx container to clear any cached responses.

Build docs developers (and LLMs) love

Get started for freeTalk to us