update cdk mentions with Stack.of to backend.<resource>.stack

Author: josefaidt

src/pages/[platform]/build-a-backend/add-aws-services/logging/set-up-logging/index.mdx

@@ -113,11 +113,11 @@ The `<log-group-name>` and `<region>` configured in the CDK construct will be us
 - `<amplify-authenticated-role-name>` and `<amplify-unauthenticated-role-name>` are Amplify roles created as part of Amplify Auth configuration via Amplify CLI.
 
 ```ts
+import * as path from "node:path"
 import * as cdk from "aws-cdk-lib"
-import { Construct } from "constructs"
 import * as logs from "aws-cdk-lib/aws-logs"
-import * as path from "path"
 import * as iam from "aws-cdk-lib/aws-iam"
+import { Construct } from "constructs"
 
 export class RemoteLoggingConstraintsConstruct extends Construct {
   constructor(scope: Construct, id: string, props: RemoteLoggingConstraintProps) {

src/pages/[platform]/build-a-backend/add-aws-services/predictions/set-up-predictions/index.mdx

@@ -38,11 +38,9 @@ To learn more, check the docs of [Amazon Translate](https://docs.aws.amazon.com/
 
 
 ```ts title="amplify/backend.ts"
-
+import { PolicyStatement } from "aws-cdk-lib/aws-iam";
 import { defineBackend } from "@aws-amplify/backend";
 import { auth } from "./auth/resource";
-import { Stack } from "aws-cdk-lib";
-import { PolicyStatement } from "aws-cdk-lib/aws-iam";
 
 const backend = defineBackend({
   auth,
@@ -88,24 +86,21 @@ backend.addOutput({
             targetLanguage: "es",
           },
           proxy: false,
-          region: Stack.of(backend.auth.resources.unauthenticatedUserIamRole)
-            .region,
+          region: backend.auth.stack.region,
         },
         speechGenerator: {
           defaults: {
             voiceId: "Ivy",
           },
           proxy: false,
-          region: Stack.of(backend.auth.resources.unauthenticatedUserIamRole)
-            .region,
+          region: backend.auth.stack.region,
         },
         transcription: {
           defaults: {
             language: "en-US",
           },
           proxy: false,
-          region: Stack.of(backend.auth.resources.unauthenticatedUserIamRole)
-            .region,
+          region: backend.auth.stack.region,
         },
       },
       identify: {
@@ -116,24 +111,21 @@ backend.addOutput({
           },
           celebrityDetectionEnabled: true,
           proxy: false,
-          region: Stack.of(backend.auth.resources.unauthenticatedUserIamRole)
-            .region,
+          region: backend.auth.stack.region,
         },
         identifyLabels: {
           defaults: {
             type: "ALL",
           },
           proxy: false,
-          region: Stack.of(backend.auth.resources.unauthenticatedUserIamRole)
-            .region,
+          region: backend.auth.stack.region,
         },
         identifyText: {
           defaults: {
             format: "ALL",
           },
           proxy: false,
-          region: Stack.of(backend.auth.resources.unauthenticatedUserIamRole)
-            .region,
+          region: backend.auth.stack.region,
         },
       },
       interpret: {
@@ -142,17 +134,14 @@ backend.addOutput({
             type: "ALL",
           },
           proxy: false,
-          region: Stack.of(backend.auth.resources.unauthenticatedUserIamRole)
-            .region,
+          region: backend.auth.stack.region,
         },
       },
     },
   },
 });
-
-
-
 ```
+
 ## Install Amplify Libraries
 
 To install the Amplify library to use predictions features, run the following commands in your project's root folder:

src/pages/[platform]/build-a-backend/auth/moving-to-production/index.mdx

@@ -45,29 +45,27 @@ To get started with Amazon SES in production, you must first [request production
 After you have configured your account for production access and have verified your _sender_ email, you can configure your Cognito user pool to send emails using the verified sender:
 
 ```ts title="amplify/backend.ts"
