Deployment

This document covers building, deploying, and configuring the CPR frontend for production.

Build Command

npm run build

This runs nuxt build, which produces an optimized production bundle in the .output directory. The app is configured as an SPA (ssr: false).

Production Optimizations

The nuxt.config.ts applies the following optimizations in production:

Console and Debugger Removal

All console.* calls and debugger statements are automatically stripped from the production bundle:

// nuxt.config.ts
vite: {
  esbuild: {
    drop: process.env.NODE_ENV === 'production' ? ['console', 'debugger'] : [],
  },
},

This means you can freely use console.log during development without worrying about it leaking into production.

Hidden Source Maps

Client-side source maps are generated but hidden -- they are not referenced in the bundled JavaScript files, so browsers will not download them unless explicitly configured (e.g., via Sentry):

// nuxt.config.ts
sourcemap: {
  client: 'hidden',
},

This allows Sentry to symbolicate stack traces while keeping source maps inaccessible to end users.

Nuxt DevTools Disabled

DevTools are only enabled in non-production environments:

devtools: { enabled: process.env.NODE_ENV !== 'production' },

Environment Variables

The following environment variables must be set in the production environment:

Variable	Required	Description
API_URL	Yes	Backend API base URL (e.g., https://api.cpr.example.com/api/v1)
SENTRY_DSN	Yes	Sentry DSN for error tracking

These are injected at build time via Nuxt's runtimeConfig.public and bundled into the client:

runtimeConfig: {
  public: {
    API_URL: process.env.API_URL || 'http://localhost:8000/api/v1',
    SENTRY_DSN: process.env.SENTRY_DSN || '',
    appVersion: process.env.npm_package_version || '1.0.0',
  },
},

WARNING

Because this is an SPA, runtime config values are baked into the JavaScript bundle at build time. Changing an environment variable requires a rebuild.

Sentry Configuration

Sentry is configured in two places:

Build-time Config (nuxt.config.ts)

sentry: {
  org: 'larrazabal-eye-group',
  project: 'cpr-frontend',
},

This configures the Sentry Nuxt module for source map upload during the build process. The Sentry build plugin requires a .env.sentry-build-plugin file or equivalent auth token environment variables for uploading source maps.

Client-side Init (sentry.client.config.ts)

Sentry.init({
  dsn: useRuntimeConfig().public.SENTRY_DSN as string,
  tracesSampleRate: 0.2,
  replaysSessionSampleRate: 0.1,
  replaysOnErrorSampleRate: 1.0,
  integrations: [Sentry.replayIntegration()],
  enableLogs: true,
  sendDefaultPii: false,  // Patient data protection
  debug: false,
});

Key settings:

• 20% trace sampling -- balances performance monitoring cost with visibility
• Session replay -- 10% of normal sessions, 100% of error sessions
• PII disabled -- critical for HIPAA-adjacent patient data protection
• Logs enabled -- structured logging sent to Sentry

Sentry Source Map Upload

For source maps to be uploaded during builds, ensure the Sentry auth token is available. This is typically configured via .env.sentry-build-plugin (already in .gitignore):

SENTRY_AUTH_TOKEN=your_token_here

Preview Deployments

To preview a production build locally:

npm run build
npm run preview

This builds the app and starts a local preview server serving the production bundle. Use this to verify production behavior (console stripping, routing, etc.) before deploying.

Static Generation

For fully static hosting, the project also supports:

npm run generate

This pre-renders all routes to static HTML files in the dist directory, suitable for static hosting platforms. Since the app is an SPA, this generates a single index.html with client-side routing.

Deployment Checklist

Before deploying to production:

• [ ] All lint checks pass (npm run lint)
• [ ] All formatting checks pass (npm run format)
• [ ] No TypeScript errors
• [ ] Environment variables are set (API_URL, SENTRY_DSN)
• [ ] Sentry auth token is configured for source map upload
• [ ] Build completes without errors (npm run build)
• [ ] Preview build tested locally (npm run preview)
• [ ] package.json version is updated if this is a release