Wraps Logo
DocsHome
CDN Quickstart

Get Started with CDN

Deploy S3 + CloudFront CDN infrastructure to your AWS account in under 2 minutes. Get global CDN delivery with browser-based image optimization.

Pricing: Free to use. You pay AWS directly for storage (~$0.023/GB/month) and bandwidth (~$0.085/GB). A typical setup costs ~$5-7/month for 10GB storage + 50GB bandwidth.

Before You Start: AWS Credentials Required

Every command below runs against your AWS account. Before running anything, make sure you have:

  • Node.js 20 or later installed
  • AWS credentials available to the CLI — AWS_ACCESS_KEY_ID and AWS_SECRET_ACCESS_KEY environment variables, a configured profile via aws configure, or an active aws sso login session
  • (Optional) A domain for custom CDN URLs
GNU Bashterminal.sh
# Option A: environment variablesexport AWS_ACCESS_KEY_ID=AKIA...export AWS_SECRET_ACCESS_KEY=...export AWS_REGION=us-east-1# Option B: AWS CLI profileaws configure# Option C: AWS SSOaws sso login

Missing credentials fail after the first prompt

If credentials aren't configured, the CLI still starts and asks its telemetry question before failing with a credentials error. Set up credentials first to avoid the confusing dead end.

What you'll build

  • S3 bucket + CloudFront distribution for global CDN delivery
  • Custom domain with an auto-provisioned SSL certificate
  • Browser-based image optimization via query parameters

Time: ~5 minutes

1
Deploy Infrastructure

Run the Wraps CLI to deploy CDN infrastructure to your AWS account:

GNU Bashterminal.sh
npx @wraps.dev/cli cdn init

What happens during deployment?

  • Validates your AWS credentials
  • Prompts for custom domain (optional)
  • Shows estimated monthly AWS costs
  • Creates S3 bucket with CORS configured
  • Deploys CloudFront distribution for global CDN
  • Sets up Origin Access Control for secure S3 access
  • Takes 2-3 minutes to complete

2
Add Custom Domain (Optional)

If you specified a custom domain during init, add the DNS records shown by the CLI. Then verify and upgrade:

GNU Bashterminal.sh
# Verify DNS records are configurednpx @wraps.dev/cli cdn verify# Once verified, add domain to CloudFrontnpx @wraps.dev/cli cdn upgrade

Without a custom domain, you can still use the CloudFront URL (e.g., d1234abcd.cloudfront.net).

3
Install AWS SDK

Install the AWS SDK to upload files programmatically:

npm install @aws-sdk/client-s3

4
Upload Files

Upload files to your S3 bucket. They'll be automatically served through CloudFront CDN:

TypeScriptupload.ts
import { S3Client, PutObjectCommand } from '@aws-sdk/client-s3';// Initialize the S3 clientconst s3 = new S3Client({ region: 'us-east-1' });// Upload a fileconst result = await s3.send(new PutObjectCommand({  Bucket: 'wraps-cdn-123456789012', // From 'wraps cdn status'  Key: 'images/hero.webp',  Body: buffer,  ContentType: 'image/webp',  CacheControl: 'public, max-age=31536000, immutable',}));console.log('Uploaded:', result);// Access via CDN: https://cdn.yourdomain.com/images/hero.webp

Tip: Get your bucket name

Run npx @wraps.dev/cli cdn status to see your S3 bucket name, CDN domain, and usage statistics.

5
Use Image Optimization (Optional)

CloudFront includes browser-based image optimization. Just add query parameters to your CDN URLs:

Reactimages.tsx
// Browser-based image optimization// Just add query params to your CDN URL:// Original imageconst original = 'https://cdn.yourdomain.com/images/hero.webp';// Resize to 800px width, auto heightconst resized = 'https://cdn.yourdomain.com/images/hero.webp?width=800';// Convert to WebP with quality 80const optimized = 'https://cdn.yourdomain.com/images/hero.webp?format=webp&quality=80';// Thumbnail: 200x200, croppedconst thumbnail = 'https://cdn.yourdomain.com/images/hero.webp?width=200&height=200&fit=cover';// Next.js Image component example<Image  src="https://cdn.yourdomain.com/images/hero.webp"  alt="Hero"  width={1200}  height={600}  loader={({ src, width, quality }) =>    `${src}?width=${width}&quality=${quality || 75}&format=webp`  }/>

Supported parameters: width, height, quality, format, fit.

Next Steps

CDN CLI Reference

Learn about all CDN commands: init, status, verify, upgrade, sync, and destroy.

View CLI Docs
AWS Setup Guide

Need help setting up AWS credentials? Check our setup guide.

View Guide

Need Help?

If you run into any issues, check our GitHub discussions or open an issue.

Get Help