-import { Stack } from "aws-cdk-lib/core"
-import { EmailIdentity } from "aws-cdk-lib/aws-ses"
-import { defineBackend } from "@aws-amplify/backend"
-import { auth } from "./auth/resource"
+import { EmailIdentity } from 'aws-cdk-lib/aws-ses';
+import { defineBackend } from '@aws-amplify/backend';
+import { auth } from './auth/resource';
 
 const backend = defineBackend({
-  auth,
-})
+  auth
+});
 
-const { cfnUserPool } = backend.auth.resources.cfnResources
-const authStack = Stack.of(cfnUserPool)
+const { cfnUserPool } = backend.auth.resources.cfnResources;
 
 const email = EmailIdentity.fromEmailIdentityName(
-  authStack,
-  "EmailIdentity",
+  backend.auth.stack,
+  'EmailIdentity',
   // your email configured for use in SES
   process.env.EMAIL
-)
+);
 
 cfnUserPool.emailConfiguration = {
-  emailSendingAccount: "DEVELOPER",
-  sourceArn: email.emailIdentityArn,
-}
+  emailSendingAccount: 'DEVELOPER',
+  sourceArn: email.emailIdentityArn
+};
 ```
 
 Now when emails are sent on new user sign-ups, password resets, etc., the sending account will be your verified email.

src/pages/[platform]/build-a-backend/data/custom-business-logic/connect-amazon-rekognition/index.mdx

@@ -75,12 +75,10 @@ export const storage = defineStorage({
 To use the Amazon Rekognition service, you need to add Amazon Rekognition as an HTTP Data Source and configure the proper IAM policy for Lambda to effectively utilize the desired feature and grant permission to access the storage. In this case, you can add the `rekognition:DetectText` and `rekognition:DetectLabels` actions to the policy. Update the `amplify/backend.ts` file as shown below.
 
  ```ts title= "amplify/backend.ts"
-
+import { PolicyStatement } from 'aws-cdk-lib/aws-iam';
 import { defineBackend } from '@aws-amplify/backend';
 import { auth } from './auth/resource';
 import { data } from './data/resource';
