Legal noticePrivacy
Gaëtan Wittebolle.
UmamiContactFR
FR
← Guides
Claude Code, the guide
Chapter 14 / 22
  • 13The checklists
  • 14The services to put your app online

Part 5 · Going to production

The services to put your app online

Chapter 14 · 18 min reading

The eight services behind a SaaS, how to wire them up and what they cost, Claude API included (October 2026 prices).

Overview

A typical SaaS uses 7 to 8 services.

  1. Supabase: database + authentication + storage
  2. Vercel: hosting and deployment
  3. Domain name: your app's address (Namecheap, OVH, etc.)
  4. Stripe: payments and subscriptions
  5. Resend: transactional emails
  6. Upstash: rate limiting (anti-abuse)
  7. Claude API: generative AI (if your app uses AI)
  8. Sentry: error monitoring in production

They all have a free plan that's enough for development. You only pay once you go to production with real users.

Prerequisites: Docker and Node.js

Before setting up the services, you need two tools on your machine.

Docker (for the local database)

Docker runs a Supabase database on your computer during development. You never touch production data.

On macOS:

  1. Download Docker Desktop from docker.com/products/docker-desktop, free for individual use
  2. Install it like any other app
  3. Launch Docker Desktop, it runs in the background (whale icon in the menu bar)

On Windows:

  1. Download Docker Desktop from docker.com/products/docker-desktop
  2. The installer turns on WSL 2 (Windows Subsystem for Linux) if needed, accept
  3. Restart if asked, then launch Docker Desktop

Check that Docker is running:

docker --version

Docker Desktop uses RAM (2-4 GB). If your computer has less than 8 GB of RAM, it can slow things down. You can quit Docker when you're not developing.

Node.js (for development tools)

Node.js runs the project tools (Next.js server, Supabase migrations, etc.). You don't need it for Claude Code itself, but you can't do without it once you work on a real project.

On macOS, open Terminal and paste:

curl -fsSL https://fnm.vercel.app/install | bash && fnm install 24

Close and reopen Terminal, then check:

node --version

You should see v24.x.x. Node 24 is the LTS version and the one Vercel uses by default, so you might as well develop on the same one.

On Windows:

  1. Go to nodejs.org
  2. Download the LTS installer
  3. Run the installer and tick "Add to PATH" when asked
  4. Open PowerShell and type node --version

Common mistake on Windows: if node --version doesn't work after the install, restart your computer. PATH needs a restart to be picked up.

1. Supabase, database, Auth, Storage

Supabase bundles your PostgreSQL database, auth (login, register, OAuth) and file storage, with a web admin interface.

Setup steps

  1. Create an account on supabase.com
  2. Create a project (pick the region closest to your users, e.g. eu-west for France)
  3. Write down the URL and API keys (Dashboard → Settings → API)
  4. Locally, install the CLI: npx supabase init then npx supabase start (Docker must be running)

Environment variables

NEXT_PUBLIC_SUPABASE_URL=https://xxxxx.supabase.co
NEXT_PUBLIC_SUPABASE_ANON_KEY=eyJhbGci...
SUPABASE_SERVICE_ROLE_KEY=eyJhbGci...

Pricing

PlanPriceLimitsFor
Free$0/month500 MB storage, 50K users, 2 projectsDevelopment
Pro$25/month8 GB storage, 100K users, daily backupsProduction

Pausing: the Free plan pauses your project after 7 days without activity. Your users won't be able to log in. Move to Pro as soon as you have real users.

2. Vercel, hosting and deployment

Vercel hosts your Next.js app. Every git push triggers an automatic deploy, with no server to configure.

Setup steps

  1. Create an account on vercel.com (sign in with GitHub)
  2. Click "New Project" and import your GitHub repository
  3. Vercel detects automatically that it's Next.js
  4. Add your environment variables in Settings → Environment Variables
  5. First automatic deploy in 2 minutes

