Skip to content

docs: add CloudFront WAF example#6323

Open
Apoorvjain09 wants to merge 5 commits intoanomalyco:devfrom
Apoorvjain09:docs/cloudfront-waf
Open

docs: add CloudFront WAF example#6323
Apoorvjain09 wants to merge 5 commits intoanomalyco:devfrom
Apoorvjain09:docs/cloudfront-waf

Conversation

@Apoorvjain09
Copy link

@Apoorvjain09 Apoorvjain09 commented Jan 12, 2026

What this does

Adds an example showing how to associate an AWS WAF Web ACL with a
CloudFront distribution created by sst.aws.Nextjs.

Why this is needed

For CloudFront, WAF must be attached at distribution creation time using
webAclId. This differs from the ALB / API Gateway pattern and was not
previously documented, making it easy to get wrong.

Closes #6319

Copy link
Collaborator

@vimtor vimtor left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

thanks for your contribution @Apoorvjain09

i left some comments with errors i found

export default $config({
app(input) {
return {
name: "sst-v3",
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

rename this to:

Suggested change
name: "sst-v3",
name: "aws-cloudfront-waf",

Comment on lines 51 to 53
const site = new sst.aws.Nextjs("NextjsSite", {
path: "web/",
transform: {
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this gives the following error:

Image

you might want to use a simple StaticSite or add a real Next.js site to the example

*
* The WAF is configured using AWS managed rules and is attached to the
* CloudFront distribution at creation time.
*
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

the docs don't render properly for this example:

Image

probably because of the different indentation

follow the README to test the docs locally

@Apoorvjain09
Copy link
Author

Thanks for the feedback and for pointing these out 🙂

I’ve updated the example to:

  • Rename the app from sst-v3 to aws-cloudfront-waf
  • Switch from NextjsSite to a simple StaticSite so the example runs without requiring a full Next.js setup
  • Fix the indentation in the doc comment so it renders correctly in the docs

I initially kept the changes limited to sst.config.ts to focus on the CloudFront + WAF attachment pattern, but I’m happy to adjust further if anything else should be structured differently.

Copy link
Collaborator

@vimtor vimtor left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Image

working, i left a final comment @Apoorvjain09

});

const site = new sst.aws.StaticSite("Site", {
buildOutput: "public",
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
buildOutput: "public",
path: "public",

could you create a folder with public/index.html to complete the example?

@Apoorvjain09
Copy link
Author

Done 👍 @vimtor

Switched to path: "public" and added a minimal public/index.html so the example runs out of the box.

@vimtor
Copy link
Collaborator

vimtor commented Jan 16, 2026

the index.html should be inside the public folder

@Apoorvjain09
Copy link
Author

Done 👍 @vimtor
Moved index.html into the public/ folder.

Copy link
Collaborator

@vimtor vimtor left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

thanks for your contribution!

@vimtor
Copy link
Collaborator

vimtor commented Feb 4, 2026

we should wait for #6379

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Add an example for associating an AWS WAF Web ACL with a CloudFront distribution

2 participants