aws-amplify · katieklein · Mar 29, 2023 · Mar 21, 2023 · Mar 21, 2023
@@ -1,4 +1,10 @@
-It's recommended you add the Amplify configuration step to your app's root entry point. For example `App.js` in React or `main.ts` in Angular.
+import js0 from '/src/fragments/lib/common/js/import_configuration.mdx'
+
+<Fragments fragments={{ js: js0 }} />
+
+import rn1 from '/src/fragments/lib/common/react-native/import_configuration.mdx'
+
+<Fragments fragments={{ 'react-native': rn1 }} />
 
 ```javascript
 import { Amplify, Analytics } from 'aws-amplify';

@@ -107,11 +107,11 @@ import flutter11 from '/src/fragments/lib/analytics/flutter/getting-started/30_i
 
 <Fragments fragments={{ flutter: flutter11 }} />
 
-import js4 from '/src/fragments/lib/analytics/js/getting-started/30_initAnalytics.mdx';
+import js4 from '/src/fragments/lib/analytics/native_common/getting-started/30_initAnalytics.mdx';
 
 <Fragments fragments={{ js: js4 }} />
 
-import reactnative4 from '/src/fragments/lib/analytics/js/getting-started/30_initAnalytics.mdx';
+import reactnative4 from '/src/fragments/lib/analytics/native_common/getting-started/30_initAnalytics.mdx';
 
 <Fragments fragments={{ 'react-native': reactnative4 }} />
 

@@ -0,0 +1 @@
+Import and load the configuration file in your app. It's recommended you add the Amplify configuration step to your app's root entry point. For example `index.js` in React or `main.ts` in Angular.
@@ -0,0 +1 @@
+Import and load the configuration file in your app. It's recommended you add the Amplify configuration step to your app's root entry point. For example, **App.js** (Expo) or **index.js** (React Native CLI).
@@ -1,6 +1,8 @@
 ### Configure Amplify
 
-Next, you should import and load the `aws-exports.js` configuration file created by the CLI. Add the Amplify configuration step to your application’s root entry point. For example, `index.js`.
+import rn1 from '/src/fragments/lib/common/react-native/import_configuration.mdx'
+
+<Fragments fragments={{ 'react-native': rn1 }} />
 
 ```js
 import { Amplify } from 'aws-amplify';

@@ -1,4 +1,6 @@
-Import and load the configuration file in your app. It's recommended you add the Amplify configuration step to your app's root entry point. For example `App.js` in React or `main.ts` in Angular.
+import js0 from '/src/fragments/lib/common/js/import_configuration.mdx'
+
+<Fragments fragments={{ js: js0 }} />
 
 ```javascript
 import { Amplify, Interactions } from 'aws-amplify';

@@ -77,23 +77,23 @@ import { AWSLexV2Provider } from '@aws-amplify/interactions';
 Amplify.addPluggable(new AWSLexV2Provider());
 
 const interactionsConfig = {
-    Auth: {
-        identityPoolId: "<identityPoolId>",
-        region: "<region>"
-    },
-    Interactions: {
-        bots: {
-            // LexV2 Bot
-            <V2BotName>: {
-                name: "<V2BotName>",
-                aliasId: "<V2BotAliasId>",
-                botId: "<V2BotBotId>",
-                localeId: "<V2BotLocaleId>",
-                region: "<V2BotRegion>",
-                providerName: "AWSLexV2Provider",
-            },
-        }
+  Auth: {
+    identityPoolId: "<identityPoolId>",
+    region: "<region>"
+  },
+  Interactions: {
+    bots: {
+      // LexV2 Bot
+      <V2BotName>: {
+        name: "<V2BotName>",
+        aliasId: "<V2BotAliasId>",
+        botId: "<V2BotBotId>",
+        localeId: "<V2BotLocaleId>",
+        region: "<V2BotRegion>",
+        providerName: "AWSLexV2Provider",
+      },
     }
+  }
 }
 
 Amplify.configure(interactionsConfig);

@@ -22,7 +22,13 @@ A configuration file called `aws-exports.js` will be copied to your configured s
 
 ## Configure the frontend
 
-Import and load the configuration file in your app. It's recommended you add the Amplify configuration step to your app's root entry point. For example `App.js` in React or `main.ts` in Angular.
+import js0 from '/src/fragments/lib/common/js/import_configuration.mdx'
+
+<Fragments fragments={{ js: js0 }} />
+
+import rn1 from '/src/fragments/lib/common/react-native/import_configuration.mdx'
+
+<Fragments fragments={{ 'react-native': rn1 }} />
 
 ```javascript
 import { Amplify } from 'aws-amplify';
