Deployment Architecture Comparison
CI/CD Pipeline with Vercel vs Traditional FTP Deployment
▲ GitHub Actions + Vercel
Modern CI/CD Pipeline
Push to GitHub
Developer pushes code to main branch
Lint & Type Check
svelte-check
Unit Tests
Vitest + Coverage
E2E Tests
Playwright: Chromium, Firefox, WebKit
Build Application
SvelteKit + Vercel Adapter
Deploy to Vercel
Edge CDN, SSR, Serverless Functions
Live at your-app.vercel.app
Global edge network, instant rollback
Trade-offs
✓ Advantages
- Auto-deploy on push
- Preview URLs per PR
- Full SSR support
- Serverless API routes
- Instant rollbacks
- Global CDN
- Zero downtime
✗ Limitations
- Vendor lock-in
- Learning curve
- Requires GitHub secrets
- Free tier limits
📁 GitHub Actions + FTP
Traditional Static Deployment
Push to GitHub
Developer pushes code to main branch
Lint & Type Check
svelte-check
Unit Tests
Vitest
Build Static HTML
SvelteKit + Static Adapter
FTP Upload
Transfer files to web server
Live at www.yourdomain.com
Traditional web hosting
No E2E in example
Can be added if needed
Trade-offs
✓ Advantages
- Simple setup
- Works with any host
- No vendor lock-in
- Full control
- Low learning curve
- Manual upload option
✗ Limitations
- Static files only
- No SSR support
- No API routes
- Manual rollbacks
- No preview URLs
- Slower uploads
- Possible downtime
Feature Comparison
Detailed breakdown of capabilities
| Feature | GitHub + Vercel | GitHub + FTP |
|---|---|---|
| Setup Complexity | Medium | Low |
| Deployment Speed | ~30 seconds | 1-5 minutes |
| Auto-Deploy on Push | Yes | Yes (with Actions) |
| Preview Deployments | Yes (per PR) | No |
| Rollback | Instant (1-click) | Manual |
| Server-Side Rendering | Full Support | Not Supported |
| API Routes / Functions | Serverless | Not Available |
| SSL/HTTPS | Automatic | Host Dependent |
| CDN | Global Edge | Manual Setup |
| Custom Domain | Easy Config | DNS Config |
| Cost (30 days) | Free Tier | $0-20/month |
| Monitoring | Built-in | External Tools |
| Vendor Lock-in | Moderate | None |
Technology Stack
Tools and services used in each pipeline
🎨 Frontend Framework
Svelte 5
SvelteKit 2
TypeScript
Vite
🧪 Testing
Vitest
Playwright
Testing Library
Coverage V8
⚙️ CI/CD Pipeline
GitHub Actions
Node.js 20
npm
▲ Vercel Deployment
adapter-vercel
Edge Network
Serverless
📁 FTP Deployment
adapter-static
FTP Deploy Action
Static HTML
🔍 Quality Checks
svelte-check
TypeScript
ESLint
Which Pipeline Should You Choose?
Need server-side rendering (SSR)?
→ Vercel
Need API routes or serverless functions?
→ Vercel
Want preview deployments for PRs?
→ Vercel
Working in a team with code reviews?
→ Vercel
Already have traditional web hosting?
→ FTP
App is fully static with no dynamic features?
→ FTP
Organization requires on-premise hosting?
→ FTP
Prefer simple, familiar deployment?
→ FTP