-
Notifications
You must be signed in to change notification settings - Fork 207
docs: add additional behaviors for layout stability in CloudFront configuration #1095
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Changes from all commits
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change | ||
---|---|---|---|---|
|
@@ -8,24 +8,24 @@ | |||
|
||||
To host your documentation at a `/docs` subpath using AWS Route 53 and CloudFront, you need to configure your DNS provider to point to your CloudFront distribution. | ||||
|
||||
## Proxies with Vercel deployments | ||||
|
||||
If you use AWS CloudFront as a proxy with Vercel deployments, you must configure CloudFront to avoid interfering with Vercel's domain verification and SSL certificate provisioning. | ||||
Check warning on line 13 in advanced/subpath/route53-cloudfront.mdx
|
||||
|
||||
Improper CloudFront configuration can prevent Vercel from provisioning Let's Encrypt SSL certificates and cause domain verification failures. | ||||
|
||||
### Required path allowlist | ||||
|
||||
CloudFront must allow traffic to these specific paths without caching or blocking: | ||||
|
||||
- `/.well-known/acme-challenge/*` - Required for Let's Encrypt certificate verification | ||||
- `/.well-known/vercel/*` - Required for Vercel domain verification | ||||
|
||||
These paths should be configured to bypass CloudFront caching and pass through directly to your origin. | ||||
|
||||
### Header forwarding requirements | ||||
|
||||
You must create a custom origin request policy that forwards the `HOST` header and client IP information correctly. This is critical for Vercel's verification processes. | ||||
|
||||
1. Create a custom origin request policy named `VercelCloudFrontProxy`. | ||||
2. Include the `Origin` and `CloudFront-Viewer-Address` headers. | ||||
|
@@ -67,9 +67,9 @@ | |||
2. Find your staging URL that mirrors the main domain. This is highly variant depending on how your landing page is hosted. For example, the Mintlify staging URL is [mintlify-landing-page.vercel.app](https://mintlify-landing-page.vercel.app). | ||||
|
||||
<Info> | ||||
If your landing page is hosted on Webflow, use Webflow's staging URL. It would look like `.webflow.io`. | ||||
Check warning on line 70 in advanced/subpath/route53-cloudfront.mdx
|
||||
|
||||
If you use Vercel, use the `.vercel.app` domain available for every project. | ||||
</Info> | ||||
|
||||
3. Create a new Origin and add your staging URL as the "Origin domain". | ||||
|
@@ -86,7 +86,7 @@ | |||
|
||||
## Set behaviors | ||||
|
||||
Behaviors in CloudFront enable control over the subpath logic. At a high level, we're looking to create the following logic. | ||||
|
||||
- **If a user lands on /docs**, go to `[SUBDOMAIN].mintlify.dev`. | ||||
- **If a user lands on any other page**, go the current landing page. | ||||
|
@@ -101,7 +101,7 @@ | |||
|
||||
### `/.well-known/*` | ||||
|
||||
Create behaviors for Vercel domain verification paths with a **Path pattern** of `/.well-known/*` and set **Origin and origin groups** to your docs URL. | ||||
|
||||
For "Cache policy", select **CachingDisabled** to ensure these verification requests pass through without caching. | ||||
|
||||
|
@@ -110,8 +110,8 @@ | |||
</Frame> | ||||
|
||||
<Info> | ||||
If `.well-known/*` is too generic, it can be narrowed down to 2 behaviors at a minimum for Vercel: | ||||
- `/.well-known/vercel/*` - Required for Vercel domain verification | ||||
- `/.well-known/acme-challenge/*` - Required for Let's Encrypt certificate verification | ||||
</Info> | ||||
|
||||
|
@@ -158,6 +158,29 @@ | |||
|
||||
2. Select **Save changes**. | ||||
|
||||
### Additional behaviors for layout stability | ||||
|
||||
To prevent layout shifts and ensure smooth navigation, add these additional behaviors for static asset handling: | ||||
|
||||
#### `/mintlify-assets/_next/static/*` | ||||
|
||||
Create a behavior with a **Path pattern** of `/mintlify-assets/_next/static/*` to serve static assets efficiently: | ||||
|
||||
- Set **Origin and origin groups** to your `.mintlify.dev` URL | ||||
- Set **Cache policy** to **CachingOptimized** | ||||
- Set **Origin request policy** to **AllViewerExceptHostHeader** | ||||
|
||||
This behavior should be ordered **above** the default behavior in your behaviors list, as CloudFront evaluates them in order. | ||||
|
||||
#### Update default behavior for app router navigation | ||||
|
||||
For your **Default (*)** behavior, ensure these settings to handle HTML and app router navigation properly: | ||||
|
||||
- Set **Cache policy** to **CachingDisabled** (since RSC ?_rsc= payloads vary and shouldn't be cached) | ||||
- Set **Origin request policy** to **AllViewerExceptHostHeader** | ||||
|
||||
These configurations prevent the sidenav from snapping up and down during navigation by ensuring only the new page's MDX content is fetched while keeping layout assets stable. | ||||
|
||||
### Check behaviors are set up correctly | ||||
|
||||
If you follow the above steps, your behaviors should look like this: | ||||
|
@@ -208,4 +231,4 @@ | |||
|
||||
Your documentation is now live at `/docs` for your primary domain. | ||||
|
||||
<Propagating /> | ||||
<Propagating /> | ||||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
Suggested change
Can this be deleted? Not sure what it is and I think it's an artifact from the writer bot. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Are these steps only applicable to some users or should everyone set these behaviors?
If everyone should do it, I'd remove this section and raise all the H4s to H3s so that it doesn't seem like these are extra optional settings.