Static Assets (CloudFront/S3)

Guide to hosting and accessing static images and videos from AWS S3 with CloudFront CDN for optimal performance, scalability, and global delivery.

CloudFront CDN Configured

Your application is configured to use CloudFront CDN for static assets.

Current Configuration:

https://d1zmvuaonqb46v.cloudfront.net

Overview

HSA Self Help Tools uses AWS S3 for storing static assets (images, videos) and CloudFront as a Content Delivery Network (CDN) to serve these assets globally with low latency and high performance.

AWS S3 Storage

Scalable, secure object storage for all static assets

CloudFront CDN

Global content delivery with edge caching

High Performance

Fast delivery with automatic optimization

Environment Configuration

Required Environment Variable

Set the CLOUDFRONT_URL environment variable to your CloudFront distribution URL:

# .env.local (for local development)
CLOUDFRONT_URL=https://d1234567890abc.cloudfront.net

# Or use NEXT_PUBLIC_ prefix for client-side access
NEXT_PUBLIC_CLOUDFRONT_URL=https://d1234567890abc.cloudfront.net

Note: Use CLOUDFRONT_URL for server-side only access (recommended for security). Use NEXT_PUBLIC_CLOUDFRONT_URL if you need client-side access.

Usage Examples

Using the CloudFrontUrlUtil Helper

import { CloudFrontUrlUtil } from '@/utils/cloudfrontUtils';

// Get full URL for an asset
const imageUrl = CloudFrontUrlUtil.getAssetUrl('/images/banner.jpg');
// Returns: "https://d1234567890abc.cloudfront.net/images/banner.jpg"

// Get multiple asset URLs
const urls = CloudFrontUrlUtil.getAssetUrls([
  '/images/logo.png',
  '/videos/intro.mp4',
  '/images/hero-bg.jpg'
]);

// Check if CloudFront is configured
if (CloudFrontUrlUtil.isConfigured()) {
  console.log('CDN is ready');
}

Using with Next.js Image Component

import Image from 'next/image';
import { CloudFrontUrlUtil } from '@/utils/cloudfrontUtils';

export default function MyComponent() {
  const imagePath = '/images/product-photo.jpg';
  const imageUrl = CloudFrontUrlUtil.getAssetUrl(imagePath);

  return (
    <Image
      src={imageUrl}
      alt="Product Photo"
      width={800}
      height={600}
      priority
    />
  );
}

Using with Video Element

import { CloudFrontUrlUtil } from '@/utils/cloudfrontUtils';

export default function VideoPlayer() {
  const videoUrl = CloudFrontUrlUtil.getAssetUrl('/videos/tutorial.mp4');

  return (
    <video 
      src={videoUrl}
      controls
      className="w-full rounded-lg"
    >
      Your browser does not support the video tag.
    </video>
  );
}

Background Images in CSS

import { CloudFrontUrlUtil } from '@/utils/cloudfrontUtils';

export default function HeroSection() {
  const bgUrl = CloudFrontUrlUtil.getAssetUrl('/images/hero-background.jpg');

  return (
    <div 
      className="h-screen bg-cover bg-center"
      style={{ backgroundImage: `url('${bgUrl}')` }}
    >
      {/* Content */}
    </div>
  );
}

File Organization

Recommended S3 Structure

s3://your-bucket/
├── images/
│   ├── logos/
│   │   ├── hsa-logo.png
│   │   └── hsa-logo.svg
│   ├── banners/
│   │   ├── home-hero.jpg
│   │   └── about-banner.jpg
│   └── products/
│       ├── product-001.jpg
│       └── product-002.jpg
├── videos/
│   ├── intro/
│   │   └── welcome.mp4
│   └── tutorials/
│       ├── tutorial-01.mp4
│       └── tutorial-02.mp4
└── documents/
    └── pdfs/
        └── guide.pdf

Best Practices

Use descriptive filenames: Use clear, lowercase names with hyphens (e.g., product-image-large.jpg)
Optimize images: Compress images before uploading to reduce file size and improve load times
Use appropriate formats: JPEG for photos, PNG for graphics with transparency, WebP for modern browsers
Set proper cache headers: Configure CloudFront to cache static assets for optimal performance
Version your assets: Use versioning or cache-busting techniques when updating existing files

Supported Image Formats

JPEG (.jpg, .jpeg) - Photos and complex images
PNG (.png) - Graphics with transparency
SVG (.svg) - Vector graphics and logos
WebP (.webp) - Modern, optimized format
GIF (.gif) - Animations

Supported Video Formats

MP4 (.mp4) - Widely supported, recommended
WebM (.webm) - Open format, good compression
MOV (.mov) - Apple QuickTime format
OGG (.ogg, .ogv) - Open source format

UI Documentation

Back to UI documentation hub

Support

Get help with asset hosting

All Documentation

Browse all documentation

Government officials will never ask you to transfer money or disclose bank log-in details over a phone call.