Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/juanmatz/inspection-form-euroautos/llms.txt

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

This page walks through building the Euroautos Inspection Form for production and deploying it to a live environment. Follow the section that matches your chosen hosting platform — Vercel, Netlify, or Docker with Nginx.

​
Build for production

1

Set production environment variables

Create a .env.production file in the project root with all required variables for your live environment. This file is loaded automatically by Vite when building with npm run build.
VITE_WORKSHOP_NAME="Euroautos Madrid"
VITE_APP_TITLE="Euroautos — Formulario de Inspección"
VITE_API_URL=https://api.eurautomadrid.com
VITE_API_KEY=ea_live_xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
VITE_SYNC_INTERVAL_MS=30000
VITE_STORAGE_TYPE=indexeddb
VITE_MAX_PHOTO_SIZE_MB=5
VITE_MAX_PHOTOS_PER_ITEM=10
VITE_PRIMARY_COLOR=#1A3A5C
2

Run the production build

Install dependencies (if not already done) and compile the application:
npm install
npm run build
The build typically completes in 30–90 seconds. A successful build prints a summary of generated chunk sizes:
dist/index.html                   0.42 kB
dist/assets/vendor-a1b2c3d4.js  312.18 kB │ gzip: 98.40 kB
dist/assets/index-e5f6a7b8.js    84.56 kB │ gzip: 26.12 kB
dist/assets/index-c9d0e1f2.css   18.34 kB │ gzip:  4.81 kB
✓ built in 47.23s
3

Inspect the dist/ output

Confirm the dist/ directory contains the expected files before deploying:
ls -lh dist/
ls -lh dist/assets/
Verify that dist/sw.js (the service worker) is present — its absence indicates the PWA plugin did not run correctly.
4

Test the build locally

Run the built application on a local preview server to catch any environment variable or routing issues before deploying:
npm run preview
This starts a local server (default port 4173) serving the compiled dist/ directory. Open http://localhost:4173 in your browser and confirm the workshop name and primary colour are correct.
npm run preview serves the compiled build, not the development server. Any issues you find here will also appear in production. If the app behaves differently from npm run dev, check that all required VITE_* variables are present in .env.production.

​
Deploy to Vercel

Vercel is the simplest way to deploy the inspection form with zero server management. It supports both Git-based automatic deployments and manual CLI deployments.
1

Connect your repository

Log in to vercel.com, click Add New → Project, and import your GitHub repository containing the inspection form.
2

Configure build settings

Vercel will auto-detect the Vite framework. Confirm the following settings in the project configuration:
SettingValue
Framework PresetVite
Build Commandnpm run build
Output Directorydist
Install Commandnpm install
3

Add environment variables

In the Vercel project dashboard, go to Settings → Environment Variables and add each VITE_* variable. Set the environment scope to Production (and optionally Preview with different values).
Do not add VITE_API_KEY as a plain-text variable in shared team projects. Use Vercel’s Sensitive flag to prevent the value from being visible to team members without the appropriate permissions.
4

Deploy

Push to your production branch (typically main). Vercel will automatically trigger a build and deploy. The deployment URL will be printed in the Vercel dashboard and the GitHub commit status.

​
Option B — Vercel CLI

# Install the CLI globally
npm install -g vercel

# Authenticate
vercel login

# Deploy from the project root (will prompt for project settings on first run)
vercel --prod

​
Deploy to Netlify

1

Add a netlify.toml configuration file

Create netlify.toml in the project root. This file configures the build command, publish directory, and the SPA redirect rule required for client-side routing:
[build]
  command = "npm run build"
  publish = "dist"

# Redirect all routes to index.html so that React Router handles navigation
[[redirects]]
  from = "/*"
  to = "/index.html"
  status = 200
2

Set environment variables

In the Netlify dashboard, go to Site configuration → Environment variables and add each VITE_* variable. Alternatively, use the Netlify CLI:
netlify env:set VITE_WORKSHOP_NAME "Euroautos Madrid"
netlify env:set VITE_API_URL "https://api.eurautomadrid.com"
netlify env:set VITE_API_KEY "ea_live_xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"
3

Deploy

Connect your Git repository in the Netlify dashboard (Add new site → Import an existing project) and trigger the first deploy. Subsequent pushes to the production branch will deploy automatically.To deploy manually with the CLI:
npm install -g netlify-cli
netlify login
netlify deploy --prod --dir=dist

​
Deploy with Docker

Use the multi-stage Dockerfile below to build a minimal production image containing only Nginx and the compiled static files. 
FROM node:18-alpine AS builder
WORKDIR /app

# Install dependencies first (cached layer)
COPY package*.json ./
RUN npm ci

# Copy source and build
COPY . .
RUN npm run build

# ── Production stage ──────────────────────────────────────────────────
FROM nginx:alpine

# Copy compiled assets from the builder stage
COPY --from=builder /app/dist /usr/share/nginx/html

# Replace the default Nginx config with our SPA-aware config
COPY nginx.conf /etc/nginx/conf.d/default.conf

EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]
Pass VITE_* variables as Docker --build-arg flags because they are embedded at build time. They are not read from -e (runtime environment) flags. Update your Dockerfile with the corresponding ARG declarations if you use --build-arg:
ARG VITE_WORKSHOP_NAME
ARG VITE_API_URL
ARG VITE_API_KEY
ARG VITE_PRIMARY_COLOR
ENV VITE_WORKSHOP_NAME=$VITE_WORKSHOP_NAME
# ... repeat for each variable

​
Nginx configuration for SPA routing

The inspection form uses client-side routing (React Router). Without a proper Nginx configuration, refreshing the page on any route other than / returns a 404. The following nginx.conf fixes this by falling back to index.html for all unmatched paths. 
server {
    listen 80;
    server_name _;

    root /usr/share/nginx/html;
    index index.html;

    # Gzip compression for text assets
    gzip on;
    gzip_types text/plain text/css application/javascript application/json image/svg+xml;
    gzip_min_length 1024;

    # Cache static assets aggressively (they are content-hashed)
    location /assets/ {
        expires 1y;
        add_header Cache-Control "public, immutable";
    }

    # Service worker must not be cached
    location /sw.js {
        expires off;
        add_header Cache-Control "no-cache, no-store, must-revalidate";
    }

    # SPA fallback — all unmatched routes serve index.html
    location / {
        try_files $uri $uri/ /index.html;
    }

    # Health check endpoint
    location /health {
        return 200 'OK';
        add_header Content-Type text/plain;
    }
}
Save this file as nginx.conf in the project root so the COPY nginx.conf instruction in the Dockerfile can find it.

​
Health check

The Nginx configuration above exposes a /health endpoint that returns 200 OK. You can use this for:
  • Docker health checks — add HEALTHCHECK to your Dockerfile: 
    HEALTHCHECK --interval=30s --timeout=5s --start-period=10s --retries=3 \
  CMD wget -qO- http://localhost/health || exit 1
  • Load balancer probes — configure your load balancer (AWS ALB, GCP Load Balancer, Nginx upstream) to poll /health to determine instance availability.
  • Uptime monitoring — point a monitoring service (e.g. UptimeRobot, Checkly) at https://your-domain.com/health to receive alerts if the deployment goes down.
For a more thorough health check that validates the service worker registration, you can extend the health endpoint by adding a lightweight check file at public/health.json containing the current app version. Your monitoring pipeline can then assert both HTTP status and the version field to detect stale deployments.

Build docs developers (and LLMs) love

Get started for freeTalk to us