Deployment Guide

Architecture Overview

upLegal uses a split deployment architecture:

Frontend (React + Vite): Deployed to Netlify
Backend (Express API): Deployed to Render

Frontend Deployment (Netlify)

Netlify Configuration

The frontend is configured via netlify.toml:

[build]
  command = "npm run build"
  publish = "dist"

[build.environment]
  NODE_VERSION = "18.0.0"

Build Settings

Setting	Value
Build command	`npm run build`
Publish directory	`dist`
Node version	18.0.0

API Redirects

The netlify.toml configures API requests to proxy to the backend:

[[redirects]]
  from = "/api/*"
  to = "https://uplegal-service.onrender.com/api/:splat"
  status = 200
  force = true
  headers = {Access-Control-Allow-Origin = "*"}

SPA Routing

For client-side routing (React Router):

[[redirects]]
  from = "/*"
  to = "/index.html"
  status = 200

Cache Headers

The configuration disables caching for JavaScript bundles and index.html to ensure users always get the latest version:

[[headers]]
  for = "/assets/*.js"
  [headers.values]
    Cache-Control = "no-cache, no-store, must-revalidate"
    Pragma = "no-cache"
    Expires = "0"

[[headers]]
  for = "/index.html"
  [headers.values]
    Cache-Control = "no-cache, no-store, must-revalidate"

Deploy to Netlify

Connect your repository

Go to Netlify
Click “Add new site” > “Import an existing project”
Connect your Git provider and select the repository

Configure build settings

Netlify will automatically detect the netlify.toml configuration.Verify:

Build command: npm run build
Publish directory: dist
Node version: 18.0.0

Set environment variables

In Netlify dashboard, go to Site settings > Environment variablesAdd all VITE_* prefixed variables:

VITE_SUPABASE_URL=...
VITE_SUPABASE_ANON_KEY=...
VITE_APP_URL=...
VITE_API_BASE_URL=...
VITE_MERCADOPAGO_CLIENT_ID=...

Do NOT add VITE_SUPABASE_SERVICE_ROLE_KEY or other sensitive backend credentials to Netlify.

Deploy

Click “Deploy site”. Netlify will:

Clone your repository
Install dependencies (npm install)
Run build command (npm run build)
Publish the dist folder

Configure custom domain (optional)

In Domain settings, add your custom domain (e.g., legalup.cl)

Backend Deployment (Render)

Server Configuration

The backend server runs on server.mjs using Express:

Entry point: server.mjs
Port: Configured by Render (via process.env.PORT) or defaults to 3000
Start command: npm run server or node server.mjs

Deploy to Render

Create a new Web Service

Go to Render Dashboard
Click “New +” > “Web Service”
Connect your Git repository

Configure service settings

Setting	Value
Name	`uplegal-service`
Environment	Node
Build Command	`npm install`
Start Command	`node server.mjs`
Instance Type	Free (or paid for production)

Set environment variables

In the Render dashboard, add all required environment variables:

# Supabase
VITE_SUPABASE_URL=https://your-project.supabase.co
VITE_SUPABASE_SERVICE_ROLE_KEY=eyJhbGci...

# MercadoPago
VITE_MERCADOPAGO_ACCESS_TOKEN=APP_USR-...
VITE_MERCADOPAGO_CLIENT_ID=...
VITE_MERCADOPAGO_CLIENT_SECRET=...
VITE_MERCADOPAGO_WEBHOOK_URL=https://uplegal-service.onrender.com/api/mercadopago/webhook
MERCADOPAGO_WEBHOOK_URL=https://uplegal-service.onrender.com/api/mercadopago/webhook

# Application URLs
VITE_APP_URL=https://legalup.cl
FRONTEND_URL=https://legalup.cl
VITE_API_BASE_URL=https://uplegal-service.onrender.com
RENDER_EXTERNAL_URL=https://uplegal-service.onrender.com

# Email
RESEND_API_KEY=re_...
VITE_RESEND_API_KEY=re_...

# Node Environment
NODE_ENV=production

Deploy

Click “Create Web Service”. Render will:

