This guide assumes you know almost nothing about AWS yet.
Make this URL:
https://your-site.example/beta/
show a live directory listing from:
s3://your-bucket-name/beta/
You need an Amazon S3 bucket that stores your public files.
Example bucket:
www.example.com
Example folder/prefix:
beta/
Upload a few test files into that folder.
1. Open AWS Lambda.
2. Change the AWS region to US East (N. Virginia) / us-east-1.
3. Create a new function.
4. Runtime: Node.js.
5. File name: index.mjs.
6. Paste the code from:
lambda-edge-directory-browser/index.mjs
7. Edit BROWSABLE_PREFIX_CONFIGS for your bucket and folder.
8. Deploy the Lambda code.
Lambda@Edge needs a trust policy that allows both Lambda and Edge Lambda.
Use:
policies/lambda-edge-trust-policy.json
Your Lambda role needs permission to list only the public folders you want browsable.
Use:
policies/s3-list-prefix-policy-example.json
Edit the bucket names and prefixes.
CloudFront cannot use $LATEST.
You must publish a numbered version, such as:
:1
:2
:3
Copy the full version ARN.
In CloudFront:
1. Open your distribution.
2. Go to Behaviors.
3. Edit the behavior that serves your S3 files.
4. Add Lambda function association.
5. Event type: Origin request.
6. Include body: No.
7. Paste the published Lambda version ARN.
8. Save changes.
CloudFront deployments take a few minutes.
Then test:
https://your-site.example/beta/
For nicer source-file display, add:
cloudfront-function-headers/allow-all-cors-and-inline-text.js
Attach it as:
Viewer response → CloudFront Function
This makes .php and .md files display inline instead of downloading.
If you changed code but still see an old result, create a CloudFront invalidation:
/*
or only the folder:
/beta/