You are here: Beginner Quickstart.
Why this page exists: The shortest path from package to working deployment.

Quickstart for Beginners

This guide assumes you know almost nothing about AWS yet.

Goal

Make this URL:

https://your-site.example/beta/

show a live directory listing from:

s3://your-bucket-name/beta/

Step 1: Create or choose your S3 bucket

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.

Step 2: Create the Lambda function

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.

Step 3: Fix the Lambda role trust policy

Lambda@Edge needs a trust policy that allows both Lambda and Edge Lambda.

Use:

policies/lambda-edge-trust-policy.json

Step 4: Add S3 ListBucket permission

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.

Step 5: Publish a Lambda version

CloudFront cannot use $LATEST.

You must publish a numbered version, such as:

:1
:2
:3

Copy the full version ARN.

Step 6: Attach Lambda@Edge to CloudFront

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.

Step 7: Wait and test

CloudFront deployments take a few minutes.

Then test:

https://your-site.example/beta/

Optional: add the CloudFront Function

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.

Step 8: Invalidate if needed

If you changed code but still see an old result, create a CloudFront invalidation:

/*

or only the folder:

/beta/

Where to go next