Clone your repository
Install dependencies
Start the server with node server.mjs
Assign a public URL (e.g., https://uplegal-service.onrender.com)

Configure health checks

Render automatically monitors the /health endpoint:

app.get('/health', (req, res) => {
  res.json({ ok: true, timestamp: Date.now() });
});

CORS Configuration

The backend server is configured with CORS to allow requests from specific origins:

const corsOptions = {
  origin: [
    'https://legalup.cl',
    'https://www.legalup.cl',
    'http://localhost:3000',
    'http://localhost:3001',
    'https://uplegal.netlify.app'
  ],
  methods: ['GET', 'POST', 'PUT', 'DELETE', 'OPTIONS'],
  allowedHeaders: ['Content-Type', 'Authorization', 'X-Requested-With'],
  credentials: true
};

Update the origin array in server.mjs to include your production frontend URL.

Build Modes

Production Build

npm run build

Production builds:

Minify code with Terser
Remove console logs
Optimize bundle size
No sourcemaps (unless in dev mode)

Development Build

npm run build:dev

Development builds include:

Sourcemaps for debugging
Unminified code
Development environment variables

Vite Build Configuration

From vite.config.ts:

build: {
  outDir: 'dist',
  assetsDir: 'assets',
  sourcemap: mode === 'development',
  minify: 'terser',
  chunkSizeWarningLimit: 1000,
}

Environment-Specific Configuration

Development

Frontend: http://localhost:3001
Backend: http://localhost:3000
Use test MercadoPago credentials
Enable verbose logging

Production

Frontend: https://legalup.cl (Netlify)
Backend: https://uplegal-service.onrender.com (Render)
Use live MercadoPago credentials
Production logging and error handling

Webhooks Configuration

MercadoPago Webhooks

Configure the webhook URL in MercadoPago dashboard:

https://uplegal-service.onrender.com/api/mercadopago/webhook

Or set via environment variable:

VITE_MERCADOPAGO_WEBHOOK_URL=https://uplegal-service.onrender.com/api/mercadopago/webhook

The server validates webhook notifications for payment events.

Monitoring and Logs

Netlify Logs

Access via Netlify dashboard > Deploys > Select deploy > Deploy log
Shows build output and deployment status

Render Logs

Access via Render dashboard > Select service > Logs
Real-time server logs including:
- API requests
- Environment variable validation
- Payment processing
- Error traces

Server Health Check

Monitor backend health:

curl https://uplegal-service.onrender.com/health

Response:

{
  "ok": true,
  "timestamp": 1234567890
}

Rollback and Version Control

Netlify Rollback

Go to Deploys in Netlify dashboard
Find a previous successful deploy
Click Publish deploy

Render Rollback

Go to service in Render dashboard
Click Manual Deploy > Select a previous commit
Or push a git revert to trigger auto-deploy

Troubleshooting

Build Failures

Issue: Netlify build fails with module errors Solution:

Check Node version matches netlify.toml (18.0.0)
Verify all dependencies are in package.json
Clear build cache in Netlify settings

API Connection Issues

Issue: Frontend can’t reach backend API Solution:

Verify VITE_API_BASE_URL points to Render service URL
Check CORS configuration includes frontend URL
Ensure backend is running (check /health endpoint)

Environment Variables Not Loading

Issue: App behaves incorrectly or crashes Solution:

Verify all required variables are set in hosting platform
Frontend variables must be prefixed with VITE_
Redeploy after adding new variables

MercadoPago Webhooks Not Working

Issue: Payments don’t update booking status Solution:

Verify VITE_MERCADOPAGO_WEBHOOK_URL is set correctly
Check webhook is configured in MercadoPago dashboard
Test webhook endpoint is publicly accessible
Review Render logs for webhook errors

Architecture

Development

Integrations

API Reference

Deployment Guide

Architecture Overview

Frontend Deployment (Netlify)

Netlify Configuration

Build Settings

API Redirects

SPA Routing

Cache Headers

Deploy to Netlify

Backend Deployment (Render)

Server Configuration

Deploy to Render

CORS Configuration

Build Modes

Production Build

Development Build

Vite Build Configuration

Environment-Specific Configuration

Development

Production

Webhooks Configuration

MercadoPago Webhooks

Monitoring and Logs

Netlify Logs

Render Logs

Server Health Check

Rollback and Version Control

Netlify Rollback

Render Rollback

Troubleshooting

Build Failures

API Connection Issues

Environment Variables Not Loading

MercadoPago Webhooks Not Working

Next Steps

Build docs developers (and LLMs) love

Architecture

Development

Integrations

API Reference

​Architecture Overview

​Frontend Deployment (Netlify)

​Netlify Configuration

​Build Settings

​API Redirects

​SPA Routing

​Cache Headers

​Deploy to Netlify

​Backend Deployment (Render)

​Server Configuration

​Deploy to Render

​CORS Configuration

​Build Modes

​Production Build

​Development Build

​Vite Build Configuration

​Environment-Specific Configuration

​Development

​Production

​Webhooks Configuration

​MercadoPago Webhooks

​Monitoring and Logs

​Netlify Logs

​Render Logs

​Server Health Check

​Rollback and Version Control

​Netlify Rollback

​Render Rollback

​Troubleshooting

​Build Failures

​API Connection Issues

​Environment Variables Not Loading

​MercadoPago Webhooks Not Working

​Next Steps

Build docs developers (and LLMs) love

Architecture Overview

Frontend Deployment (Netlify)

Netlify Configuration

Build Settings

API Redirects

SPA Routing

Cache Headers

Deploy to Netlify

Backend Deployment (Render)

Server Configuration

Deploy to Render

CORS Configuration

Build Modes

Production Build

Development Build

Vite Build Configuration

Environment-Specific Configuration

Development

Production

Webhooks Configuration

MercadoPago Webhooks

Monitoring and Logs

Netlify Logs

Render Logs

Server Health Check

Rollback and Version Control

Netlify Rollback

Render Rollback

Troubleshooting

Build Failures

API Connection Issues

Environment Variables Not Loading

MercadoPago Webhooks Not Working

Next Steps