Frontend Deployment

Overview

Deploy the FitAiid frontend Progressive Web App (PWA) to Vercel, a platform optimized for static sites and SPAs with automatic SSL, global CDN, and instant rollbacks.

Estimated Time: 10 minutes
Difficulty: ⭐ (Very Easy)

Prerequisites

Backend Deployed

Your backend should be deployed to Railway and you should have the API URL:

https://fitaiid-api.railway.app

GitHub Repository

Frontend code should be in the frontend/ directory of your GitHub repository.

Vercel Setup

1. Create Vercel Account

Navigate to vercel.com and click “Sign Up”

Connect GitHub

Choose GitHub as your authentication method and authorize Vercel.

Grant Permissions

Allow Vercel to access your GitHub repositories.

2. Import Project

Add New Project

In Vercel dashboard, click “Add New…” → “Project”

Select Repository

Find and select your FitAidd repository from the list.

Configure Build Settings

Framework Preset: Other (vanilla HTML/CSS/JS)
Root Directory: frontend/ ← IMPORTANT
Build Command: (leave empty)
Output Directory: . (current directory)

Always set Root Directory to frontend/ to deploy only the frontend portion of the monorepo.

Configure Environment Variables

The frontend needs to know where your backend API is located.

Add API URL

Environment Variables Tab

In the import project screen, expand “Environment Variables”

Add API URL

Add the following variable:

Name	Value
`VITE_API_URL`	`https://fitaiid-api.railway.app`

Environment Scope

Select Production, Preview, and Development for all environments.

Replace https://fitaiid-api.railway.app with your actual Railway backend URL.

Update Frontend Configuration

Configure API Endpoint

Ensure your config.js points to the production backend:

const CONFIG = {
    // Auto-detect environment and use appropriate API URL
    API_URL: window.location.hostname === 'localhost' || window.location.hostname === '127.0.0.1'
        ? 'http://localhost:5000'
        : 'https://fitaiid-production.up.railway.app', // Your Railway URL

    // Session timeout (24 hours)
    SESSION_TIMEOUT: 24 * 60 * 60 * 1000,

    // PWA configuration
    PWA: {
        NAME: 'FitAiid',
        SHORT_NAME: 'FitAiid'
    }
};

// Freeze config to prevent modifications
if (typeof Object.freeze === 'function') {
    Object.freeze(CONFIG);
}

console.log('⚙️ Frontend config loaded:', CONFIG.API_URL);

Update API URL for Production

If your config still points to localhost, update it:

# Update frontend/scripts/config.js with your Railway URL
git add frontend/scripts/config.js
git commit -m "Update API URL for production"
git push origin main

Vercel automatically detects GitHub pushes and redeploys your application.

Deploy to Vercel

Start Deployment

Click “Deploy” button in Vercel.

Monitor Build

Watch the build logs in real-time. You should see:

Cloning repository...
Installing dependencies...
Building application...
✅ Build completed in 45s
Deploying to production...
✅ Deployment successful

Get Deployment URL

Once deployed, Vercel provides a URL:

https://fitaiid.vercel.app

Copy this URL to access your application.

Progressive Web App Features

The FitAiid frontend is a full PWA with advanced features:

Service Worker

Service Worker Configuration

The service worker handles offline functionality and push notifications:

frontend/service-worker.js

const CACHE_NAME = 'fitaiid-v1';
const urlsToCache = [
  '/',
  '/index.html',
  '/pages/home.html',
  '/pages/login.html',
  '/scripts/config.js',
  '/styles/index.css'
];

// Install service worker and cache assets
self.addEventListener('install', (event) => {
  event.waitUntil(
    caches.open(CACHE_NAME)
      .then((cache) => cache.addAll(urlsToCache))
  );
});

// Fetch from cache first, fallback to network
self.addEventListener('fetch', (event) => {
  event.respondWith(
    caches.match(event.request)
      .then((response) => response || fetch(event.request))
  );
});

Offline-First Architecture

Cache Strategy

Assets are cached on first visit, enabling offline access to previously viewed pages.

Push Notifications

Web Push API integration allows real-time workout reminders and updates.

Background Sync

Failed API requests are queued and retried when connection is restored.

Install Prompt

Users can install FitAiid as a native app on mobile and desktop.

Frontend Architecture

Project Structure

frontend/
├── index.html              # Landing page
├── manifest.json           # PWA configuration
├── service-worker.js       # Service worker for offline/push
├── pages/                  # HTML pages
│   ├── home.html
│   ├── login.html
│   ├── register.html
│   ├── perfil.html
│   ├── estadisticas.html
│   ├── entrenador.html
│   ├── nutricion.html
│   └── chatbot.html
├── scripts/                # JavaScript modules
│   ├── config.js           # API configuration
│   ├── auth-guard.js       # Route protection
│   ├── notifications.js    # Push notification system
│   ├── home.js
│   ├── login.js
│   └── register.js
├── styles/                 # CSS files
│   ├── index.css           # Global styles
│   ├── login.css
│   ├── register.css
│   └── perfil.css
└── img/                    # Images and assets
    ├── servicios/
    ├── calculadoras/
    └── nutricion/

Authentication Flow

Verify Deployment

Test Core Functionality

Access Application

Open your Vercel URL in a browser:

https://fitaiid.vercel.app

Test Login

Navigate to /pages/login.html and test authentication:

Email: [email protected]
Password: Admin1234

You should be redirected to /pages/home.html after successful login.

Verify API Connection

Open browser DevTools (F12) → Network tab and confirm API requests go to your Railway URL:

https://fitaiid-api.railway.app/api/...