Key features

  • Deploy Preview: every Pull Request gets its own preview URL
  • Cron Jobs: scheduled tasks (sending emails, syncing, reminders) defined in vercel.json
  • Analytics: Web Vitals performance metrics

Pricing

PlanPriceLimitsFor
Hobby$0/monthPersonal non-commercial use, functions up to 60s, 1 cron/day maxTesting
Pro$20/monthUnlimited projects, functions up to 300s (800s with Fluid Compute), unlimited cronsProduction

3. Domain name

Your app's address (e.g. myapp.com), bought from any registrar.

Steps

  1. Pick a registrar: Namecheap, OVH, Gandi...
  2. Search for your domain name and buy it
  3. In Vercel: Settings → Domains → add your domain
  4. Copy the DNS records Vercel gives you into your registrar
  5. Wait 24-48h for DNS propagation

Pricing

  • .com: about €10/year (first year often discounted to €7)
  • .fr: about €10-12/year
  • .app: about €15/year
  • WhoisGuard (privacy protection): free at Namecheap

4. Stripe, payments

Stripe collects payments and manages your customers' subscriptions. You pay nothing monthly: Stripe takes a fee when someone pays.

Setup steps

  1. Create an account on stripe.com
  2. Turn on Test mode first (Dashboard → "Test mode" toggle)
  3. Create your products and prices (Products → Add product)
  4. Get your API keys (Developers → API keys)
  5. Set up the webhook: Developers → Webhooks → add your URL + /api/webhooks/stripe
  6. Locally: stripe listen --forward-to localhost:3000/api/webhooks/stripe

Environment variables

STRIPE_SECRET_KEY=sk_test_xxx
STRIPE_WEBHOOK_SECRET=whsec_xxx
STRIPE_PRICE_PRO_MONTHLY=price_xxx

Pricing

TypeCost
Stripe subscription$0, free as long as nobody pays
Fee per payment (Europe)1.5% + €0.25 per transaction
Stripe Billing (subscriptions)+0.7% of billed volume

Real cost: with 10 Pro customers at €29/month, Stripe takes about €5/month in total. That's negligible.

5. Resend, transactional emails

Resend sends your automatic emails (welcome, reminders, weekly recaps). It works with React Email so you can write templates as components.

Setup steps

  1. Create an account on resend.com
  2. Add your domain: Settings → Domains → Add domain
  3. Set up 3 DNS records at your registrar
  4. Verify the domain (a few minutes)
  5. Get your API key: API Keys → Create

Environment variable

RESEND_API_KEY=re_xxx

Pricing

PlanPriceLimits
Free$0/month3,000 emails/month, 1 day of log retention
Pro$20/month50,000 emails/month, full analytics

3,000 free emails/month is plenty to get started. Even with 100 active users, you stay within the free quota.

6. Upstash, rate limiting (anti-abuse)

A serverless Redis used to limit calls per user. Without it, a user could spam your AI API and cost you hundreds of dollars in tokens.

Setup steps

  1. Create an account on upstash.com
  2. Create a Redis database (region: eu-west-1)
  3. Get the URL and token (Database → Details)

Environment variables

UPSTASH_REDIS_REST_URL=https://xxx.upstash.io
UPSTASH_REDIS_REST_TOKEN=xxx

Pricing

  • Free: 500,000 commands/month. You'll probably never go over this quota, even with 1,000 users.
  • Pay-as-you-go: $0.2 per 100,000 commands beyond that.

7. Claude API (if your app uses AI)

This is what runs the AI generation in your app, and you pay for it per token.

Tokenjeton

