Choorai
Free Hosting

Deploy with Vercel

Deploy frontend apps for free on Vercel, the creators of Next.js. Automatic deployment every time you push via GitHub integration.

Why Vercel?

  • Next.js optimized (official platform)
  • Free tier: 100GB bandwidth/month
  • Automatic HTTPS, global Edge Network
  • Preview Deployments (preview per PR)
  • Serverless/Edge Functions support

1Push Code to GitHub

Your code must be in a GitHub repository to deploy.

Terminal
# Initialize repository (if first time)
git init

# Add files
git add .

# Commit
git commit -m "Initial commit"

# Connect GitHub repository (if first time)
git remote add origin https://github.com/username/my-project.git

# Push
git push -u origin main

Info

If you don't have a GitHub repository, create one at github.com/new.

2Configure Vercel

  1. Sign up for Vercel (free, recommended to log in with GitHub)
  2. Click Add New... → Project in the dashboard
  3. Select repository from Import Git Repository
  4. Framework is automatically detected

Build Settings (by framework)

React + Vite

  • Framework Preset: Vite
  • Build Command: npm run build
  • Output Directory: dist

Next.js

  • Framework Preset: Next.js (auto-detected)
  • Build Command: npm run build
  • Output Directory: .next (automatic)

Vue + Vite

  • Framework Preset: Vite
  • Build Command: npm run build
  • Output Directory: dist

3Environment Variables (if needed)

Set values that vary by environment, such as API URLs, as environment variables.

  1. Project → Settings
  2. Environment Variables tab
  3. Add variable (e.g., VITE_API_URL)
  4. Can select Production / Preview / Development environments
Environment Variables
# Example environment variables
VITE_API_URL=https://api.myapp.com
NEXT_PUBLIC_API_URL=https://api.myapp.com

Info

Vite requires the VITE_ prefix, and Next.js requires the NEXT_PUBLIC_ prefix. See Fixing Environment Variable Errors for details.

4Custom Domain (optional)

A default project-name.vercel.app domain is provided. Additional configuration is needed to use your own domain.

  1. Project → Settings → Domains
  2. Enter domain (e.g., myapp.com)
  3. Add A or CNAME record following DNS setup instructions
  4. SSL certificate is automatically issued

Tip

If you purchase a domain directly from Vercel, DNS is configured automatically. For external domains, changing nameservers to Vercel is convenient.

Vercel vs Cloudflare Pages

Feature Vercel Cloudflare Pages
Free Bandwidth 100GB/month Unlimited
Build Time 6,000 min/month 500 builds/month
Edge Functions Limited (free) Workers free
Next.js Support Optimized (official) Possible (adapter required)
Preview Deployments Auto per PR Auto per PR
Recommended For Next.js, Full-stack Static sites, SPAs

Which one should you choose?

  • Using Next.js → Vercel recommended (optimized)
  • Vite + React/Vue SPA → Both OK (Cloudflare has unlimited bandwidth advantage)
  • Edge Workers usage → Cloudflare recommended

Deployment Checklist

0/5 done

Deployment Complete!

Congratulations!

Your app will now automatically deploy every time you push code to GitHub. Check it at project-name.vercel.app.

Last updated: June 22, 2026 · Version: v0.0.1

Send Feedback

Opens a new issue page with your message.

Open GitHub Issue