# CDN Quickstart

Source: https://wraps.dev/docs/quickstart/cdn

# 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.

Run this quickstart with your AI agent

Paste into Claude Code, Cursor, or any agent with shell access.

Copy promptView

Using Claude Code? Install the Wraps skills for deeper context:

npx add-skill wraps-team/skills

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

terminal.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:

terminal.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:

terminal.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:

npmpnpmyarnbun

npm install @aws-sdk/client-s3

## 

4

Upload Files

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

upload.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:

images.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](https://wraps.dev/docs/cli-reference/cdn)

AWS Setup Guide

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

[View Guide](https://wraps.dev/docs/guides/aws-setup)

### Need Help?

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

[Get Help](https://github.com/wraps-team/wraps/discussions)