update fullstack branching docs

cspell.json

@@ -1597,7 +1597,9 @@
     "awscliv",
     "identitystore",
     "esac",
-    "voteField"
+    "voteField",
+    "ampx",
+    "autodetection"
   ],
   "flagWords": ["hte", "full-stack", "Full-stack", "Full-Stack", "sudo"],
   "patterns": [

src/pages/[platform]/deploy-and-host/fullstack-branching/branch-deployments/index.mdx

@@ -37,14 +37,14 @@ After you've deployed your [first branch](/[platform]/start/quickstart/), you ca
 
 1. Log in to the [Amplify console](https://console.aws.amazon.com/amplify/home) and choose your app.
 
-2. Navigate to **App settings > Repository settings** and enable **Branch auto-detection** and **Branch auto-disconnection**. The following video uses the default settings, which will connect any branch in your repo automatically. Branch auto-disconnection will ensure that if you delete a branch from your repository, the branch will also be deleted.
+2. Navigate to **App settings > Branch settings**, select **Edit** and enable **Branch auto-detection** and **Branch auto-disconnection**. The following video uses the default settings, which will connect any branch in your repo automatically. Branch auto-disconnection will ensure that if you delete a branch from your repository, the branch will also be deleted.
 
 <Callout>
 You can also define a pattern to connect only certain branches. For example, setting `dev`, `staging`, and `feature/*` will automatically connect all three branch types. Your `dev` and `staging` branches, as well as any branch that begins with `feature/`, will be connected.
 </Callout>
 
 <video autoPlay={true} muted={true} loop={true} width="100%" playsInline={true}>
-  <source src="/images/gen2/fullstack-branching/autobranch.mp4" />
+  <source src="/images/gen2/fullstack-branching/Enable-branch-autodetection.mp4" />
 </video>
 
 3. Push a commit to your `feature/A` and `staging` branches that match the pattern. You should start seeing deployments on the console page. You will now have three fullstack branches deployed.
@@ -80,7 +80,7 @@ You can generate the config for a branch environment by running:
 For Web and React Native, generating the config with the default format and output directory.
 
 ```bash title="Terminal" showLineNumbers={false}
-npx ampx generate outputs --app-id <your-amplify-app-id> --branch main --out-dir path/to/config
+npx ampx generate outputs --app-id <your-amplify-app-id> --branch <your-git-branch-name> --out-dir <path/to/config>
 ```
 </InlineFilter>
 
@@ -91,17 +91,17 @@ npx ampx generate outputs --app-id <your-amplify-app-id> --branch main --out-dir
 </Callout>
 
 ```bash title="Terminal" showLineNumbers={false}
-npx ampx generate outputs --app-id <your-amplify-app-id> --branch main --out-dir app/src/main/res/raw
+npx ampx generate outputs --app-id <your-amplify-app-id> --branch <your-git-branch-name> --format json-mobile --out-dir app/src/main/res/raw
 ```
 </InlineFilter>
 <InlineFilter filters={['flutter']}>
 ```bash title="Terminal" showLineNumbers={false}
-npx ampx generate outputs --app-id <your-amplify-app-id> --branch main --format dart --out-dir lib
+npx ampx generate outputs --app-id <your-amplify-app-id> --branch <your-git-branch-name> --format dart --out-dir lib
 ```
 </InlineFilter>
 <InlineFilter filters={['swift']}>
 ```bash title="Terminal" showLineNumbers={false}
-npx ampx generate outputs --app-id <your-amplify-app-id>
+npx ampx generate outputs --app-id <your-amplify-app-id> --branch <your-git-branch-name> --format=json-mobile
 ```
 
 Once the sandbox environment is running, you would also generate the configuration file for your application. However, Xcode won't recognize the file by default. To recognize the files, you need to drag and drop the generated configuration file to your project.

src/pages/[platform]/deploy-and-host/fullstack-branching/cross-account-deployments/index.mdx

@@ -41,64 +41,50 @@ This guide walks you through how to create a trunk-based, multi-region deploymen
 
 Please refer to this Amazon CodeCatalyst [guide](https://docs.aws.amazon.com/codecatalyst/latest/userguide/setting-up-topnode.html) for a detailed step-by-step walkthrough to set up your [space](https://docs.aws.amazon.com/codecatalyst/latest/userguide/spaces.html).
 
-### Step 2: Deploy an app using Amplify Gen 2
+### Step 2: Deploy a fullstack Amplify Gen 2 app
 
+- Use our [**Next.js starter template**](/[platform]/start/quickstart/nextjs-pages-router/#1-create-the-repository) to create a repository in your GitHub account.
 - Sign in to the [AWS Management Console](https://console.aws.amazon.com/).
-- Navigate to the [app creation page](https://us-west-2.console.aws.amazon.com/amplify/create) for Amplify Gen 2.
-- Select the **Next.js-Amplify starter** app, then select **Next**.
+- Navigate to the Amplify console and select [**Create new app**](https://us-west-2.console.aws.amazon.com/amplify/create).
+- Select the **next-pages-template** repository, then select **Next**.
 - Review the details on the **Create Git Repository** page, then select **Save and deploy**.
-- Done! You have successfully deployed a Gen 2 app. You can review the status of the app deployment in the Amplify Gen 2 console.
+- Done! You have successfully deployed a fullstack Gen 2 app. You can review the status of the app deployment in the Amplify console.
 
 ![Screenshot of completed deployment in AWS Amplify Gen 2 console](images/gen2/cross-account-deployments/pipeline1.png)
 
 ### Step 3: Update build specification
 
-Add the `npx ampx generate outputs --branch $AWS_BRANCH --app-id $AWS_APP_ID` command to the build spec and comment out the `npx ampx pipeline-deploy --branch $AWS_BRANCH --app-id $AWS_APP_ID` command. `ampx pipeline-deploy` runs a script to deploy backend updates, while `ampx generate config` fetches the latest `amplify_outputs.json` for the specified environment.
+Add the `npx ampx generate outputs --branch $AWS_BRANCH --app-id $AWS_APP_ID` command to the build spec and comment out the `npx ampx pipeline-deploy --branch $AWS_BRANCH --app-id $AWS_APP_ID` command. `ampx pipeline-deploy` runs a script to deploy backend updates, while `ampx generate outputs` fetches the latest `amplify_outputs.json` for the specified environment.
 
 ![Screenshot of Build image settings section in AWS Amplify Gen 2 console, with details about the app build specification](images/gen2/cross-account-deployments/pipeline10.png)
 
 ### Step 4: Disable automatic builds on the branch
 
-You can configure Amplify to disable automatic builds on every code commit. Navigate to the app in the Amplify Gen 2 console. Under **App settings**, select **Repository settings**. From the **Branches** section, select the branch and then choose **Disable auto build** from the **Actions** dropdown menu.
+You can configure Amplify to disable automatic builds on every code commit. Navigate to the app in the Amplify console. Under **App settings**, select **Branch settings**. From the **Branches** section, select the branch and then choose **Disable auto build** from the **Actions** dropdown menu.
 
-![Screenshot of the Repository settings section in the Amplify Gen 2 console, highlighting the selection of Disable auto build in the Actions dropdown menu](images/gen2/cross-account-deployments/pipeline9.png)
+<video autoPlay={true} muted={true} loop={true} width="100%" playsInline={true}>
+  <source src="/images/gen2/fullstack-branching/auto-build.mp4" />
+</video>
 
 ### Step 5: Create an incoming webhook
 
-You can set up an incoming webhook to trigger a build without committing code to your Git repository. Currently, the Amplify Gen 2 console does not support creation of incoming webhooks. However, you can create a webhook for a Gen 2 app using the AWS CLI by running the [`create-webhook`](https://awscli.amazonaws.com/v2/documentation/api/latest/reference/amplify/create-webhook.html) command:
+You can set up an incoming webhook to trigger a build without committing code to your Git repository. Use the Amplify Console to create an [incoming webhook](https://docs.aws.amazon.com/amplify/latest/userguide/webhooks.html).
 
-```bash title="Terminal" showLineNumbers={false}
-aws amplify create-webhook --app-id <value> --branch-name <value> --region <value>
-```
+Navigate to the app, under **Hosting > Build settings** select **Create webhook**. Provide a **name** for the webhook and select the **target branch** to build on incoming webhook requests.
 
-After running this command successfully, you should see a response similar to the following:
+![Screenshot of the Build settings page in the Amplify console showing the incoming webhooks feature](/images/gen2/fullstack-branching/multirepo5.png)
 
-```
-{
-    "webhook": {
-        "webhookArn": "arn:aws:amplify:REGION:ACCOUNT:apps/APP-ID/webhooks/webhookId",
-        "webhookId": "value",
-        "webhookUrl": "https://webhooks.amplify.us-west-2.amazonaws.com/prod/webhooks?id=webhookId&token=value",
-        "branchName": "main",
-        "createTime": "2023-11-18T10:16:18.880000-08:00",
-        "updateTime": "2023-11-18T10:16:18.880000-08:00"
-    }
-}
-```
-
-Next, you will need to construct a `curl` command that uses the `webhookId` to trigger a build:
+Next, select the webhook and copy the `curl` command which will be used to trigger a build for the app.
 
-```
-curl -X POST -d {} "`webhookUrl`&operation=startbuild" -H "Content-Type:application/json"
-```
+![Screenshot of the Incoming webhooks page in the Amplify console displaying the newly created webhook](/images/gen2/fullstack-branching/multirepo6.png)
 
 ### Step 6: Create a new Amazon CodeCatalyst project
 
 Please refer to this Amazon CodeCatalyst [guide](https://docs.aws.amazon.com/codecatalyst/latest/userguide/projects-create.html#projects-create-github) for a detailed step-by-step walkthrough to create a new [project](https://docs.aws.amazon.com/codecatalyst/latest/userguide/projects.html).
 
 <Callout info>
 
-**Note**: When creating your project, select the **amplify-nextjs-starter-app** GitHub repository, which we used to deploy the Gen 2 app in Step 2.
+**Note**: When creating your project, select the **next-pages-template** GitHub repository, which we used to deploy the app in Step 2.
 
 </Callout>
 
@@ -122,7 +108,7 @@ A workflow is an automated procedure that describes how to build, test, and depl
 
 - Within the CodeCatalyst project, navigate to the **CI/CD** feature and select **Workflows**.
 - Select **Create workflow**.
-- Choose the **amplify-nextjs-starter-app** GitHub repository and the branch **main** from the dropdown menu.
+- Choose the **next-pages-template** GitHub repository and the branch **main** from the dropdown menu.
 - Next, select **Create**.
 
 ![Screenshot of the CodeCatalyst console showing details of the Create workflow dialog box](images/gen2/cross-account-deployments/pipeline3.png)
@@ -183,4 +169,4 @@ Next, you can review the result of the workflow run from the **Runs** tab:
 
 ![Screenshot of CodeCatalyst console showing the Workflows section, focusing on the Runs tab](images/gen2/cross-account-deployments/pipeline11.png)
 
-Done! You have successfully set up a custom cross-account pipeline to deploy your frontend and backend for apps built using Amplify Gen 2. To summarize, this custom pipeline will enable you to deploy your backend initially with your `staging` environment using `ampx pipeline-deploy` in the CodeCatalyst workflow and `amplify generate config` will generate the `amplify_outputs.json` file for the `main` branch. Amplify Hosting will not deploy backend resources as part of the build and instead will use the deployed backend resources from the `main` branch. Once the staging environment deploys successfully, a similar process will be followed to deploy your `production` environment in a different AWS account.
+Done! You have successfully set up a custom cross-account pipeline to deploy your frontend and backend for apps built using Amplify Gen 2. To summarize, this custom pipeline will enable you to deploy your backend initially with your `staging` environment using `ampx pipeline-deploy` in the CodeCatalyst workflow and `ampx generate outputs` will generate the `amplify_outputs.json` file for the `main` branch. Amplify Hosting will not deploy backend resources as part of the build and instead will use the deployed backend resources from the `main` branch. Once the staging environment deploys successfully, a similar process will be followed to deploy your `production` environment in a different AWS account.

src/pages/[platform]/deploy-and-host/fullstack-branching/custom-pipelines/index.mdx

@@ -39,18 +39,18 @@ You can set up your backend deployments using the following steps:
 
 2.  Disable Auto-build for your branch. This will ensure code commits to your branch will not trigger a build.
 
-<video autoPlay={true} muted={true} loop={true} width="70%" playsInline={true}>
+<video autoPlay={true} muted={true} loop={true} width="100%" playsInline={true}>
   <source src="/images/gen2/fullstack-branching/auto-build.mp4" />
 </video>
 
-3. Update the Amplify build-spec to add `npx ampx generate outputs --branch $AWS_BRANCH --app-id $AWS_APP_ID` and comment out the `pipeline-deploy` script. `ampx pipeline-deploy` runs a script to deploy backend updates, while `ampx generate config` fetches the latest `amplify_outputs.json` for the specified environment.
+3. Update the Amplify build specification file to add `npx ampx generate outputs --branch $AWS_BRANCH --app-id $AWS_APP_ID` and comment out the `pipeline-deploy` script. `ampx pipeline-deploy` runs a script to deploy backend updates, while `ampx generate outputs` fetches the latest `amplify_outputs.json` for the specified environment.
 
 ![custom-ci](/images/gen2/fullstack-branching/custom-ci.png)
 
 4. Now go to your pipeline provider and update the build settings to include the following:
     * Run `npm ci`.
     * Run `export CI=1` to tell the deployment script that is a CI environment.
-    * Run `npx ampx pipeline-deploy --branch BRANCH_NAME --app-id AMPLIFY_APP_ID`. `BRANCH_NAME` refers to the branch you're deploying. `AMPLIFY_APP_ID` is the Amplify project ID. You can find this by going to the Amplify console and navigating to _backend-app > App settings > App ARN_ and copying the ID located at the end of the string `arn:aws:amplify:<region>:<account-id>:apps/*app-id*`.
+    * Run `npx ampx pipeline-deploy --branch BRANCH_NAME --app-id AMPLIFY_APP_ID`. `BRANCH_NAME` refers to the branch you're deploying. `AMPLIFY_APP_ID` is the Amplify App ID. To locate the `App ID` for your backend application, navigate to the Amplify console and select your **backend-app**. On the Overview page, the `App ID` is displayed under the project name.
 
 The example below demonstrates how you would set up the build-spec when using Amazon CodeCatalyst.
 
@@ -82,25 +82,17 @@ Actions:
 
 If you want to complete the fullstack CI/CD setup, we have to build, deploy, and host the frontend in addition to the backend.
 
-1. Use the AWS CLI to create an [incoming webhook](https://docs.aws.amazon.com/amplify/latest/userguide/webhooks.html) for your Amplify app. If the command executes successfully, you should see a response printed out like below:
+1. Use the Amplify Console to create an [incoming webhook](https://docs.aws.amazon.com/amplify/latest/userguide/webhooks.html).
 
-```
-aws amplify create-webhook --app-id AMPLIFY-APPID --branch-name main  --region REGION
-{
-    "webhook": {
-        "webhookArn": "arn:aws:amplify:REGION:ACCOUNT-ID:apps/APPID/webhooks/WEBHOOK-ID",
-        "webhookId": "WEBHOOK-ID",
-        "webhookUrl": "https://webhooks.amplify.ca-central-1.amazonaws.com/prod/webhooks?id=WEBHOOK-ID&token=TOKEN",
-        "branchName": "main",
-        "createTime": "2023-11-19T19:09:42.461000-08:00",
-        "updateTime": "2023-11-19T19:09:42.461000-08:00"
-    }
-}
-```
+2. Navigate to the frontend app, under **Hosting > Build settings** select **Create webhook**. Provide a **name** for the webhook and select the **target branch** to build on incoming webhook requests.
+
+![Screenshot of the Build settings page in the Amplify console showing the incoming webhooks feature](/images/gen2/fullstack-branching/multirepo5.png)
+
+3. Next, select the webhook and copy the `curl` command which will be used to trigger a build for the frontend app.
 
-2. Construct a `curl` command with the `webhookUrl`: `curl -X POST -d {} "https://webhooks.amplify.ca-central-1.amazonaws.com/prod/webhooks?id=WEBHOOK-ID&token=TOKEN&operation=startbuild" -H "Content-Type:application/json`
+![Screenshot of the Incoming webhooks page in the Amplify console displaying the newly created webhook](/images/gen2/fullstack-branching/multirepo6.png)
 
-3. Now update your custom-pipeline build settings to include the `curl` command to trigger a frontend build after the `pipeline-deploy` succeeds. Using the same Amazon CodeCatalyst example above, this step includes:
+4. Now update your custom-pipeline build settings to include the `curl` command to trigger a frontend build after the `pipeline-deploy` succeeds. Using the same Amazon CodeCatalyst example above, this step includes:
 
 ``` yaml
     Configuration: