diff --git a/src/pages/[platform]/deploy-and-host/fullstack-branching/branch-deployments/index.mdx b/src/pages/[platform]/deploy-and-host/fullstack-branching/branch-deployments/index.mdx
deleted file mode 100644
index 59608c3f2dd..00000000000
--- a/src/pages/[platform]/deploy-and-host/fullstack-branching/branch-deployments/index.mdx
+++ /dev/null
@@ -1,109 +0,0 @@
-import { getCustomStaticPath } from '@/utils/getCustomStaticPath';
-
-export const meta = {
- title: 'Fullstack branch deployments',
- description: 'Use fullstack branch deployments to test changes from feature branches.',
- platforms: [
- 'android',
- 'angular',
- 'flutter',
- 'javascript',
- 'nextjs',
- 'react',
- 'react-native',
- 'swift',
- 'vue'
- ]
-};
-
-export const getStaticPaths = async () => {
- return getCustomStaticPath(meta.platforms);
-};
-
-export function getStaticProps(context) {
- return {
- props: {
- meta
- }
- };
-
-}
-
-Amplify code-first DX (Gen 2) offers fullstack branch deployments that allow you to automatically deploy infrastructure and application code changes from feature branches. This enables testing changes in an isolated environment before merging to the main branch.
-
-## Set up feature branch deployments
-
-After you've deployed your [first branch](/[platform]/start/quickstart/), you can manually connect more, but the recommended workflow is to use the **branch auto-detection** feature.
-
-1. Log in to the [Amplify console](https://console.aws.amazon.com/amplify/home) and choose your app.
-
-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.
-
-
-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.
-
-
-
-
-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.
-
-
-
-## Promote changes to production
-
-In Gen 2, promoting changes to production follows the normal Git-based workflow.
-
-
-
-1. Make a change in your `feature/A` branch.
-
-```bash title="Terminal" showLineNumbers={false}
-git checkout -b feature/A
-
-## make some edits to your code
-
-git commit --am "New data model to track comments for todos added"
-
-git push origin feature/A
-```
-
-2. Submit a pull request to your `main` branch. Once your team has validated the changes, merge the pull request to `main`. This will initiate a build on your `main` branch and update any frontend or backend resources that you changed.
-
-
-### Generate client config
-
-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 --branch --out-dir
-```
-
-
-
-
- Be sure to add a "raw" folder under app/src/main/res directory if it doesn't
- exist.
-
-
-```bash title="Terminal" showLineNumbers={false}
-npx ampx generate outputs --app-id --branch --out-dir app/src/main/res/raw
-```
-
-
-```bash title="Terminal" showLineNumbers={false}
-npx ampx generate outputs --app-id --branch --format dart --out-dir lib
-```
-
-
-```bash title="Terminal" showLineNumbers={false}
-npx ampx generate outputs --app-id --branch
-```
-
-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.
-
-
-
-
diff --git a/src/pages/[platform]/deploy-and-host/fullstack-branching/cross-account-deployments/index.mdx b/src/pages/[platform]/deploy-and-host/fullstack-branching/cross-account-deployments/index.mdx
deleted file mode 100644
index f8cf82bb4d1..00000000000
--- a/src/pages/[platform]/deploy-and-host/fullstack-branching/cross-account-deployments/index.mdx
+++ /dev/null
@@ -1,186 +0,0 @@
-import { getCustomStaticPath } from '@/utils/getCustomStaticPath';
-
-export const meta = {
- title: 'Cross-account deployments',
- description:
- 'Set up a cross-account deployment pipeline powered by Amazon CodeCatalyst and AWS Amplify Hosting.',
- platforms: [
- 'android',
- 'angular',
- 'flutter',
- 'javascript',
- 'nextjs',
- 'react',
- 'react-native',
- 'swift',
- 'vue'
- ]
-};
-
-export const getStaticPaths = async () => {
- return getCustomStaticPath(meta.platforms);
-};
-
-export function getStaticProps(context) {
- return {
- props: {
- platform: context.params.platform,
- meta
- }
- };
-}
-
-This guide walks you through how to create a trunk-based, multi-region deployment pipeline for applications built using AWS Amplify Gen 2. We will be using Amazon CodeCatalyst and AWS Amplify Hosting in this guide, but you can choose any CI/CD provider.
-
-
-
-**Note**: You can deploy this custom pipeline either in the us-west-2 or eu-west-1 Regions, as Amazon CodeCatalyst is currently only available in those two [AWS Regions](https://docs.aws.amazon.com/general/latest/gr/codecatalyst.html).
-
-
-
-## Step 1: Set up an Amazon CodeCatalyst space
-
-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 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 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 fullstack Gen 2 app. You can review the status of the app deployment in the Amplify console.
-
-
-
-
-
-- Sign in to the [AWS Management Console](https://console.aws.amazon.com/).
-- 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 fullstack Gen 2 app. You can review the status of the app deployment in the Amplify console.
-
-
-
-
-
-
-## 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 outputs` fetches the latest `amplify_outputs.json` for the specified environment.
-
-
-
-## 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 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.
-
-
-
-## Step 5: Create an incoming webhook
-
-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).
-
-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.
-
-
-
-Next, select the webhook and copy the `curl` command which will be used to trigger a build for the app.
-
-
-
-## 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).
-
-
-
-**Note**: When creating your project, select the **next-pages-template** GitHub repository, which we used to deploy the app in Step 2.
-
-
-
-
-
-## Step 7: Set up the resources in a different or target AWS account
-
-To achieve a cross-account deployment, you will need to implement Steps 1 through 6 outlined previously in this guide in a different AWS account (for example, `production` account).
-
-## Step 8: Add the target AWS account to the CodeCatalyst space
-
-Navigate to the CodeCatalyst space created as part of Step 1, select **Settings**, and then select **AWS accounts**. Add the target **AWS account ID** (Step 7) to it and select **Associate AWS account**.
-
-
-
-You will also need to create an IAM role in the target AWS account which will be assumed by the `staging` environment to perform actions and deploy resources in the `production` environment. As a best practice, we recommend attaching the [`AmplifyBackendDeployFullAccess`](https://docs.aws.amazon.com/amplify/latest/userguide/security-iam-awsmanpol.html#security-iam-awsmanpol-AmplifyBackendDeployFullAccess) AWS managed policy to the IAM role as it contains all the required permissions to deploy Gen 2 resources in your account. You can learn more about adding IAM roles to account connections in the CodeCatalyst [documentation](https://docs.aws.amazon.com/codecatalyst/latest/userguide/ipa-connect-account-addroles.html).
-
-## Step 9: Create a workflow in the Amazon CodeCatalyst project
-
-A workflow is an automated procedure that describes how to build, test, and deploy your code as part of a continuous integration and continuous delivery (CI/CD) system. You can learn more about workflows in the [Amazon CodeCatalyst User Guide](https://docs.aws.amazon.com/codecatalyst/latest/userguide/flows.html).
-
-- Within the CodeCatalyst project, navigate to the **CI/CD** feature and select **Workflows**.
-- Select **Create workflow**.
-- Choose the **next-pages-template** GitHub repository and the branch **main** from the dropdown menu.
-- Next, select **Create**.
-
-
-
-Once you create the workflow, you should see a **yaml** editor in the CodeCatalyst console.
-
-
-
-Switch the experience in the console to the **Visual** editor. Select the **Actions** button to see a list of workflow actions that you can add to your workflow.
-
-
-
-Add the **Build** action to the workflow and select the **Add variable** button in the **Inputs** section. Add the following environment variables to it:
-
-- AWS_APP_ID_STAGING: `amplify app id for staging app`
-- AWS_APP_ID_PRODUCTION: `amplify app id for production app`
-- AWS_BRANCH: `git branch name`
-
-
-
-Add another **Build** action to the workflow and select the **Depends on** button in the **Inputs** section. From the dropdown menu, select the name of the previous build action to set up the pipeline.
-
-
-
-Next, select the **Configuration** section and add the following information to each of the build actions:
-
-- Environment information (optional): `staging, production, etc.`
-- AWS account connection: `your account connection`
-- Role: `role setup with your account connection`
-
-
-
-You will then need to add the following shell commands to each of the build actions:
-
-```bash title="Terminal" showLineNumbers={false}
-// This environment variable is required to run the pipeline-deploy command in a non Amplify CI environment
-- Run: export CI=1
-
-// Perform a clean install of the dependencies
-- Run: npm ci
-
-// Deploy the backend for your Amplify Gen 2 app
-- Run: npx ampx pipeline-deploy --branch $AWS_BRANCH --app-id $AWS_APP_ID
-
-// Trigger frontend build using incoming webhooks
-- Run: if [ $AWS_BRANCH = "main" ]; then curl -X POST -d {} "`webhookUrl`&operation=startbuild" -H "Content-Type:application/json"; fi
-```
-
-You can now run **Validate** to ensure your workflow definition `yaml` file is valid. Lastly, select **Commit** to save your changes.
-
-
-
-**Note**: Since workflows are saved as commits, and this workflow has a code push trigger enabled, committing the workflow will automatically start a new workflow run.
-
-
-
-Next, you can review the result of the workflow run from the **Runs** tab:
-
-
-
-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.
diff --git a/src/pages/[platform]/deploy-and-host/fullstack-branching/custom-pipelines/index.mdx b/src/pages/[platform]/deploy-and-host/fullstack-branching/custom-pipelines/index.mdx
deleted file mode 100644
index e52ecf0993d..00000000000
--- a/src/pages/[platform]/deploy-and-host/fullstack-branching/custom-pipelines/index.mdx
+++ /dev/null
@@ -1,107 +0,0 @@
-import { getCustomStaticPath } from '@/utils/getCustomStaticPath';
-
-export const meta = {
- title: 'Custom pipelines',
- description: 'Set up fullstack CI/CD in a custom pipeline.',
- platforms: [
- 'android',
- 'angular',
- 'flutter',
- 'javascript',
- 'nextjs',
- 'react',
- 'react-native',
- 'swift',
- 'vue'
- ]
-};
-
-export const getStaticPaths = async () => {
- return getCustomStaticPath(meta.platforms);
-};
-
-export function getStaticProps(context) {
- return {
- props: {
- meta
- }
- };
-
-}
-
-While building with Amplify CI/CD offers benefits such as zero-config setup, fullstack previews, centralized secrets management, Amplify Gen 2 makes it easy to integrate fullstack CI/CD into your custom pipelines (for example, AWS CodePipeline, Amazon CodeCatalyst, GitHub Actions, and more).
-
-## Set up backend deployments
-
-You can set up your backend deployments using the following steps:
-
-1. Create an Amplify app by connecting a fullstack Gen 2 branch from your Git repository. This is a one time setup as for subsequent deployments, we will be using a custom pipeline.
-
-2. Disable Auto-build for your branch. This will ensure code commits to your branch will not trigger a build.
-
-
-
-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.
-
-
-
-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 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.
-
-```yaml
-Actions:
- Build_82:
- # Identifies the action. Do not modify this value.
- Identifier: aws/build@v1.0.0
- # Specifies the source and/or artifacts to pass to the action as input.
- Inputs:
- # Optional
- Sources:
- - WorkflowSource # This specifies that the action requires this Workflow as a source
- Variables:
- - Name: BRANCH_NAME
- Value: main
- - Name: AMPLIFY_APP_ID
- Value: #####
- Configuration:
- # Required - Steps are sequential instructions that run shell commands
- Steps:
- - Run: export CI=1
- - Run: npm ci
- - Run: npx ampx pipeline-deploy --branch $BRANCH_NAME --app-id $AMPLIFY_APP_ID
-```
-5. Trigger a `git push` to your branch. Your build logs should show that there is an AWS CloudFormation deployment underway.
-
-## Set up frontend deployments
-
-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 Amplify Console to create an [incoming webhook](https://docs.aws.amazon.com/amplify/latest/userguide/webhooks.html).
-
-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.
-
-
-
-3. Next, select the webhook and copy the `curl` command which will be used to trigger a build for the frontend app.
-
-
-
-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:
- # Required - Steps are sequential instructions that run shell commands
- Steps:
- - Run: export CI=1
- - Run: npm ci
- - Run: npx ampx pipeline-deploy --branch $BRANCH_NAME --app-id $AMPLIFY_APP_ID
- - Run: if [ $BRANCH_NAME = "main" ]; then curl -X POST -d {}
- "https://webhooks.amplify.us-west-2.amazonaws.com/prod/webhooks?id=WEBHOOK-ID&token=TOKEN&operation=startbuild"
- -H "Content-Type:application/json"; fi
-```
-
-4. This should trigger a build in your Amplify app. Amplify CI will build and first generate the `amplify_outputs.json` for the branch and then build, deploy, and host the frontend.
diff --git a/src/pages/[platform]/deploy-and-host/fullstack-branching/index.mdx b/src/pages/[platform]/deploy-and-host/fullstack-branching/index.mdx
deleted file mode 100644
index 5b8432e4ee4..00000000000
--- a/src/pages/[platform]/deploy-and-host/fullstack-branching/index.mdx
+++ /dev/null
@@ -1,35 +0,0 @@
-import { getChildPageNodes } from '@/utils/getChildPageNodes';
-import { getCustomStaticPath } from '@/utils/getCustomStaticPath';
-
-export const meta = {
- title: 'Fullstack workflows',
- description: 'Overview of fullstack branching capabilities.',
- route: '/[platform]/deploy-and-host/fullstack-branching',
- platforms: [
- 'android',
- 'angular',
- 'flutter',
- 'javascript',
- 'nextjs',
- 'react',
- 'react-native',
- 'swift',
- 'vue'
- ]
-};
-
-export const getStaticPaths = async () => {
- return getCustomStaticPath(meta.platforms);
-};
-
-export function getStaticProps(context) {
- const childPageNodes = getChildPageNodes(meta.route);
- return {
- props: {
- meta,
- childPageNodes
- }
- };
-}
-
-
diff --git a/src/pages/[platform]/deploy-and-host/fullstack-branching/mono-and-multi-repos/index.mdx b/src/pages/[platform]/deploy-and-host/fullstack-branching/mono-and-multi-repos/index.mdx
deleted file mode 100644
index 3a763c06276..00000000000
--- a/src/pages/[platform]/deploy-and-host/fullstack-branching/mono-and-multi-repos/index.mdx
+++ /dev/null
@@ -1,202 +0,0 @@
-import { getCustomStaticPath } from '@/utils/getCustomStaticPath';
-
-export const meta = {
- title: 'Separate frontend and backend teams',
- description:
- 'Set up multiple repositories with the Amplify CI/CD pipeline.',
- platforms: [
- 'android',
- 'angular',
- 'flutter',
- 'javascript',
- 'nextjs',
- 'react',
- 'react-native',
- 'swift',
- 'vue'
- ]
-};
-
-export const getStaticPaths = async () => {
- return getCustomStaticPath(meta.platforms);
-};
-
-export function getStaticProps(context) {
- return {
- props: {
- meta
- }
- };
-
-}
-
-You might have different frontend and backend teams that maintain their own repositories. With Amplify Gen 2, you can deploy repositories that have backend-only code, so frontend and backend teams can operate independently of each other.
-
-## Deploy the backend app
-
-1. Run `mkdir backend-app && cd backend-app && npm create amplify@latest` to set up a backend-only Amplify project. Commit the code to a Git provider of your choice.
-
-1. Connect the `backend-app` in the new console. Navigate to the Amplify console and select **Create new app**.
-
-1. When you connect the repository, notice the only auto-detected framework is Amplify.
-
-
-
-4. Once you choose **Save and deploy**, your backend project will build.
-
-
-
-## Deploy the frontend app
-
-1. Now let's set up the frontend app and connect to the deployed backend.
-
-```bash title="Terminal" showLineNumbers={false}
-npm create next-app@14 -- multi-repo-example --typescript --eslint --no-app --no-src-dir --no-tailwind --import-alias '@/*'
-
-```
-
-2. Install Amplify dependencies.
-
-```bash title="Terminal" showLineNumbers={false}
-cd multi-repo-example
-npm add @aws-amplify/backend-cli aws-amplify @aws-amplify/ui-react
-```
-
-3. To connect to the deployed backend, run the following command. 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.
-
-```bash title="Terminal" showLineNumbers={false}
-npx ampx generate outputs --branch main --app-id
-```
-
-This will generate the `amplify_outputs.json` file that contains all the information about your backend at the root of your project.
-
-
-
-4. To validate that your frontend can connect to the backend, add the `Authenticator` login form to your app.
-
-```ts title="pages/_app.tsx"
-import { withAuthenticator } from '@aws-amplify/ui-react';
-import { Amplify } from 'aws-amplify';
-import outputs from '@/amplify_outputs.json';
-import '@aws-amplify/ui-react/styles.css';
-import '@/styles/globals.css';
-import type { AppProps } from 'next/app';
-
-// configure the Amplify client library with the configuration generated by `ampx sandbox`
-Amplify.configure(outputs);
-
-function App({ Component, pageProps }: AppProps) {
- return ;
-}
-
-export default withAuthenticator(App);
-```
-
-4. Let's also add an `amplify.yml` build-spec to our repository.
-
-```yaml
-version: 1
-backend:
- phases:
- build:
- commands:
- - npm ci --cache .npm --prefer-offline
- - npx ampx generate outputs --branch main --app-id BACKEND-APPID
-frontend:
- phases:
- build:
- commands:
- - npm run build
- artifacts:
- baseDirectory: .next
- files:
- - '**/*'
- cache:
- paths:
- - .next/cache/**/*
- - .npm/**/*
- - node_modules/**/*
-```
-
-4. Now let's deploy the app. In the Amplify console, choose **Create new app**. Connect the repository with the default settings. You should see that the build generates the output and does not deploy a frontend. Validate that your app is working fine.
-
-
-
-## Trigger a frontend build on backend updates
-
-The ideal scenario is that the frontend automatically retrieves the latest updates from the backend every time there is a modification made to the backend code.
-
-1. Use the Amplify Console to create an [incoming webhook](https://docs.aws.amazon.com/amplify/latest/userguide/webhooks.html).
-
-2. Navigate to the **multi-repo-example** 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.
-
-
-
-3. Next, select the webhook and copy the `curl` command which will be used to trigger a build for the **multi-repo-example** app.
-
-
-
-4. Now update the build settings for the `backend-app` to include the `curl` command to trigger a frontend build any time there are changes to the backend.
-
-```yaml title="amplify.yml"
-version: 1
-backend:
- phases:
- build:
- commands:
- - npm ci --cache .npm --prefer-offline
- - npx ampx pipeline-deploy --branch $AWS_BRANCH --app-id $AWS_APP_ID
-frontend:
- phases:
- build:
- commands:
- - mkdir ./dist && touch ./dist/index.html
- - 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"
- artifacts:
- baseDirectory: dist
- files:
- - '**/*'
- cache:
- paths:
- - node_modules/**/*
-```
-
-
-## Sharing schema type definitions
-
-If you're using Amplify Data, we recommend adding a `paths` entry in the `tsconfig.json` of your frontend app that points to the `amplify/data/resource.ts` file in your backend app to easily access your schema type definitions from your frontend apps.
-
-First, cone your backend repo into the same parent directory as your frontend app, then add the following entry:
-
-```json title="tsconfig.json" showLineNumbers={false}
-{
- "compilerOptions": {
- "paths": {
- "@/data-schema": ["../backend-app/amplify/data/resource"]
- }
- }
-}
-```
-
-You can then import the `Schema` type from this path in your frontend code to get code completion and strong typing for your API calls:
-
-```ts title="apps/admin-dashboard/page.tsx"
-import { generateClient } from "aws-amplify/data";
-import type { Schema } from "@/data-schema";
-
-const client = generateClient();
-
-const createTodo = async () => {
- await client.models.Todo.create({
- content: window.prompt("Todo content?"),
- isDone: false,
- });
-}
-
-```
-
-
diff --git a/src/pages/[platform]/deploy-and-host/fullstack-branching/monorepos/index.mdx b/src/pages/[platform]/deploy-and-host/fullstack-branching/monorepos/index.mdx
deleted file mode 100644
index 6767407744f..00000000000
--- a/src/pages/[platform]/deploy-and-host/fullstack-branching/monorepos/index.mdx
+++ /dev/null
@@ -1,157 +0,0 @@
-import { getCustomStaticPath } from '@/utils/getCustomStaticPath';
-
-export const meta = {
- title: 'Monorepo setup',
- description: 'Set up monorepos with the Amplify CI/CD pipeline.',
- platforms: [
- 'android',
- 'angular',
- 'flutter',
- 'javascript',
- 'nextjs',
- 'react',
- 'react-native',
- 'swift',
- 'vue'
- ]
-};
-
-export const getStaticPaths = async () => {
- return getCustomStaticPath(meta.platforms);
-};
-
-export function getStaticProps(context) {
- return {
- props: {
- platform: context.params.platform,
- meta
- }
- };
-}
-
-Some teams choose a monorepo approach, or single repositories that contain multiple packages or components to simplify the deployment process for shared libraries and components. Without a monorepo, you have to deploy each package individually, keep track of package versions and dependencies across packages, and ensure version compatibility. This can become exponentially more complex as the number of packages grows. With a monorepo, all packages and dependencies are contained within a single repository.
-
-Amplify Gen 2 supports monorepo workflows for fullstack builds with monorepo tools such as Nx and yarn workspaces. When building with Gen 2, we recommend creating the `amplify/` folder in a shared workspace. We will use the following example for this guide:
-
-```text
-├── apps/
-│ ├── admin-dashboard/
-│ │ ├── next.config.mjs
-│ │ └── package.json
-│ └── marketing-site/
-│ ├── astro.config.mjs
-│ └── package.json
-├── packages/
-│ └── my-shared-backend/
-│ ├── amplify/
-│ │ ├── auth/
-│ │ │ └── resource.ts
-│ │ ├── data/
-│ │ │ └── resource.ts
-│ │ └── backend.ts
-│ |── package.json
- └── tsconfig.json
-└── package.json
-```
-
-Monorepos require a slightly different setup. We are going to deploy 3 Amplify apps:
-
-1. `my-shared-backend`
-2. `admin-dashboard`
-3. `marketing-site`
-
-## Deploy backend app
-
-The first app, `my-shared-backend`, will be the only app that updates changes to the backend. The other apps will only run frontend builds that point to the shared backend.
-
-1. To get started, deploy the shared backend Amplify app. With Gen 2, you can now setup backend-only CI/CD apps. Navigate to the Amplify console and select **Create new app**.
-
-1. Once you connect your repository, select your monorepo project. Check the box that says **My app is a monorepo** and enter the path to your amplify backend.
-
-
-
-3. Your build settings should be automatically detected. Save and deploy.
-
-## Deploy frontend apps
-
-1. For the frontend apps, connect the frontend projects in the Amplify console separately, and update the build commands to include:
-
-
-
-```bash title="Terminal" showLineNumbers={false}
-npx ampx generate outputs --branch main --app-id BACKEND-APP-ID
-```
-
-
-
-```bash title="Terminal" showLineNumbers={false}
-npx ampx generate outputs --app-id --branch main --format dart --out-dir lib
-```
-
-
-
-
- Be sure to add a "raw" folder under app/src/main/res directory if it doesn't
- exist.
-
-
-```bash title="Terminal" showLineNumbers={false}
-npx ampx generate outputs --app-id --branch main --out-dir app/src/main/res/raw
-```
-
-
-
-```bash title="Terminal" showLineNumbers={false}
-npx ampx generate outputs --app-id --branch main
-```
-
-Once the sandbox environment is running, you would also generate the configuration files for your application. However, Xcode won't be able to recognize them. For recognizing the files, you need to drag and drop the generated files to your project.
-
-
-
-
-
-- 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.
-
-
-
-```bash title="Terminal" showLineNumbers={false}
-npx ampx generate outputs --branch main --app-id BACKEND-APP-ID
-```
-
-
-
-
-
-## Sharing schema type definitions
-
-If you're using Amplify Data, we recommend adding a `paths` entry in your `tsconfig.json` file that points to the `amplify/data/resource.ts` file to easily access your schema type definitions from your frontend apps.
-
-```json title="tsconfig.json" showLineNumbers={false}
-{
- "compilerOptions": {
- "paths": {
- "@/data-schema": ["./packages/my-shared-backend/amplify/data/resource"]
- }
- }
-}
-```
-
-You can then import the `Schema` type from this path in your frontend code to get code completion and strong typing for your API calls:
-
-```ts title="apps/admin-dashboard/page.tsx"
-import { generateClient } from "aws-amplify/data";
-import type { Schema } from "@/data-schema";
-
-const client = generateClient();
-
-const createTodo = async () => {
- await client.models.Todo.create({
- content: window.prompt("Todo content?"),
- isDone: false,
- });
-}
-
-```
-
-
diff --git a/src/pages/[platform]/deploy-and-host/fullstack-branching/pr-previews/index.mdx b/src/pages/[platform]/deploy-and-host/fullstack-branching/pr-previews/index.mdx
deleted file mode 100644
index 99b0c39b910..00000000000
--- a/src/pages/[platform]/deploy-and-host/fullstack-branching/pr-previews/index.mdx
+++ /dev/null
@@ -1,130 +0,0 @@
-import { getCustomStaticPath } from '@/utils/getCustomStaticPath';
-
-export const meta = {
- title: 'Fullstack previews',
- description:
- 'Set up ephemeral fullstack environments with pull request previews.',
- platforms: [
- 'android',
- 'angular',
- 'flutter',
- 'javascript',
- 'nextjs',
- 'react',
- 'react-native',
- 'swift',
- 'vue'
- ]
-};
-
-export const getStaticPaths = async () => {
- return getCustomStaticPath(meta.platforms);
-};
-
-export function getStaticProps(context) {
- return {
- props: {
- meta
- }
- };
-
-}
-
-With fullstack previews, you can set up ephemeral fullstack environments on every pull request. This allows you to test features in isolation from production. Once fullstack previews are enabled, your typical workflow would look like the following diagram:
-
-
-
-1. Your `main` (production branch) and `featureA` branch are deployed on Amplify.
-1. You and your team work on `featureA` until it's ready.
-1. The `featureA` branch is updated to `main` HEAD and then a pull request to `main` is opened.
-1. The pull request preview is deployed on Amplify and available at `pr-1.appid.amplifyapp.com`.
-1. Once the pull request is merged into `main`, the request is closed and the fullstack environment is also automatically torn down.
-
-## Prerequisites
-
-Before you get started, make sure you have the following:
-
-- [A fullstack Amplify app deployed](/[platform]/start/quickstart/)
-- Ensure that your git repository is private. For security purposes, fullstack previews are disabled for public repositories with Amplify backend templates.
-
-
-## Enable fullstack previews
-
-To enable fullstack web previews for your Amplify app, follow these steps:
-
-1. Login to the [Amplify console](https://console.aws.amazon.com/amplify/home) and select your app.
-
-2. Navigate to **Hosting > Previews**. Select the **`main`** branch and click on **Edit settings**.
-
-
-3. Click on the **Pull request previews** toggle button and choose **Confirm** to enable previews.
-
-
-4. Done! You have successfully enabled previews on the production branch.
-
-
-5. Ship updates to the `dev` branch. Now, when you create a pull request for the `main` branch, Amplify will build and deploy your fullstack PR and provide you with a preview URL.
-
-
-For **GitHub repositories only**, you can access your preview URL directly on the pull request from the Amplify Hosting's bot comment:
-
-
-
-After the pull request is merged or closed, the preview URL is deleted and any ephemeral fullstack environment is also deleted.
-
-## Share backend resources across Preview branches
-
-Fullstack previews allow teams a way to preview changes from pull requests before merging code to a production branch. Pull requests let you tell others about changes you’ve pushed to a branch in a repository and the changes can be reviewed by accessing the preview URL. When previews are enabled on a git branch, by default every pull request created against the git branch creates an ephemeral fullstack environment.
-
-In some instances, you may not want to deploy new resources for every preview branch. For example, you might want all your preview branches to point to the backend resources deployed by the `dev` branch so you can reuse seed data, users, and groups.
-
-To achieve this, you can update your app build settings to reuse backend resources across your preview branches. In the Amplify console, select your app on the **All apps** page. From the **App overview** page, select **Hosting > Build settings** to view your app's build specification YAML file.
-
-
-
-Update the build settings for the `backend` phase to run `npx ampx generate outputs --branch dev app-id $AWS_APP_ID` to generate the `amplify_outputs.json` file for all preview branches. After this update, any new deployed preview branches will not deploy backend resources as part of the build and instead will use the deployed backend resources from the `dev` branch.
-
-```yaml title="amplify.yml"
-version: 1
-backend:
- phases:
- build:
- commands:
- - 'npm ci --cache .npm --prefer-offline'
- - 'echo $AWS_BRANCH'
- - |
- // highlight-start
- case "${AWS_BRANCH}" in
- main)
- echo "Deploying main branch..."
- npx ampx pipeline-deploy --branch $AWS_BRANCH --app-id $AWS_APP_ID
- ;;
- dev)
- echo "Deploying dev branch..."
- npx ampx pipeline-deploy --branch $AWS_BRANCH --app-id $AWS_APP_ID
- ;;
- pr-*)
- echo "Deploying pull request branch..."
- npx ampx generate outputs --branch dev --app-id $AWS_APP_ID
- ;;
- *)
- echo "Deploying to staging branch..."
- npx ampx generate outputs --branch staging --app-id $AWS_APP_ID
- ;;
- esac
- // highlight-end
-frontend:
- phases:
- build:
- commands:
- - 'npm run build'
- artifacts:
- baseDirectory: .amplify-hosting
- files:
- - '**/*'
- cache:
- paths:
- - .next/cache/**/*
- - .npm/**/*
- - node_modules/**/*
-```
diff --git a/src/pages/[platform]/deploy-and-host/fullstack-branching/secrets-and-vars/index.mdx b/src/pages/[platform]/deploy-and-host/fullstack-branching/secrets-and-vars/index.mdx
deleted file mode 100644
index b81eee7fddd..00000000000
--- a/src/pages/[platform]/deploy-and-host/fullstack-branching/secrets-and-vars/index.mdx
+++ /dev/null
@@ -1,165 +0,0 @@
-import { getCustomStaticPath } from '@/utils/getCustomStaticPath';
-
-export const meta = {
- title: 'Secrets and environment vars',
- description: 'Manage secrets and environment variables across your fullstack branch and local dev environments.',
- platforms: [
- 'android',
- 'angular',
- 'flutter',
- 'javascript',
- 'nextjs',
- 'react',
- 'react-native',
- 'swift',
- 'vue'
- ]
-};
-
-export const getStaticPaths = async () => {
- return getCustomStaticPath(meta.platforms);
-};
-
-export function getStaticProps(context) {
- return {
- props: {
- meta
- }
- };
-
-}
-
-Amplify Gen 2 offers centralized management of secrets and environment variables for all fullstack branches. Secrets allow you to securely configure environment-specific values like social sign-in keys, function environment variables, function secrets, and other sensitive data needed by your application across environments.
-
-
- In Amplify Gen 1, you need to define environment variables and secrets using the CLI and store keys in both AWS Parameter Store and a local `team-provider.json` file. We have streamlined this workflow in Amplify Gen 2 by centralizing the management of secrets and environment variables in the Amplify console.
-
-
-## Set secrets
-
-You can set secrets for your fullstack branch deployments or your local dev server.
-
-### Branch environment
-
-You can add secrets for branch deployments in the Amplify console. From the App home page, navigate to **Hosting > Secrets**, and then choose the **Manage secrets** button. You can add a secret key or value that applies to all deployed branches or just specific branches.
-
-
-
-Secrets are stored in AWS Systems Manager Parameter Store under the following naming conventions:
-
-- Secrets that apply to all branches: `/amplify/shared//`
-- Secrets that apply to a specific branch: `/amplify//-branch-/`
-
-### Local environment
-
-[comment]: <> (When editing this section, also update /gen2/deploy-and-host/sandbox-environments/features/index.md -)
-
-
- Secrets set in a sandbox do not show up in the Amplify console. You can view them in the AWS Parameter Store console.
-
-
-When testing features locally, you might want to test with real secrets. You can add secrets while running the cloud sandbox with the following command:
-
-```bash title="Terminal" showLineNumbers={false}
-npx ampx sandbox secret set foo
-? Enter secret value: ###
-Done!
-
-> npx ampx sandbox secret set bar
-? Enter secret value: ###
-Done!
-```
-
-## Access secrets
-
-Once you have set a secret, you can access the values in code by calling the `secret()` function. The following example shows how to set up social sign-in with authentication in your app. Depending on your environment, Amplify will automatically load the correct secret value with no extra configuration.
-
-```ts
-import { defineAuth, secret } from '@aws-amplify/backend';
-
-export const auth = defineAuth({
- loginWith: {
- email: true,
- externalProviders: {
- facebook: {
- clientId: secret('foo'),
- clientSecret: secret('bar')
- }
- }
- }
-});
-```
-
-## Remove secrets
-
-
-When deleting branch environments or sandbox environments, you need to manually delete the secrets as well.
-
-
-### Branch environment
-
-Secrets that are used in branch deployments can be managed directly in the Amplify console. You can remove them under **Secret management** by choosing **Remove**.
-
-
-
-### Local environment
-
-To remove a secret in your local environment, run the following command in your terminal:
-
-```bash title="Terminal" showLineNumbers={false}
-npx ampx sandbox secret remove foo
-```
-
-## Set environment variables
-
-
-
-Note: do not store secret values in environment variables. Environment variables values are rendered in plaintext to the build artifacts and can be accessed by anyone with access to the build artifacts or [get-app](https://awscli.amazonaws.com/v2/documentation/api/latest/reference/amplify/get-app.html) command.
-
-
-
-Environment variables work like key-value pairs to help manage configurable settings across different deployment environments, including development, staging, and production. Unlike secrets, which store sensitive data, environment variables are typically nonconfidential and are used for controlling application behavior in different environments. Another key difference is that environment variables are stored and managed by the Amplify managed service. You can set environment variables in the Amplify console (view the [AWS Amplify Hosting User Guide](https://docs.aws.amazon.com/amplify/latest/userguide/environment-variables.html#setting-env-vars) for detailed instructions).
-
-
-
-## Access environment variables
-
-You can enable access to environment variables for your fullstack branch deployments or your local dev server.
-
-### Branch environment
-
-You can manage your branch environment access through the Amplify console.
-
-1. First, create an environment variable in the Amplify console (in this example, you will name it `REACT_APP_TEST_VARIABLE`)
-
-1. Next, navigate to the Build Settings in console (or to the `amplify.yml` file) and update the build settings to pipe the environment variable into a file. Here is an example of writing it into an `.env` file:
-
-```yml title="amplify.yml"
-build:
- commands:
- // highlight-next-line
- - echo "REACT_APP_TEST_VARIABLE=$REACT_APP_TEST_VARIABLE" >> .env
- - npm run build
-```
-
-
-With the implementation above, the environment variable is written in a `.env` file. However, you can write it to any file depending on your platform.
-
-- For Flutter, you can still use `.env` with an external package or generate your configuration file in Dart or JSON format.
-- For Android, you can use Build Configurations or Gradle variables.
-- For iOS, you can update your plist file with the necessary code or create a configuration file in JSON format.
-
-
-Now the `.env` can access the environment variable through `process.env` in your client code:
-
-```typescript
-console.log('REACT_APP_TEST_VARIABLE', process.env.REACT_APP_TEST_VARIABLE);
-```
-
-### Local environment
-
-When working on your local machine, you must manually load the sandbox's environment variables. First, add the environment variable in your `.env.local` file. Then, a library such as [`@dotenvx/dotenvx`](https://www.npmjs.com/package/@dotenvx/dotenvx) can load the environment variables, which you can then reference with `process.env`.
-
-```bash title="Terminal" showLineNumbers={false}
-npx dotenvx run --env-file=.env.local -- ampx sandbox
-```
diff --git a/src/pages/[platform]/deploy-and-host/fullstack-branching/share-resources/index.mdx b/src/pages/[platform]/deploy-and-host/fullstack-branching/share-resources/index.mdx
deleted file mode 100644
index 765422a4039..00000000000
--- a/src/pages/[platform]/deploy-and-host/fullstack-branching/share-resources/index.mdx
+++ /dev/null
@@ -1,84 +0,0 @@
-import { getCustomStaticPath } from '@/utils/getCustomStaticPath';
-
-export const meta = {
- title: 'Share resources across branches',
- description: 'Update app build settings to share resources across branches.',
- platforms: [
- 'android',
- 'angular',
- 'flutter',
- 'javascript',
- 'nextjs',
- 'react',
- 'react-native',
- 'swift',
- 'vue'
- ]
-};
-
-export const getStaticPaths = async () => {
- return getCustomStaticPath(meta.platforms);
-};
-
-export function getStaticProps(context) {
- return {
- props: {
- meta
- }
- };
-
-}
-
-In some instances, you may not want to deploy new resources for every branch. For example, you might want all your `feature` branches to point to the backend resources deployed by the `dev` branch so you can reuse seed data, users, and groups.
-
-
-
-You can update your app build settings to share resources across branches. From the Amplify console, go to your **App overview** page, select **Build settings** under the **Hosting** for viewing your app's build specification YAML file.
-
-
-
-Update the build settings for the `backend` phase to run `npx ampx generate outputs --branch dev app-id $AWS_APP_ID` to generate the `amplify_outputs.json` file for all branches other than `main` or `dev`. After this update, any new deployed branches will not deploy backend resources as part of the build and instead will use the deployed backend resources from the `dev` branch.
-Update the build settings for the `backend` phase to run `npx ampx generate outputs --branch dev app-id $AWS_APP_ID` to generate the `amplify_outputs.json` file for all branches other than `main` or `dev`. After this update, any new deployed branches will not deploy backend resources as part of the build and instead will use the deployed backend resources from the `dev` branch.
-
-```yaml title="amplify.yml"
-version: 1
-backend:
- phases:
- build:
- commands:
- - 'npm ci --cache .npm --prefer-offline'
- - 'echo $AWS_BRANCH'
- - |
- case "${AWS_BRANCH}" in
- main)
- echo "Deploying main branch..."
- npx ampx pipeline-deploy --branch $AWS_BRANCH --app-id $AWS_APP_ID
- ;;
- dev)
- echo "Deploying dev branch..."
- npx ampx pipeline-deploy --branch $AWS_BRANCH --app-id $AWS_APP_ID
- ;;
- pr-*)
- echo "Deploying pull request branch..."
- npx ampx generate outputs --branch previews --app-id $AWS_APP_ID
- ;;
- *)
- echo "Deploying to staging branch..."
- npx ampx generate outputs --branch dev --app-id $AWS_APP_ID
- ;;
- esac
-frontend:
- phases:
- build:
- commands:
- - 'npm run build'
- artifacts:
- baseDirectory: .next
- files:
- - '**/*'
- cache:
- paths:
- - .next/cache/**/*
- - .npm/**/*
- - node_modules/**/*
-```
diff --git a/src/pages/[platform]/deploy-and-host/hosting/index.mdx b/src/pages/[platform]/deploy-and-host/hosting/index.mdx
deleted file mode 100644
index 34867c80296..00000000000
--- a/src/pages/[platform]/deploy-and-host/hosting/index.mdx
+++ /dev/null
@@ -1,42 +0,0 @@
-import { getCustomStaticPath } from '@/utils/getCustomStaticPath';
-
-export const meta = {
- title: 'Frontend hosting',
- description:
- 'Host static and server-rendered web apps built with modern JS frameworks like Next.js, Vue, and React.',
- platforms: [
- 'android',
- 'angular',
- 'flutter',
- 'javascript',
- 'nextjs',
- 'react',
- 'react-native',
- 'swift',
- 'vue'
- ]
-};
-
-export const getStaticPaths = async () => {
- return getCustomStaticPath(meta.platforms);
-};
-
-export function getStaticProps(context) {
- return {
- props: {
- meta
- }
- };
-
-}
-
-AWS Amplify Hosting is a fully managed CI/CD and hosting service for fast, secure, and reliable static and server-side rendered apps that scale with your business. This service supports modern web frameworks such as React, Angular, Vue, Next.js, Nuxt.js, Gatsby, and more.
-
-Because AWS Amplify Hosting is a fully managed service, its documentation lives on the AWS Documentation site. To learn about hosting features such as custom domains, redirects, and more, please visit the Hosting documentation.
-
-
- View Hosting Docs
-