-import { Stack } from 'aws-cdk-lib';
-import { PolicyStatement } from 'aws-cdk-lib/aws-iam';
 import { storage } from './storage/resource';
 
 const backend = defineBackend({
@@ -89,19 +87,17 @@ const backend = defineBackend({
   storage
 });
 
-const dataStack = Stack.of(backend.data)
-
 // Set environment variables for the S3 Bucket name
 backend.data.resources.cfnResources.cfnGraphqlApi.environmentVariables = {
   S3_BUCKET_NAME: backend.storage.resources.bucket.bucketName,
 };
 
 const rekognitionDataSource = backend.data.addHttpDataSource(
   "RekognitionDataSource",
-  `https://rekognition.${dataStack.region}.amazonaws.com`,
+  `https://rekognition.${backend.data.stack.region}.amazonaws.com`,
   {
     authorizationConfig: {
-      signingRegion: dataStack.region,
+      signingRegion: backend.data.stack.region,
       signingServiceName: "rekognition",
     },
   }

src/pages/[platform]/build-a-backend/data/custom-business-logic/connect-amazon-translate/index.mdx

@@ -60,24 +60,21 @@ npm add @aws-sdk/client-translate
 
  ```ts title="amplify/backend.ts"
 import { defineBackend } from '@aws-amplify/backend';
-import { auth } from './auth/resource';
-import { data } from "./data/resource";
-import { Stack } from 'aws-cdk-lib';
 import { PolicyStatement } from 'aws-cdk-lib/aws-iam';
+import { auth } from './auth/resource';
+import { data } from './data/resource';
 
 const backend = defineBackend({
   auth,
   data
 });
 
-const dataStack = Stack.of(backend.data)
-
 const translateDataSource = backend.data.addHttpDataSource(
   "TranslateDataSource",
-  `https://translate.${dataStack.region}.amazonaws.com`,
+  `https://translate.${backend.data.stack.region}.amazonaws.com`,
   {
     authorizationConfig: {
-      signingRegion: dataStack.region,
+      signingRegion: backend.data.stack.region,
       signingServiceName: "translate",
     },
   }

src/pages/[platform]/build-a-backend/data/custom-business-logic/connect-bedrock/index.mdx

@@ -85,11 +85,10 @@ backend.generateHaikuFunction.resources.lambda.addToRolePolicy(
 In your `amplify/backend.ts` file, replace the content with the following code to add an HTTP data source for Amazon Bedrock to your API and grant it permissions to invoke a generative AI model:
 
 ```ts title="amplify/backend.ts"
+import { Effect, PolicyStatement } from "aws-cdk-lib/aws-iam";
 import { defineBackend } from "@aws-amplify/backend";
 import { auth } from "./auth/resource";
 import { data } from "./data/resource";
-import { Effect, PolicyStatement } from "aws-cdk-lib/aws-iam";
-import { Stack } from "aws-cdk-lib";
 
 export const backend = defineBackend({
   auth,
@@ -103,7 +102,7 @@ const bedrockDataSource = backend.data.addHttpDataSource(
   "https://bedrock-runtime.us-east-1.amazonaws.com",
   {
     authorizationConfig: {
-      signingRegion: Stack.of(backend.data).region,
+      signingRegion: backend.data.stack.region,
       signingServiceName: "bedrock",
     },
   }
@@ -114,7 +113,7 @@ bedrockDataSource.grantPrincipal.addToPrincipalPolicy(
     effect: Effect.ALLOW,
     actions: ["bedrock:InvokeModel"],
     resources: [
-      `arn:aws:bedrock:${Stack.of(backend.data).region}::foundation-model/${MODEL_ID}`,
+      `arn:aws:bedrock:${backend.data.stack.region}::foundation-model/${MODEL_ID}`,
     ],
   })
 );
@@ -352,32 +351,31 @@ const { data, errors } = await client.queries.generateHaiku({
 Here's an example of a simple UI that prompts a generative AI model to create a haiku based on user input:
 
 ```tsx title="App.tsx"
-import { FormEvent, useState } from "react";
-
-import { generateClient } from "aws-amplify/api";
-import { Schema } from "@/amplify/data/resource";
-
-import { Amplify } from "aws-amplify";
-import outputs from "@/amplify_outputs.json";
+import type { Schema } from '@/amplify/data/resource';
+import type { FormEvent } from 'react';
+import { useState } from 'react';
+import { Amplify } from 'aws-amplify';
+import { generateClient } from 'aws-amplify/api';
+import outputs from '@/amplify_outputs.json';
 
 Amplify.configure(outputs);
 
 const client = generateClient<Schema>();
 
 export default function App() {
-  const [prompt, setPrompt] = useState<string>("");
+  const [prompt, setPrompt] = useState<string>('');
   const [answer, setAnswer] = useState<string | null>(null);
 
-  const sendPrompt = async (e: FormEvent<HTMLFormElement>) => {
-    e.preventDefault();
+  const sendPrompt = async (event: FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
 
     const { data, errors } = await client.queries.generateHaiku({
-      prompt,
+      prompt
     });
 
     if (!errors) {
       setAnswer(data);
-      setPrompt("");
+      setPrompt('');
     } else {
       console.log(errors);
     }
@@ -387,17 +385,15 @@ export default function App() {
     <main className="flex min-h-screen flex-col items-center justify-center p-24 dark:text-white">
       <div>
         <h1 className="text-3xl font-bold text-center mb-4">Haiku Generator</h1>
-
         <form className="mb-4 self-center max-w-[500px]" onSubmit={sendPrompt}>
           <input
             className="text-black p-2 w-full"
             placeholder="Enter a prompt..."
             name="prompt"
             value={prompt}
-            onChange={(e) => setPrompt(e.target.value)}
+            onChange={(event) => setPrompt(event.target.value)}
           />
         </form>
-
         <div className="text-center">
           <pre>{answer}</pre>
         </div>
@@ -407,7 +403,7 @@ export default function App() {
 }
 ```
 
-![GIF of a webpage titled "Haiku Generator" and input field. "Frank Herbert's Dune" is entered and submitted. Shortly after, a haiku is rendered to the page.](/images/haiku-generator.gif)
+![A webpage titled "Haiku Generator" and input field. "Frank Herbert's Dune" is entered and submitted. Shortly after, a haiku is rendered to the page.](/images/haiku-generator.gif)
 
 ## Conclusion