Test Service Worker

DevTools → Application → Service WorkersVerify status shows: ✅ activated and running

Test Push Notifications

Click the bell icon 🔔 and enable notifications. Check DevTools console for:

✅ Service Worker registered
✅ Push subscription created

Test PWA Installation

Desktop (Chrome)
Mobile (Android)
Mobile (iOS)

Look for the install icon in the address bar
Click “Install FitAiid”
Application opens in standalone window

Update CORS in Backend

After deploying to Vercel, you must update your backend CORS configuration to allow requests from your new domain.

Update Railway Environment Variables

Open Railway Dashboard

Navigate to your Railway project

Update CORS_ORIGINS

Update the CORS_ORIGINS variable to include your Vercel URL:

https://fitaiid.vercel.app,http://localhost:3000

Redeploy Backend

Click “Redeploy” to apply the changes

Alternative: Update Code

Or update CORS directly in your backend code:

backend/src/app.js

const corsOptions = {
  origin: [
    'https://fitaiid.vercel.app',      // Production frontend
    'http://localhost:3000',           // Local development
    'http://localhost:5000'            // Local testing
  ],
  credentials: true,
  methods: ['GET', 'POST', 'PUT', 'DELETE', 'PATCH'],
  allowedHeaders: ['Content-Type', 'Authorization']
};

app.use(cors(corsOptions));

Then commit and push:

git add backend/src/app.js
git commit -m "Update CORS for production frontend"
git push origin main

Troubleshooting

CORS errors in browser console

Symptom:

Access to XMLHttpRequest blocked by CORS policy

Solution:

Add your Vercel URL to backend CORS whitelist
Ensure credentials: true is set in CORS config
Verify Railway backend has redeployed with new settings

Service Worker registration failed

Symptom:

Failed to register ServiceWorker: SecurityError

Solution:

Service workers require HTTPS (Vercel provides this automatically)
Verify service-worker.js is in the root of frontend/ directory
Check browser console for syntax errors in service worker code
Clear browser cache and hard reload (Ctrl+Shift+R)

API requests fail with 'undefined'

Symptom:

Cannot read property 'API_URL' of undefined

Solution:

Verify config.js is loaded before other scripts in HTML:

<script src="/scripts/config.js"></script>
<script src="/scripts/home.js"></script>

Check config.js has correct Railway URL
Test API URL manually in browser

Push notifications not working

Symptom:

Notification permission denied

Solution:

Check browser notification permissions (click padlock in address bar)
Verify VAPID keys are configured in Railway backend
Test on different browser (some block notifications by default)
Check DevTools → Application → Service Workers for errors

Vercel deployment fails

Symptom:

Build Error: No Build Output found

Solution:

Verify Root Directory is set to frontend/
Ensure index.html exists in frontend directory
Check for syntax errors in HTML/CSS/JS files
Review Vercel build logs for specific errors

Custom Domain (Optional)

Add a custom domain to your Vercel deployment:

Purchase Domain

Buy a domain from a registrar like Namecheap, GoDaddy, or Google Domains

Add Domain in Vercel

Go to your project → Settings → Domains → Add Domain

Configure DNS

Add these records to your domain’s DNS:

Type	Name	Value
A	@	76.76.21.21
CNAME	www	cname.vercel-dns.com

Verify Domain

Wait 24-48 hours for DNS propagation. Vercel will automatically provision an SSL certificate.

Performance Optimization

Edge Caching

Vercel’s global CDN caches static assets at edge locations for under 50ms response times.

Automatic Compression

Gzip and Brotli compression applied automatically to all assets.

Image Optimization

Use Vercel’s Image Optimization API for responsive images.

Code Splitting

Consider splitting large JavaScript files for faster initial loads.

Deployment Metrics

Monitor your deployment in Vercel Dashboard:

Deployment Frequency: Automatic on every GitHub push
Build Time: ~30-60 seconds
Global Latency: Under 50ms (edge locations)
Uptime SLA: 99.99%

Next Steps

Configure Environment Variables

Learn about all the environment variables needed for FitAiid and how to obtain the API keys.

Getting Started

Core Features

User Guide

Deployment

​Overview

​Prerequisites

​Vercel Setup

​1. Create Vercel Account

​2. Import Project

​Configure Environment Variables

​Add API URL

​Update Frontend Configuration

​Configure API Endpoint

​Update API URL for Production

​Deploy to Vercel

​Progressive Web App Features

​Service Worker

​Offline-First Architecture

Cache Strategy

Push Notifications

Background Sync

Install Prompt

​Frontend Architecture

​Project Structure

​Authentication Flow

​Verify Deployment

​Test Core Functionality

​Test PWA Installation

​Update CORS in Backend

​Update Railway Environment Variables

​Alternative: Update Code

​Troubleshooting

​Custom Domain (Optional)

​Performance Optimization

Edge Caching

Automatic Compression

Image Optimization

Code Splitting

​Deployment Metrics

​Next Steps

Configure Environment Variables

Build docs developers (and LLMs) love

Overview

Prerequisites

Vercel Setup

1. Create Vercel Account

2. Import Project

Configure Environment Variables

Add API URL

Update Frontend Configuration

Configure API Endpoint

Update API URL for Production

Deploy to Vercel

Progressive Web App Features

Service Worker

Offline-First Architecture

Frontend Architecture

Project Structure

Authentication Flow

Verify Deployment

Test Core Functionality

Test PWA Installation

Update CORS in Backend

Update Railway Environment Variables

Alternative: Update Code

Troubleshooting

Custom Domain (Optional)

Performance Optimization

Deployment Metrics

Next Steps