Setup Default Root Object (index.html) for CloudFront

CloudFront's "Default Root Object" only applies to /, not subdirectories. When accessing /whats-new, CloudFront doesn't append index.html.

Use a CloudFront Function to rewrite requests. Steps:

Solution: Add a CloudFront Function

1. Create a CloudFront Function:

• Go to CloudFront Console → Functions
• Click "Create function"
• Name: append-index-html (or similar)
• Function code:

function handler(event) {
    var request = event.request;
    var uri = request.uri;
    
    // Check whether the URI is missing a file name.
    if (uri.endsWith('/')) {
        request.uri += 'index.html';
    }
    // Check whether the URI is missing a file extension.
    else if (!uri.includes('.')) {
        request.uri += '/index.html';
    }
    
    return request;
}

1. Associate the Function with your Distribution:

• Go to your CloudFront distribution → Behaviors
• Edit the default behavior (or create/edit the behavior for your paths)
• Scroll to "Function associations"
• Under "Viewer request", select the function you created
• Save changes

1. Publish the Function:

• Go back to Functions
• Select your function
• Click "Publish" to associate it with a CloudFront distribution

1. Wait for Deployment:

• CloudFront will deploy the changes (usually 5-15 minutes)