Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/S4nti4goCoder/cloudsyncpro/llms.txt

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

CloudSyncPro is a Vite single-page application. Vercel handles it natively with zero build configuration beyond selecting the framework preset and supplying the three required environment variables. The included vercel.json also applies SPA catch-all rewrites and a full set of production security headers automatically on every deploy.
1

Connect your repository

Open the Vercel dashboard and click Add New → Project. Import the CloudSyncPro Git repository from GitHub, GitLab, or Bitbucket. Vercel will detect the project automatically.
2

Set the framework preset

In the Configure Project screen, set Framework Preset to Vite. Vercel will use npm run build as the build command and dist as the output directory — both are correct for this project and require no changes.
3

Add environment variables

Under Settings → Environment Variables, add the following three variables for the Production environment:
VariableValue
VITE_SUPABASE_URLYour Supabase project URL, e.g. https://abcxyz.supabase.co
VITE_SUPABASE_ANON_KEYThe anonymous (public) key from Supabase Dashboard → API
VITE_R2_PUBLIC_URLPublic read URL of your R2 bucket, e.g. https://files.your-domain.com
VITE_SENTRY_DSN is optional. Add it if you want Sentry error monitoring enabled in production. When the variable is absent or empty, the app runs normally without sending any data to Sentry.
The server-side secrets (SUPABASE_SERVICE_ROLE_KEY, R2_*, CRON_SECRET) are not set in Vercel. They belong in Supabase Dashboard → Edge Functions → Secrets and are never exposed to the browser.
4

Deploy

Click Deploy. Vercel builds the project with npm run build (which runs tsc + Vite) and publishes the dist/ output.Subsequent pushes to the main branch trigger automatic redeployments.

​
vercel.json reference

The vercel.json at the repository root configures two things: a catch-all SPA rewrite so that client-side routes (e.g. /dashboard, /files/123) are served by index.html, and a set of security headers applied to every response. 
{
  "$schema": "https://openapi.vercel.sh/vercel.json",
  "rewrites": [
    { "source": "/(.*)", "destination": "/index.html" }
  ],
  "headers": [
    {
      "source": "/(.*)",
      "headers": [
        { "key": "X-Content-Type-Options", "value": "nosniff" },
        { "key": "X-Frame-Options", "value": "SAMEORIGIN" },
        { "key": "Referrer-Policy", "value": "strict-origin-when-cross-origin" },
        { "key": "Permissions-Policy", "value": "camera=(), microphone=(), geolocation=()" },
        { "key": "Strict-Transport-Security", "value": "max-age=63072000; includeSubDomains; preload" }
      ]
    },
    {
      "source": "/assets/(.*)",
      "headers": [
        { "key": "Cache-Control", "value": "public, max-age=31536000, immutable" }
      ]
    }
  ]
}
The /assets/(.*) rule adds a one-year immutable cache header to all hashed static assets (JS, CSS, fonts). Vite’s content-hashed output filenames make this safe.

Build docs developers (and LLMs) love

Get started for freeTalk to us