diff --git a/mdx-components.tsx b/mdx-components.tsx
index 485df6b47f7..850d1976829 100644
--- a/mdx-components.tsx
+++ b/mdx-components.tsx
@@ -15,6 +15,7 @@ import {
MDXTable
} from './src/components/MDXComponents';
import { MigrationAlert } from './src/components/MigrationAlert';
+import { PreviewBanner } from './src/components/PreviewBanner';
import preToCodeBlock from './src/utils/pre-to-code-block';
import { Overview } from './src/components/Overview';
import ExternalLink from './src/components/ExternalLink';
@@ -65,6 +66,7 @@ export function useMDXComponents(components: MDXComponents): MDXComponents {
Fragments,
InlineFilter,
MigrationAlert,
+ PreviewBanner,
YoutubeEmbed,
AIBanner,
Overview,
diff --git a/src/components/PreviewBanner/PreviewBanner.tsx b/src/components/PreviewBanner/PreviewBanner.tsx
new file mode 100644
index 00000000000..bb72c2b1b8b
--- /dev/null
+++ b/src/components/PreviewBanner/PreviewBanner.tsx
@@ -0,0 +1,26 @@
+import { Callout } from '@/components/Callout';
+import Link from 'next/link';
+import classNames from 'classnames';
+
+/**
+ * Shared preview notice for features that have not reached general
+ * availability. Rendered from one place so a feature's pages stay in sync and
+ * the notice can be removed in one change at GA.
+ */
+export const PreviewBanner = () => {
+ return (
+
+ This feature is in preview. It is not recommended for
+ production workloads yet, and APIs may change before general availability.
+ Share feedback or report issues on{' '}
+
+ GitHub
+
+ .
+
+ );
+};
diff --git a/src/components/PreviewBanner/__tests__/PreviewBanner.test.tsx b/src/components/PreviewBanner/__tests__/PreviewBanner.test.tsx
new file mode 100644
index 00000000000..13fca72c569
--- /dev/null
+++ b/src/components/PreviewBanner/__tests__/PreviewBanner.test.tsx
@@ -0,0 +1,21 @@
+import * as React from 'react';
+import { render, screen } from '@testing-library/react';
+import { PreviewBanner } from '../index';
+
+describe('PreviewBanner', () => {
+ it('should render the preview notice', async () => {
+ render();
+ expect(
+ await screen.findByText('This feature is in preview.')
+ ).toBeInTheDocument();
+ });
+
+ it('should link to GitHub issues for feedback', async () => {
+ render();
+ const link = await screen.findByRole('link', { name: 'GitHub' });
+ expect(link).toHaveAttribute(
+ 'href',
+ 'https://github.com/aws-amplify/amplify-backend/issues'
+ );
+ });
+});
diff --git a/src/components/PreviewBanner/index.ts b/src/components/PreviewBanner/index.ts
new file mode 100644
index 00000000000..816e213d321
--- /dev/null
+++ b/src/components/PreviewBanner/index.ts
@@ -0,0 +1 @@
+export { PreviewBanner } from './PreviewBanner';
diff --git a/src/pages/[platform]/deploy-and-host/self-hosting/define-hosting/index.mdx b/src/pages/[platform]/deploy-and-host/self-hosting/define-hosting/index.mdx
index b6767aa5b49..ec2e5377807 100644
--- a/src/pages/[platform]/deploy-and-host/self-hosting/define-hosting/index.mdx
+++ b/src/pages/[platform]/deploy-and-host/self-hosting/define-hosting/index.mdx
@@ -28,6 +28,8 @@ export function getStaticProps(context) {
};
}
+
+
In this guide, you will learn how to customize your self-hosted infrastructure with custom domains, WAF rules, compute and CDN configuration, custom adapters, and CDK escape hatches.
## Framework detection
diff --git a/src/pages/[platform]/deploy-and-host/self-hosting/define-pipeline/index.mdx b/src/pages/[platform]/deploy-and-host/self-hosting/define-pipeline/index.mdx
index 2689d09834b..0ac38db1201 100644
--- a/src/pages/[platform]/deploy-and-host/self-hosting/define-pipeline/index.mdx
+++ b/src/pages/[platform]/deploy-and-host/self-hosting/define-pipeline/index.mdx
@@ -28,6 +28,8 @@ export function getStaticProps(context) {
};
}
+
+
In this guide, you will learn how to define a CI/CD pipeline that automatically deploys your application on every push, with support for multi-stage deployments, approval gates, and bake times.
## Defining a basic pipeline
diff --git a/src/pages/[platform]/deploy-and-host/self-hosting/external-pipelines/index.mdx b/src/pages/[platform]/deploy-and-host/self-hosting/external-pipelines/index.mdx
index 589b7e90991..03e82c339eb 100644
--- a/src/pages/[platform]/deploy-and-host/self-hosting/external-pipelines/index.mdx
+++ b/src/pages/[platform]/deploy-and-host/self-hosting/external-pipelines/index.mdx
@@ -28,6 +28,8 @@ export function getStaticProps(context) {
};
}
+
+
In this guide, you will learn how to deploy your self-hosted application using GitHub Actions, GitLab CI, or any CI runner that can execute shell commands with AWS credentials.
## Understanding deployment flags
@@ -39,10 +41,12 @@ The `ampx deploy` command accepts flags that control which stacks are deployed:
| `--backend` | Deploy only the backend stack (auth, data, functions) |
| `--frontend` | Deploy only the frontend hosting stack |
| `--pipeline` | Deploy only the pipeline stack |
-| `--yes` (`-y`) | Skip the confirmation prompt — required in non-interactive CI |
+| `--yes` (`-y`) | Accept the preview confirmation prompt — required in non-interactive CI |
| (no flag) | Deploy all stacks |
-Pass `--yes` in every CI job: `ampx deploy` prompts for confirmation before running, and without it the command blocks waiting for input. `--backend` and `--frontend` are mutually exclusive — deploy the backend first, then the frontend, in separate steps. This ordering ensures `amplify_outputs.json` is generated before the frontend build bundles it.
+`ampx deploy` is a preview release, so it asks you to confirm before running: *ampx deploy is a PREVIEW release — not intended for production use. Do you want to continue?* In CI there is no one to answer, so pass `--yes` to accept the prompt; without it the command waits for input. Passing `--yes` does not change the preview status — keep deployments to non-production environments until general availability.
+
+`--backend` and `--frontend` are mutually exclusive — deploy the backend first, then the frontend, in separate steps. This ordering ensures `amplify_outputs.json` is generated before the frontend build bundles it.
## Deploying with GitHub Actions
@@ -78,10 +82,10 @@ jobs:
aws-region: us-east-1
- name: Deploy backend
- run: npx ampx deploy --identifier production --backend --yes
+ run: npx ampx deploy --identifier my-app --backend --yes
- name: Deploy frontend
- run: npx ampx deploy --identifier production --frontend --yes
+ run: npx ampx deploy --identifier my-app --frontend --yes
```
@@ -106,8 +110,8 @@ deploy:
before_script:
- npm ci
script:
- - npx ampx deploy --identifier production --backend --yes
- - npx ampx deploy --identifier production --frontend --yes
+ - npx ampx deploy --identifier my-app --backend --yes
+ - npx ampx deploy --identifier my-app --frontend --yes
variables:
AWS_REGION: us-east-1
```
@@ -122,8 +126,8 @@ The `ampx deploy` command works in any environment with Node.js and valid AWS cr
```bash title="Generic CI script"
npm ci
-npx ampx deploy --identifier production --backend --yes
-npx ampx deploy --identifier production --frontend --yes
+npx ampx deploy --identifier my-app --backend --yes
+npx ampx deploy --identifier my-app --frontend --yes
```
## Splitting backend and frontend across jobs
@@ -155,7 +159,7 @@ jobs:
with:
role-to-assume: arn:aws:iam::123456789012:role/GitHubActionsDeployRole
aws-region: us-east-1
- - run: npx ampx deploy --identifier production --backend --yes
+ - run: npx ampx deploy --identifier my-app --backend --yes
deploy-frontend:
runs-on: ubuntu-latest
@@ -171,7 +175,7 @@ jobs:
with:
role-to-assume: arn:aws:iam::123456789012:role/GitHubActionsDeployRole
aws-region: us-east-1
- - run: npx ampx deploy --identifier production --frontend --yes
+ - run: npx ampx deploy --identifier my-app --frontend --yes
```
## Environment-specific deployments
@@ -180,7 +184,7 @@ Use branch names or environment variables to deploy to different environments:
```yaml title=".github/workflows/deploy.yml"
- name: Deploy
- run: npx ampx deploy --identifier ${{ github.ref_name == 'main' && 'production' || 'staging' }} --yes
+ run: npx ampx deploy --identifier ${{ github.ref_name == 'main' && 'my-app' || 'my-app-staging' }} --yes
```
## Next steps
diff --git a/src/pages/[platform]/deploy-and-host/self-hosting/frameworks/index.mdx b/src/pages/[platform]/deploy-and-host/self-hosting/frameworks/index.mdx
index fbeff7da851..68e08012102 100644
--- a/src/pages/[platform]/deploy-and-host/self-hosting/frameworks/index.mdx
+++ b/src/pages/[platform]/deploy-and-host/self-hosting/frameworks/index.mdx
@@ -28,6 +28,8 @@ export function getStaticProps(context) {
};
}
+
+
When you call `defineHosting()`, the construct auto-detects your framework by inspecting `package.json` dependencies. Each framework maps to a specific build adapter that determines which hosting features are available.
## Detected frameworks
diff --git a/src/pages/[platform]/deploy-and-host/self-hosting/getting-started/index.mdx b/src/pages/[platform]/deploy-and-host/self-hosting/getting-started/index.mdx
index 6e9e10592c3..f45e8a3477b 100644
--- a/src/pages/[platform]/deploy-and-host/self-hosting/getting-started/index.mdx
+++ b/src/pages/[platform]/deploy-and-host/self-hosting/getting-started/index.mdx
@@ -28,6 +28,8 @@ export function getStaticProps(context) {
};
}
+
+
In this guide, you will learn how to install the hosting package, configure your first `defineHosting()` definition, and deploy your frontend to your own AWS account.
## Prerequisites
@@ -65,7 +67,7 @@ The framework is auto-detected from your `package.json`, so no framework configu
Run `ampx deploy` to synthesize and deploy both your backend and hosting stacks:
```bash title="Terminal"
-npx ampx deploy --identifier production
+npx ampx deploy --identifier my-app
```
The `--identifier` flag names your deployment environment. This command deploys everything: backend resources, the frontend build, and the hosting infrastructure (S3 bucket, CloudFront distribution, and compute layer).
@@ -77,7 +79,7 @@ Once complete, the CLI prints your CloudFront distribution URL where your applic
If your backend is already deployed and you only need to update the frontend:
```bash title="Terminal"
-npx ampx deploy --identifier production --frontend
+npx ampx deploy --identifier my-app --frontend
```
This skips the backend stack and only rebuilds and deploys your frontend assets.
diff --git a/src/pages/[platform]/deploy-and-host/self-hosting/index.mdx b/src/pages/[platform]/deploy-and-host/self-hosting/index.mdx
index 4f997f38a0a..d3c3172b8f6 100644
--- a/src/pages/[platform]/deploy-and-host/self-hosting/index.mdx
+++ b/src/pages/[platform]/deploy-and-host/self-hosting/index.mdx
@@ -32,6 +32,8 @@ export function getStaticProps(context) {
};
}
+
+
Self-managed hosting gives you full ownership of your frontend infrastructure. You deploy to your own AWS account using AWS CDK constructs, giving you complete control over Amazon S3 buckets, Amazon CloudFront distributions, Lambda@Edge functions, and every other resource in your stack.
## How it works
diff --git a/src/pages/[platform]/deploy-and-host/self-hosting/secrets-and-environment-variables/index.mdx b/src/pages/[platform]/deploy-and-host/self-hosting/secrets-and-environment-variables/index.mdx
index 05c7b49e376..16fc19d46e9 100644
--- a/src/pages/[platform]/deploy-and-host/self-hosting/secrets-and-environment-variables/index.mdx
+++ b/src/pages/[platform]/deploy-and-host/self-hosting/secrets-and-environment-variables/index.mdx
@@ -28,6 +28,8 @@ export function getStaticProps(context) {
};
}
+
+
Self-managed hosting distinguishes between three kinds of values you can make available to your server-side compute:
- **Plain environment variables** — non-sensitive literals baked into the CloudFormation template.