docs(self-hosting): restore preview banner

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,

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 (
+    <Callout info>
+      <strong>This feature is in preview.</strong> It is not recommended for
+      production workloads yet, and APIs may change before general availability.
+      Share feedback or report issues on{' '}
+      <Link
+        href="https://github.com/aws-amplify/amplify-backend/issues"
+        passHref
+        className={classNames('amplify-link')}
+      >
+        GitHub
+      </Link>
+      .
+    </Callout>
+  );
+};

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(<PreviewBanner />);
+    expect(
+      await screen.findByText('This feature is in preview.')
+    ).toBeInTheDocument();
+  });
+
+  it('should link to GitHub issues for feedback', async () => {
+    render(<PreviewBanner />);
+    const link = await screen.findByRole('link', { name: 'GitHub' });
+    expect(link).toHaveAttribute(
+      'href',
+      'https://github.com/aws-amplify/amplify-backend/issues'
+    );
+  });
+});

src/components/PreviewBanner/index.ts

@@ -0,0 +1 @@
+export { PreviewBanner } from './PreviewBanner';

src/pages/[platform]/deploy-and-host/self-hosting/define-hosting/index.mdx

@@ -28,6 +28,8 @@ export function getStaticProps(context) {
   };
 }
 
+<PreviewBanner />
+
 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

src/pages/[platform]/deploy-and-host/self-hosting/define-pipeline/index.mdx

@@ -28,6 +28,8 @@ export function getStaticProps(context) {
   };
 }
 
+<PreviewBanner />
+
 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

src/pages/[platform]/deploy-and-host/self-hosting/external-pipelines/index.mdx

@@ -28,6 +28,8 @@ export function getStaticProps(context) {
   };
 }
 
+<PreviewBanner />
+
 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
 ```
 
 <Callout>
@@ -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

src/pages/[platform]/deploy-and-host/self-hosting/frameworks/index.mdx

@@ -28,6 +28,8 @@ export function getStaticProps(context) {
   };
 }
 
+<PreviewBanner />
+
 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

src/pages/[platform]/deploy-and-host/self-hosting/getting-started/index.mdx

@@ -28,6 +28,8 @@ export function getStaticProps(context) {
   };
 }
 
+<PreviewBanner />
+
 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.

src/pages/[platform]/deploy-and-host/self-hosting/index.mdx

@@ -32,6 +32,8 @@ export function getStaticProps(context) {
   };
 }
 
+<PreviewBanner />
+
 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

src/pages/[platform]/deploy-and-host/self-hosting/secrets-and-environment-variables/index.mdx

@@ -28,6 +28,8 @@ export function getStaticProps(context) {
   };
 }
 
+<PreviewBanner />
+
 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.