The unit the API counts and bills. A common word is often one token, a long or rare word is several. Each call bills the tokens you send (input: system prompt, history, request) and the tokens produced (output: the answer, plus the model's reasoning). On every current model, an output token costs five times an input token.

Don't mix them up: your Claude subscription (Pro at $20/month, Max at $100 or $200/month) gives you Claude Code to build with. The API is a separate, pay-as-you-go service for putting AI inside your app. Since October 7, 2026, Max and Team include monthly API credits: $100 on Max 5x, $200 on Max 20x, $20 per standard Team seat and $100 per premium seat (pooled, capped at $500). They cover the API and the Agent SDK, not Claude Code, and they don't roll over from one month to the next. Free, Pro and Enterprise don't get them.

Steps

  1. Create an account on platform.claude.com (formerly console.anthropic.com)
  2. Add a payment method (required even for testing). On Max or Team, first check whether your included API credits cover your tests
  3. Create an API key
  4. Set a monthly spend limit in the billing settings, to avoid surprises

Environment variables

ANTHROPIC_API_KEY=sk-ant-xxx
# Exact model ID, copy it from the Models page in the docs
ANTHROPIC_MODEL=

Never hardcode the model ID. Every model has a retirement date, and after that date calls using its ID fail. Sonnet 4 and Opus 4 were retired on June 15, 2026, Opus 4.1 on August 5, 2026, and Sonnet 4.5 is retired on November 30, 2026. If your app calls claude-sonnet-4-5 in ten files, it breaks that day. Put the ID in ANTHROPIC_MODEL, read it in a single place in the code, and switching models becomes a variable change on Vercel.

Pricing (October 2026, in dollars per million tokens)

ModelInputOutputCache readWhat for
Haiku 5.5 (prompt ≤ 100K)$0.10$0.50$0.01Classifying, extracting, summarizing at volume
Haiku 5.5 (prompt > 100K)$0.50$2.50$0.05Same model, long-context tier
Sonnet 5.5$2$10$0.10Content generation, most features
Opus 5.5$4$20$0.20Multi-step reasoning
Fable 5.1$10$50$0.25The most capable, keep it for when the rest fails

Three levers to know from day one:

  • Prompt caching. If you send the same prompt start on every call (system prompt, instructions, examples), the API can cache it. Writing costs 1.25x the input price (5-minute cache, refreshed on each read) or 2x (1-hour cache). After that, every reread costs the price in the "Cache read" column. Minimum 512 tokens on the 5.5 models, below that nothing gets cached.
  • Batch. For anything that isn't real time (overnight reports, bulk processing), the Batch API costs 50% less, and it stacks with caching. Most batches finish in under an hour.
  • Effort. On the 5.5 models and Fable 5.1, internal reasoning (thinking) is always on and billed as output. For a simple task, lower the effort level (low or medium) instead of paying for reasoning you don't need.

What one generation costs

Take a content generation with 3 variants: about 2,000 input tokens (system prompt + request) and 3,000 output tokens.

ModelCalculationCost per generation
Haiku 5.52,000 × $0.10/M + 3,000 × $0.50/M~$0.002
Sonnet 5.52,000 × $2/M + 3,000 × $10/M~$0.034
Opus 5.52,000 × $4/M + 3,000 × $20/M~$0.068

These numbers don't include thinking. Leave some margin, especially on Opus 5.5.

With caching, you barely pay for the system prompt anymore. A 5,000-token system prompt on Sonnet 5.5 costs $0.01 per call without cache, and $0.0005 as a cache read.

Monthly estimate (Sonnet 5.5, 20 generations per user per month)

  • 10 active users: 200 generations, about $7/month
  • 100 active users: 2,000 generations, about $70/month
  • The same 100 users on Haiku 5.5: about $3.50/month

Set a spend limit in the console either way.

Recount if you sized your budget on an old model. Since Opus 4.7, the tokenizer splits the same text into about 30% more tokens. The API's token counting is free: run your real prompts through it before locking in your estimate.

8. Sentry, error monitoring

Sentry reports production errors as soon as they happen. Without it, you find out your app is crashing when a user emails you.

Steps

  1. Create an account on sentry.io
  2. Create a Next.js project
  3. Follow the setup wizard (it adds the config files automatically)

Environment variables

NEXT_PUBLIC_SENTRY_DSN=https://xxx@sentry.io/xxx
SENTRY_ORG=your-org
SENTRY_PROJECT=your-project
SENTRY_AUTH_TOKEN=sntrys_xxx

Pricing

  • Developer ($0/month): 5,000 errors/month, 1 user. Enough to get started.
  • Team ($26/month): 50,000 errors/month, unlimited users.

Cost recap

Development phase (0 users)

ServiceCost
Supabase Free$0
Vercel Hobby$0
.com domain~$0.80/month ($10/year)
Stripe$0 (no transactions)
Resend Free$0
Upstash Free$0
Claude API (your tests)~$2-5/month, $0 if your Max or Team API credits cover it
Sentry Developer$0
Claude subscription (Claude Code)$20 (Pro) to $200 (Max 20x)
Total dev phase~$25/month with Pro, ~$205/month with Max 20x

Infrastructure costs next to nothing during development. The only real cost is your Claude subscription. Pro at $20/month includes Claude Code. Max ($100 or $200) is for when you hit the usage limits, and it comes with API credits to test your app. What Claude Code uses in tokens, and how to cut it: chapter 19.

Production phase (10-50 users)

ServiceCost
Supabase Pro$25/month
Vercel Pro$20/month
Domain~$1/month
Stripe (fees)~$5/month
Resend Free$0
Upstash Free$0
Claude API (Sonnet 5.5)~$7-35/month
Sentry Developer$0
Total production~$60-90/month

The API line is based on section 7: 20 generations per user per month, at about $0.034 each.

Break-even: if your subscription is €29/month, 3 paying customers cover the infrastructure. From the 4th customer on, you're profitable.

Recommended setup order

Phase 1, development (day 1)

  1. Supabase → your database and auth work
  2. Vercel → your app deploys automatically
  3. Sentry → you see errors from the start

Phase 2, features (days 2-3)

  1. Resend → your automatic emails work
  2. Upstash → your API is protected against abuse
  3. Claude API → your AI is integrated (if relevant)

Phase 3, launch (day 4+)

  1. Stripe → your users can pay
  2. Domain → your app has its own address

Quick recipe for a first SaaS

If you're starting your very first project, don't try to plug everything in at once. You'll drown.

The minimal stack that scales to 1,000 users:

  • Supabase (database + auth): $25/month
  • Vercel (hosting): $20/month if you move to Pro, free otherwise
  • Resend (emails): free up to 3,000 emails/month
  • Stripe (payments): $0 fixed, fees only

Total budget: about $25/month at the start, going up to $45/month when you move Vercel to Pro. The rest (Upstash, Sentry, Claude API, custom domain) comes when you need it, not before.

Question

You're on Max 5x, with $100 of API credits per month since October 7, 2026. What do those credits pay for?

Pick an answer to see the explanation.

Key takeaways

  • During development, your only real cost is the Claude subscription. In production, 3 customers at €29 cover the infrastructure.
  • Sonnet 5.5 for most features, Haiku 5.5 for volume, caching and batch whenever you can. The model ID goes in an environment variable.
  • Max and Team API credits pay for your app, not for Claude Code.

End-of-part quiz

Part 5: Going to production

6 questions. You pass the part with 5 correct answers or more.

  1. 1/6 You grab your Stripe secret key to develop locally. Your project is on GitHub. Where do you put its value?
  2. 2/6 Your feature works on localhost, and typecheck and build both pass. Before you commit, what does the checklist ask for?
  3. 3/6 Auto mode blocks a command you know is safe. How do you unblock it?
  4. 4/6 Your app generates content with the Claude API. You want to cap how many calls a single user can make, so nobody blows up your bill. Which service handles that?
  5. 5/6 To move fast, Claude hardcoded the exact model ID in ten files of your app. What problem is that setting up?
  6. 6/6 Your first real users are coming in, and your Supabase project is still on the Free plan. What's the risk?

0 of 6 answered

Sources

  • Claude API pricing
  • Prompt caching (API)
  • Platform release notes (model launches and retirements)
  • API credits included in subscriptions
← Chapter 13

The checklists

Chapter 15 →

Create visuals: artifacts, Design, Slides and images