Introduction to Hosting Platforms

Modern web applications require reliable hosting that supports different architectures, from static sites to full-stack applications. Each platform has unique strengths and pricing models.

Vercel - Frontend-Focused Platform

Best For

  • Next.js applications (they created Next.js)
  • Static sites and JAMstack
  • Frontend applications with serverless functions
  • Teams prioritizing deployment speed

Deployment Example



bash

# Install Vercel CLI
npm install -g vercel

# Deploy from project directory
vercel

# Production deployment
vercel --prod

# Environment variables
vercel env add NEXT_PUBLIC_API_URL production

Configuration



json

// vercel.json
{
  "builds": [
    { "src": "package.json", "use": "@vercel/next" }
  ],
  "routes": [
    { "src": "/api/(.*)", "dest": "/api/$1" },
    { "src": "/(.*)", "dest": "/$1" }
  ],
  "env": {
    "DATABASE_URL": "@database-url"
  },
  "functions": {
    "app/api/**.ts": {
      "maxDuration": 30
    }
  }
}

Pros and Cons

Pros:

  • Excellent Next.js integration
  • Global CDN included
  • Automatic HTTPS
  • Git integration
  • Serverless functions
  • Fast deployments

Cons:

  • Expensive for high traffic
  • Limited to serverless architecture
  • Vendor lock-in with Next.js features

Netlify - JAMstack Leader

Best For

  • Static sites
  • JAMstack applications
  • Gatsby, React, Vue applications
  • Teams needing build plugins

Deployment Example



bash

# Install Netlify CLI
npm install -g netlify-cli

# Login and deploy
netlify login
netlify deploy

# Production deployment
netlify deploy --prod --dir=build

Configuration



toml

# netlify.toml
[build]
  command = "npm run build"
  functions = "netlify/functions"
  publish = "build"

[build.environment]
  NODE_VERSION = "18"
  NPM_VERSION = "8"

[[redirects]]
  from = "/api/*"
  to = "/.netlify/functions/:splat"
  status = 200

[[headers]]
  for = "/*"
  [headers.values]
    X-Frame-Options = "DENY"
    X-XSS-Protection = "1; mode=block"

[context.production.environment]
  REACT_APP_API_URL = "https://api.production.com"

[context.deploy-preview.environment]
  REACT_APP_API_URL = "https://api.staging.com"

Pros and Cons

Pros:

  • Generous free tier
  • Excellent static site performance
  • Built-in forms handling
  • Deploy previews
  • Edge functions
  • Strong community

Cons:

  • Limited serverless function runtime
  • No traditional server hosting
  • Build time limits on free tier

Heroku - Platform as a Service

Best For

  • Full-stack applications
  • Ruby, Python, Node.js, PHP apps
  • Teams needing databases and add-ons
  • Rapid prototyping

Deployment Example



bash

# Install Heroku CLI
# Create Heroku app
heroku create my-app

# Add buildpacks
heroku buildpacks:add heroku/nodejs

# Set environment variables
heroku config:set NODE_ENV=production
heroku config:set DATABASE_URL=postgres://...

# Deploy
git push heroku main

# Scale dynos
heroku ps:scale web=2
heroku ps:scale worker=1

Configuration



json

// package.json
{
  "scripts": {
    "start": "node server.js",
    "heroku-postbuild": "npm run build"
  },
  "engines": {
    "node": "18.x",
    "npm": "8.x"
  }
}



yaml

# Procfile
web: npm start
worker: node worker.js
release: npm run db:migrate

Pros and Cons

Pros:

  • Easy deployment
  • Extensive add-on ecosystem
  • Supports multiple languages
  • Database integration
  • Process management

Cons:

  • More expensive than alternatives
  • Dynos sleep on free tier (discontinued)
  • Not as fast as specialized platforms

Render - Modern Alternative to Heroku

Best For

  • Full-stack applications
  • Docker deployments
  • Teams migrating from Heroku
  • Cost-conscious projects

Deployment Example



yaml

# render.yaml
services:
  - type: web
    name: my-web-app
    env: node
    buildCommand: npm install && npm run build
    startCommand: npm start
    envVars:
      - key: NODE_ENV
        value: production
      - key: DATABASE_URL
        fromDatabase:
          name: my-database
          property: connectionString
    autoDeploy: false

  - type: worker
    name: my-worker
    env: node
    buildCommand: npm install
    startCommand: node worker.js

databases:
  - name: my-database
    databaseName: myapp
    user: myapp_user

Docker Deployment



dockerfile

# Dockerfile for Render
FROM node:18-alpine
WORKDIR /app
COPY package*.json ./
RUN npm ci --only=production
COPY . .
EXPOSE 3000
CMD ["npm", "start"]

Pros and Cons

Pros:

  • Competitive pricing
  • Native Docker support
  • Automatic SSL
  • PostgreSQL included
  • No sleep mode
  • Easy Heroku migration

Cons:

  • Smaller ecosystem than Heroku
  • Limited add-ons
  • Newer platform (less mature)

AWS - Enterprise Cloud Platform

Best For

  • Enterprise applications
  • Complex architectures
  • Teams needing full control
  • High-traffic applications

Static Site Hosting (S3 + CloudFront)



bash

# AWS CLI deployment
aws s3 sync ./build s3://my-bucket --delete
aws cloudfront create-invalidation --distribution-id E1234567890 --paths "/*"

ECS Deployment



json

