Aibar SRL App Deployment: Vercel Frontend, Render API

Aibar SRL App is split into two independent deployable units: the FastAPI backend (targeting Render) and the Angular 22 frontend (targeting Vercel). The backend is the authoritative source for all data and authentication; it is deployed first so that the frontend has a real apiUrl to point at. Once both services are live, the backend’s CORS configuration must be updated to allow requests from the Vercel domain, and an end-to-end smoke test confirms the full flow is working correctly.

Before going live with real company data, complete this security checklist:

Remove or deactivate test users (e.g. prueba.tester or any account created during development). Leaving admin-role test accounts in production is a serious access-control risk.
Use a strong, randomly-generated JWT_SECRET in the production environment — do not reuse the development value. A minimum of 32 random bytes (base64-encoded or hex) is recommended.
Audit every write endpoint (POST, PATCH, DELETE) in the backend and confirm each one is protected with require_rol(...). Read through app/main.py and all route files before the first real login.
Confirm .env was never committed to either repo. Check both aibar-frontend and aibar-backend git histories with git log --all --full-history -- .env.

Backend to Render

Deploy the FastAPI backend on Render

Create a new Web Service

Log in to render.com and click New → Web Service.
Connect your GitHub account and select the aibar-backend repository.
Choose the Free or Starter plan (Free is sufficient for initial testing, but note it will spin down after 15 minutes of inactivity).
Set the Runtime to Python 3.

Set the build and start commands

In the service settings, configure:

Setting	Value
Build Command	`pip install -r requirements.txt`
Start Command	`uvicorn app.main:app --host 0.0.0.0 --port $PORT`

Render injects the $PORT environment variable automatically — do not hard-code a port number.

Configure environment variables

Under Environment → Environment Variables, add the following key/value pairs:

Variable	Description
`SUPABASE_URL`	Your Supabase project URL (e.g. `https://xxxx.supabase.co`)
`SUPABASE_SERVICE_KEY`	The service role key from Supabase → Settings → API. Keep this secret — it bypasses Row Level Security.
`JWT_SECRET`	A strong random string used to sign and verify JWT tokens. Generate one with `openssl rand -hex 32`.

Do not use the Supabase anon key here. The backend needs the service_role key to perform administrative database operations.

Deploy and note the service URL

Click Create Web Service. Render will build the Docker-like environment, install dependencies, and start the server. Once the deploy is green, the service URL will be:

https://aibar-api.onrender.com

Verify the backend is running by visiting https://aibar-api.onrender.com/docs — the FastAPI auto-generated Swagger UI should load.

Frontend to Vercel

Deploy the Angular frontend on Vercel

Verify the production environment file

Before connecting to Vercel, confirm that src/environments/environments.prod.ts points to the Render backend URL:

// src/environments/environments.prod.ts
export const environment = {
  production: true,
  apiUrl: 'https://aibar-api.onrender.com'
};

The development file uses the local server:

// src/environments/environment.ts
export const environment = {
  production: false,
  apiUrl: 'http://127.0.0.1:8000'
};

The angular.json for this project does not include a fileReplacements entry, so the environment file is not swapped automatically at build time. Before deploying, you must either manually copy environments.prod.ts contents into environment.ts, or add the fileReplacements block to the production configuration in angular.json as described in the Environment Configuration page.

Connect the repository to Vercel

Log in to vercel.com and click Add New → Project.
Import the aibar-frontend GitHub repository.
Vercel will auto-detect the framework. Override the settings as follows:

Setting	Value
Framework Preset	Other (or Angular)
Build Command	`ng build --configuration=production`
Output Directory	`dist/aibar-frontend/browser`
Install Command	`npm install`

Deploy

Click Deploy. Vercel will run npm install and ng build --configuration=production, then publish the contents of dist/aibar-frontend/browser to its CDN.Once the deploy is complete, Vercel assigns a URL in the form:

https://aibar-frontend.vercel.app

Note this URL — you will need it for the CORS step below.

Update CORS on the Backend

After the frontend is deployed to Vercel, you must add the Vercel domain to the backend’s list of allowed origins. Without this, the browser will block all API requests from the frontend with a CORS error. Open app/main.py in the aibar-backend repository and update the allow_origins list:

# app/main.py (excerpt)
from fastapi.middleware.cors import CORSMiddleware

app.add_middleware(
    CORSMiddleware,
    allow_origins=[
        "http://localhost:4200",                  # local dev
        "https://aibar-frontend.vercel.app",      # production frontend
    ],
    allow_credentials=True,
    allow_methods=["*"],
    allow_headers=["*"],
)

Commit and push the change — Render will automatically redeploy the backend. Confirm the new deploy is active before running the end-to-end verification.

If Vercel generates a different domain (e.g. a preview deployment URL), add that domain to allow_origins as well. You can also use a wildcard like https://*.vercel.app during testing, but lock it down to the specific production domain before launch.

End-to-End Verification

Once both services are live and CORS is configured, run through the full application flow on the production URLs to confirm everything is working correctly.

Navigate to https://aibar-frontend.vercel.app/login and log in with an administrator account. Confirm that:

The login request returns a 200 OK from https://aibar-api.onrender.com/auth/login.
You are redirected to the /viajes dashboard.
The sidebar shows all menu items, including Auditoría and Usuarios (admin-only items).

Create a driver (chofer)

Navigate to /choferes and create a new driver using the Nuevo chofer form. Confirm that:

The POST to /choferes/ returns 201 Created with the new driver data.
The driver appears in the list with status disponible.

Assign a trip (viaje)

Navigate to /viajes and create a new trip, assigning the driver and a truck. Confirm that:

The POST to /viajes/ returns 201 Created.
The new trip appears in the list with status pendiente.

Start and finalise the trip

From the trips list, start the trip and confirm the status changes to en_curso. Then finalise it by providing an end date and kilometres travelled. Confirm that:

The status changes to finalizado.
The driver’s status returns to disponible.

Check the audit log (auditoría)

Navigate to /auditoria and confirm that the audit log contains entries for:

The chofer creation (alta)
The viaje creation (alta)
The viaje state transitions (edicion)

Each entry should record the acting user, the affected entity, the action type, and a timestamp.

Backend on Render

Production URL https://aibar-api.onrender.comFastAPI + Supabase. Hosts all REST endpoints, JWT authentication, and audit logging.

Frontend on Vercel

Production URL https://aibar-frontend.vercel.appAngular 22 SPA. Served from Vercel’s CDN with automatic HTTPS and global edge distribution.

Project Setup

Frontend Internals

Deployment

Aibar SRL App Deployment: Vercel Frontend, Render API

Backend to Render

Frontend to Vercel

Update CORS on the Backend

End-to-End Verification

Backend on Render

Frontend on Vercel

Build docs developers (and LLMs) love

Project Setup

Frontend Internals

Deployment

Documentation Index

​Backend to Render

​Frontend to Vercel

​Update CORS on the Backend

​End-to-End Verification

Backend on Render

Frontend on Vercel

Build docs developers (and LLMs) love

Backend to Render

Frontend to Vercel

Update CORS on the Backend

End-to-End Verification