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.

Prerequisites

Before you begin, make sure you have:

  • Node.js 20 or later installed
  • An AWS account with valid credentials configured
  • AWS CLI installed and configured (or AWS credentials in environment variables)
  • (Optional) A domain for custom CDN URLs

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