Pickbox
Back to blog
Deployment

Deploying a SPA to Vercel: A Complete Guide to Hosting and Services

Kim BoenderKim Boender
March 30, 2026 6 min read
Deploying a SPA to Vercel: A Complete Guide to Hosting and Services

You've built a single-page application and it works great locally. Now you want it live. With Vercel, that part is genuinely easy: a git push and you're done. But Vercel is more than just a deploy button. Once your SPA is up, there's a growing suite of services worth knowing about: edge functions, blob storage, analytics, feature flags, and more, all without managing any infrastructure yourself.

Let's walk through deploying a SPA to Vercel from scratch, then look at the services worth your attention as your app grows.

What is a SPA and why does Vercel suit it so well?

A Single-Page Application loads a single HTML file and handles navigation entirely in the browser via JavaScript. Think React + React Router, Vue + Vue Router, or a Svelte app.

SPAs are fundamentally static after a build: a folder of HTML, CSS, and JS files. That makes them a natural fit for Vercel's CDN-first architecture. Your build output gets distributed across Vercel's global edge network instantly, there's no server to manage or scale, and every user gets assets served from the nearest edge node.

Step 1: Prepare your SPA for deployment

We'll use a React + Vite app here. The process is identical for Vue, Svelte, Nuxt in static mode, Next.js, Astro, and virtually any other framework Vercel supports.

Create a Vite + React app if you don't have one:

npm create vite@latest my-spa -- --template react-ts
cd my-spa
npm install
npm run dev

Make sure your build output is correct:

npm run build

This generates a dist/ folder. That's what Vercel deploys.

Handle client-side routing. This is the most common gotcha with SPAs on any host. When a user navigates directly to /dashboard, the server has no file at that path. Only your JS router knows about it. On Vercel, fix this by adding a vercel.json at the root of your project:

{
  "rewrites": [
    { "source": "/(.*)", "destination": "/index.html" }
  ]
}

This tells Vercel to serve index.html for all routes, letting your client-side router take over.

Step 2: Deploy with the Vercel CLI

npm install -g vercel
vercel login
vercel

The CLI will ask a few questions (project name, framework detection, build command). For a Vite app, it auto-detects everything. Accept the defaults and your app will be live in under a minute at a .vercel.app URL.

To deploy to production:

vercel --prod

The CLI is great for one-off deploys, but the real Vercel workflow is git-based.

Push your project to GitHub, GitLab, or Bitbucket. Go to vercel.com, add a new project, and import your repo. Vercel auto-detects your framework and sets up the build command. Click Deploy.

From now on, every push to your main branch triggers a production deployment. Every pull request gets its own preview URL: a live, shareable version of that branch. This is one of Vercel's best features for team workflows and client reviews.

Step 4: Add a custom domain