{
  "family": "my-app",
  "networkMode": "awsvpc",
  "requiresCompatibilities": ["FARGATE"],
  "cpu": "256",
  "memory": "512",
  "executionRoleArn": "arn:aws:iam::123456789012:role/ecsTaskExecutionRole",
  "containerDefinitions": [
    {
      "name": "web",
      "image": "123456789012.dkr.ecr.us-east-1.amazonaws.com/my-app:latest",
      "portMappings": [
        {
          "containerPort": 3000,
          "protocol": "tcp"
        }
      ],
      "environment": [
        {
          "name": "NODE_ENV",
          "value": "production"
        }
      ],
      "logConfiguration": {
        "logDriver": "awslogs",
        "options": {
          "awslogs-group": "/ecs/my-app",
          "awslogs-region": "us-east-1",
          "awslogs-stream-prefix": "ecs"
        }
      }
    }
  ]
}

Lambda Serverless



javascript

// serverless.yml
service: my-serverless-app

provider:
  name: aws
  runtime: nodejs18.x
  region: us-east-1

functions:
  api:
    handler: handler.api
    events:
      - http:
          path: /{proxy+}
          method: ANY
          cors: true
    environment:
      DATABASE_URL: ${env:DATABASE_URL}

resources:
  Resources:
    ApiGateway:
      Type: AWS::ApiGateway::RestApi
      Properties:
        Name: MyAPI

Pros and Cons

Pros:

  • Unlimited scalability
  • Comprehensive service ecosystem
  • Fine-grained control
  • Enterprise features
  • Global infrastructure

Cons:

  • Complex pricing
  • Steep learning curve
  • Requires DevOps knowledge
  • Can be expensive for small apps

Platform Comparison Matrix

FeatureVercelNetlifyHerokuRenderAWSFree TierYes (generous)Yes (100GB)NoYes (limited)Yes (12 months)Static Sites⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐❌⭐⭐⭐⭐⭐⭐⭐Full-Stack Apps⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐DatabaseThird-partyThird-party⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐Pricing$$$$$$VariesLearning Curve⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐Scalability⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐

Cost Comparison Examples

Small Personal Project

  • Netlify: Free (under 100GB bandwidth)
  • Vercel: Free (under 100GB bandwidth)
  • Render: $7/month (web service)
  • AWS: $5-15/month (depends on usage)

Medium Business Application

  • Vercel: $20/month (Pro plan)
  • Netlify: $19/month (Pro plan)
  • Heroku: $25-50/month (was $7-25/month)
  • Render: $25-50/month
  • AWS: $50-200/month (highly variable)

Enterprise Application

  • Vercel: $150+/month (Enterprise)
  • Netlify: $99+/month (Business)
  • Heroku: $500+/month
  • Render: $200+/month
  • AWS: $500-5000+/month

Choosing the Right Platform

Decision Tree



Static Site Only?
├── Yes
│   ├── Need serverless functions?
│   │   ├── Yes → Vercel or Netlify
│   │   └── No → Netlify or AWS S3
│   └── No (Full-stack)
│       ├── Budget conscious?
│       │   ├── Yes → Render
│       │   └── No → Heroku or Vercel
│       └── Enterprise needs?
│           └── Yes → AWS or Azure

Use Case Recommendations

E-commerce Site:

  • Best: Vercel (Next.js) + Stripe + Planet Scale
  • Alternative: Netlify + Gatsby + Shopify

Blog/Portfolio:

  • Best: Netlify + Gatsby/Hugo
  • Alternative: Vercel + Next.js

SaaS Application:

  • Best: Render + PostgreSQL
  • Alternative: AWS ECS + RDS

MVP/Prototype:

  • Best: Vercel or Netlify
  • Alternative: Render

Enterprise App:

  • Best: AWS with proper architecture
  • Alternative: Azure or Google Cloud

Migration Strategies

From Heroku to Render



bash

# Export Heroku config
heroku config --shell > .env

# Create render.yaml
services:
  - type: web
    name: migrated-app
    env: node
    buildCommand: npm install
    startCommand: npm start

# Import database
pg_dump $HEROKU_DATABASE_URL | psql $RENDER_DATABASE_URL

From Traditional Hosting to Jamstack



yaml

# Before: Traditional LAMP stack
# After: Jamstack architecture

# Static generation
npm run build  # Generates static files

# API routes become serverless functions
# /api/users.php → /api/users.js (Vercel/Netlify function)

# Database queries move to API calls
// Before: Direct MySQL queries
// After: API calls to serverless functions

Best Practices

  1. Start Simple: Begin with platforms like Vercel/Netlify for learning
  2. Consider Growth: Plan for scaling needs
  3. Monitor Costs: Set up billing alerts
  4. Use CDNs: Most platforms include this
  5. Environment Management: Separate staging/production
  6. Backup Strategy: Don't rely solely on platform backups
  7. Performance Testing: Test under realistic loads

Security Considerations



javascript

// Environment variables (all platforms)
process.env.DATABASE_URL
process.env.JWT_SECRET
process.env.STRIPE_SECRET_KEY

// HTTPS (automatic on modern platforms)
// All platforms provide automatic SSL

// CORS setup (for API endpoints)
app.use(cors({
  origin: process.env.FRONTEND_URL,
  credentials: true
}));

// Rate limiting
app.use(rateLimit({
  windowMs: 15 * 60 * 1000, // 15 minutes
  max: 100 // limit each IP to 100 requests per windowMs
}));