Files
FarmaFinder/frontend/vite.config.js
T
Antoni Nuñez Romeu db0935eb16
Build & Push Docker Images / test-backend (push) Failing after 36s
Build & Push Docker Images / test-frontend (push) Successful in 29s
Build & Push Docker Images / build-backend (push) Has been skipped
Build & Push Docker Images / build-frontend (push) Has been skipped
Build & Push Docker Images / deploy (push) Successful in 7s
feat(fullstack): implement observability and redesign frontend UI
This commit introduces comprehensive observability for both backend and frontend, alongside a major UI/UX overhaul to align with modern design standards (Material 3 inspired) and improve localization.

Backend changes:
- Integrated OpenTelemetry SDK for distributed tracing.
- Added Pino for structured JSON logging with OTel instrumentation for trace/span correlation.
- Configured OTLP exporters to route traces and logs to Grafana Alloy.
- Updated docker-compose to include necessary environment variables for observability.

Frontend changes:
- Integrated Grafana Faro for Real User Monitoring (RUM), capturing Web Vitals, JS errors, and user interactions.
- Redesigned the entire UI using a new color palette and Material 3 design principles.
- Refactored component architecture (App, Home, Search, Scanner, Profile, Alerts views) for better state management and navigation.
- Improved mobile UX with a redesigned Bottom Navigation bar and Top Bar.
- Localized the interface to Spanish (es).
- Updated assets, icons, and PWA configuration (manifest, icons).
- Refactored CSS to use a centralized design token system (CSS variables).

Observability enables better debugging and performance monitoring across the entire stack.
2026-07-01 11:48:27 +02:00

53 lines
1.4 KiB
JavaScript

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import { VitePWA } from 'vite-plugin-pwa';
export default defineConfig({
plugins: [
react(),
VitePWA({
registerType: 'autoUpdate',
strategies: 'injectManifest',
srcDir: 'src',
filename: 'sw.js',
injectRegister: 'auto',
devOptions: {
enabled: true,
type: 'module',
navigateFallback: 'index.html',
},
manifest: {
name: 'FarmaFinder',
short_name: 'FarmaFinder',
description: 'Find pharmacies that stock the medicine you need',
theme_color: '#00450d',
background_color: '#f8fafb',
display: 'standalone',
start_url: '/',
icons: [
{ src: '/logo-square-192.png', sizes: '192x192', type: 'image/png', purpose: 'any' },
{ src: '/logo-square-512.png', sizes: '512x512', type: 'image/png', purpose: 'any' },
{ src: '/logo.png', sizes: '512x279', type: 'image/png', purpose: 'any' },
],
},
}),
],
test: {
environment: 'jsdom',
setupFiles: ['./src/test/setup.js'],
globals: true,
},
server: {
allowedHosts: ['localhost', 'farmacias.hacecalor.net'],
port: 3000,
proxy: {
'/api': {
target: 'http://localhost:3001',
changeOrigin: true,
credentials: true,
},
},
},
});