In your Vercel project dashboard, go to Settings > Domains. Add your domain, update your DNS to point to Vercel (they'll show you exactly which records to add), and Vercel auto-provisions a free SSL certificate. Done. HTTPS with automatic renewal, no Certbot, no Nginx config.

Vercel services worth knowing

Edge Functions and Vercel Functions let you write serverless API routes that live alongside your frontend. Create a file at api/hello.ts and Vercel automatically provisions it as a serverless function at /api/hello. Good for form submissions, webhooks, auth callbacks, and lightweight API logic without managing any server infrastructure. Edge Functions run closer to users with sub-millisecond cold starts, ideal for auth checks, redirects, and A/B testing logic.

Vercel Blob Storage is an S3-compatible object storage service built right into the platform. Perfect for profile images, file uploads, or any user-generated content that doesn't belong in your database. The free Hobby plan includes 1 GB.

Vercel KV is a globally replicated key-value store, compatible with the Redis API. Good for session storage, rate limiting counters, and caching expensive API calls. Zero config: add the integration in your Vercel dashboard and environment variables are injected automatically.

Web Analytics and Speed Insights give you privacy-friendly, cookie-free traffic analytics (no consent banners needed, GDPR-compliant out of the box) and Core Web Vitals measured from real users, per page. Both are a single package install.

Vercel Flags is a built-in feature flagging system with a UI in the Vercel Toolbar. No third-party service needed for basic flag management. Use it to roll out features to a percentage of users, run A/B tests, or kill-switch a feature without redeploying.

Vercel plans

The Hobby plan is free, genuinely free with no credit card required. It includes unlimited deployments, automatic HTTPS, preview deployments per branch, 100 GB bandwidth per month, 1 GB Blob storage, and Web Analytics. The key limitation: it's for personal, non-commercial use. If you're building for a client or generating revenue, you need the Pro plan at $20/month.

Pro includes $20 of usage credit per month, team collaboration, faster builds, and spend management controls.

Deployment checklist

Before going live, run through this:

  • vercel.json rewrite rule added for client-side routing
  • Environment variables added in Vercel dashboard (not in your repo)
  • Custom domain configured and SSL verified
  • Preview deployments tested on at least one PR
  • Analytics and Speed Insights installed
  • Build output checked (no sensitive data in dist/)
  • robots.txt and sitemap.xml present if SEO matters

Going further

If your SPA is growing and SEO starts mattering, consider migrating to Next.js or Nuxt. Vercel is built by the Next.js team and provides first-class support: SSR, ISR, streaming, and React Server Components all just work.

For monorepos, Vercel has excellent support. Multiple apps in one repo, each deploying independently to their own project, with shared packages.

For AI features, Vercel's AI SDK makes it straightforward to add LLM-powered functionality to your app: streaming chat, embeddings, structured outputs, without managing model infrastructure.

Wrapping up

Vercel makes SPA deployment genuinely effortless, from first deploy to custom domain in minutes. But the real value is in what comes after: preview deployments for every branch, edge functions for lightweight backend logic, blob storage, analytics, and feature flags, all from a single platform with zero infrastructure overhead.

If you're building something commercial, the Pro plan at $20/month is one of the better value-for-money decisions in the frontend ecosystem.

Frequently Asked Questions

Can I deploy any SPA framework to Vercel, not just React? +
Yes — Vercel supports virtually every modern frontend framework out of the box, including Vue, Svelte, SvelteKit, Nuxt, Astro, Angular, Ember, and more. It auto-detects the framework from your project and configures the build command and output directory automatically. If your framework isn't auto-detected, you can set the build command and output directory manually in the project settings.
Is the Vercel Hobby plan really free? What are the limits? +
Yes, the Hobby plan is genuinely free with no credit card required. It includes unlimited deployments, automatic HTTPS, preview deployments per branch, 100GB bandwidth/month, 1M edge requests/month, 1GB Blob storage, Web Analytics (50K events/month), and more. The key limitation is that it's for personal, non-commercial use only. If you're building for a client or generating revenue, you'll need the Pro plan at $20/month.
What is the difference between Vercel Functions and Edge Functions? +
Vercel Functions (also called Serverless Functions) run in a full Node.js runtime in a specific region, and can use any Node.js package. They're best for heavier backend logic, database queries, or third-party API calls. Edge Functions run in Vercel's Edge Runtime — a lighter, V8-based environment that runs globally at the CDN layer, with near-zero cold starts. Edge Functions are ideal for auth checks, redirects, personalisation, and A/B logic. The trade-off: Edge Functions can't use most Node.js built-ins, so you're limited to Web Standard APIs.
Do I need to fix anything special for client-side routing on Vercel? +
Yes — for SPAs using client-side routing (React Router, Vue Router, etc.), you need to tell Vercel to serve your index.html for all routes. Add a vercel.json file at the root of your project with a rewrite rule: { "rewrites": [{ "source": "/(.*)", "destination": "/index.html" }] }. Without this, navigating directly to a deep URL like /dashboard will return a 404, since no file exists at that path on the server.
When should I move from a SPA to Next.js or Nuxt on Vercel? +
Consider migrating when SEO becomes important (SPAs are hard for crawlers to index), when you need server-side data fetching for faster initial loads, or when your app grows complex enough that a file-based routing system would simplify things. Next.js and Nuxt both support SSR, SSG, and ISR on Vercel with zero extra configuration — and Vercel is built by the Next.js team, so the integration is first-class. For most internal tools and auth-gated apps, a SPA is perfectly fine and simpler to maintain.

Try it yourself

JSON Formatter

Format, validate, and beautify JSON instantly

Open JSON Formatter