@@ -120,37 +126,37 @@ The Amplify CLI will set appropriate IAM policy for Roles in your Cognito Identi
 
 ```json
 {
-    "Version": "2012-10-17",
-    "Statement": [
-        {
-            "Effect": "Allow",
-            "Action": [
-                "translate:TranslateText",
-                "polly:SynthesizeSpeech",
-                "transcribe:StartStreamTranscriptionWebSocket",
-                "comprehend:DetectSentiment",
-                "comprehend:DetectEntities",
-                "comprehend:DetectDominantLanguage",
-                "comprehend:DetectSyntax",
-                "comprehend:DetectKeyPhrases",
-                "rekognition:DetectFaces",
-                "rekognition:RecognizeCelebrities"
-                "rekognition:DetectLabels",
-                "rekognition:DetectModerationLabels",
-                "rekognition:DetectText",
-                "rekognition:DetectLabel",
-                "textract:AnalyzeDocument",
-                "textract:DetectDocumentText",
-                "textract:GetDocumentAnalysis",
-                "textract:StartDocumentAnalysis",
-                "textract:StartDocumentTextDetection",
-                "rekognition:SearchFacesByImage"
-            ],
-            "Resource": [
-                "*"
-            ]
-        }
-    ]
+  "Version": "2012-10-17",
+  "Statement": [
+    {
+      "Effect": "Allow",
+      "Action": [
+        "translate:TranslateText",
+        "polly:SynthesizeSpeech",
+        "transcribe:StartStreamTranscriptionWebSocket",
+        "comprehend:DetectSentiment",
+        "comprehend:DetectEntities",
+        "comprehend:DetectDominantLanguage",
+        "comprehend:DetectSyntax",
+        "comprehend:DetectKeyPhrases",
+        "rekognition:DetectFaces",
+        "rekognition:RecognizeCelebrities"
+        "rekognition:DetectLabels",
+        "rekognition:DetectModerationLabels",
+        "rekognition:DetectText",
+        "rekognition:DetectLabel",
+        "textract:AnalyzeDocument",
+        "textract:DetectDocumentText",
+        "textract:GetDocumentAnalysis",
+        "textract:StartDocumentAnalysis",
+        "textract:StartDocumentTextDetection",
+        "rekognition:SearchFacesByImage"
+      ],
+      "Resource": [
+        "*"
+      ]
+    }
+  ]
 }
 ```
 

@@ -34,7 +34,13 @@ A configuration file called `aws-exports.js` will be copied to your configured s
 
 ### Configure your application
 
-Import and load the configuration file in your app. It's recommended you add the Amplify configuration step to your app's root entry point. For example `App.js` in React or `main.ts` in Angular.
+import js0 from '/src/fragments/lib/common/js/import_configuration.mdx'
+
+<Fragments fragments={{ js: js0 }} />
+
+import rn1 from '/src/fragments/lib/common/react-native/import_configuration.mdx'
+
+<Fragments fragments={{ 'react-native': rn1 }} />
 
 ```javascript
 import { Amplify, API } from 'aws-amplify';
@@ -51,26 +57,26 @@ For manual configuration you need to provide your AWS Resource configuration and
 import { Amplify, API } from 'aws-amplify';
 
 Amplify.configure({
-    // OPTIONAL - if your API requires authentication 
-    Auth: {
-        identityPoolId: 'XX-XXXX-X:XXXXXXXX-XXXX-1234-abcd-1234567890ab', // REQUIRED - Amazon Cognito Identity Pool ID
-        region: 'XX-XXXX-X', // REQUIRED - Amazon Cognito Region
-        userPoolId: 'XX-XXXX-X_abcd1234', // OPTIONAL - Amazon Cognito User Pool ID
-        userPoolWebClientId: 'a1b2c3d4e5f6g7h8i9j0k1l2m3', // OPTIONAL - Amazon Cognito Web Client ID (26-char alphanumeric string)
-    },
-    API: {
-        endpoints: [
-            {
-                name: "MyAPIGatewayAPI",
-                endpoint: "https://1234567890-abcdefgh.amazonaws.com"
-            },
-            {
-                name: "MyCustomCloudFrontApi",
-                endpoint: "https://api.my-custom-cloudfront-domain.com",
-
-            }
-        ]
-    }
+  // OPTIONAL - if your API requires authentication 
+  Auth: {
+    identityPoolId: 'XX-XXXX-X:XXXXXXXX-XXXX-1234-abcd-1234567890ab', // REQUIRED - Amazon Cognito Identity Pool ID
+    region: 'XX-XXXX-X', // REQUIRED - Amazon Cognito Region
+    userPoolId: 'XX-XXXX-X_abcd1234', // OPTIONAL - Amazon Cognito User Pool ID
+    userPoolWebClientId: 'a1b2c3d4e5f6g7h8i9j0k1l2m3', // OPTIONAL - Amazon Cognito Web Client ID (26-char alphanumeric string)
+  },
+  API: {
+    endpoints: [
+      {
+        name: "MyAPIGatewayAPI",
+        endpoint: "https://1234567890-abcdefgh.amazonaws.com"
+      },
+      {
+        name: "MyCustomCloudFrontApi",
+        endpoint: "https://api.my-custom-cloudfront-domain.com",
+
+      }
+    ]
+  }
 });
 ```
 
@@ -82,14 +88,14 @@ You can utilize regional endpoints by passing in the *service* and *region* info
 
 ```javascript
 API: {
-    endpoints: [
-        {
-            name: "MyCustomLambda",
-            endpoint: "https://lambda.us-east-1.amazonaws.com/2015-03-31/functions/yourFuncName/invocations",
-            service: "lambda",
-            region: "us-east-1"
-        }
-    ]
+  endpoints: [
+    {
+      name: "MyCustomLambda",
+      endpoint: "https://lambda.us-east-1.amazonaws.com/2015-03-31/functions/yourFuncName/invocations",
+      service: "lambda",
+      region: "us-east-1"
+    }
+  ]
 }
 ```
 <Callout warning>
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		Import and load the configuration file in your app. It's recommended you add the Amplify configuration step to your app's root entry point. For example `index.js` in React or `main.ts` in Angular.
tannerabread marked this conversation as resolved. Show resolved Hide resolved