From ec7eada0970c4554180ac709f78f7867f74d5a15 Mon Sep 17 00:00:00 2001 From: Bannon Tanner Date: Tue, 21 Mar 2023 14:35:43 -0500 Subject: [PATCH 1/2] standardized 'configuring you app' steps --- .../getting-started/30_initAnalytics.mdx | 8 +- .../native_common/getting-started/common.mdx | 10 +- .../lib/common/js/import_configuration.mdx | 1 + .../react-native/import_configuration.mdx | 1 + .../react-native/configure-amplify.mdx | 4 +- .../lib/interactions/js/frontend.mdx | 4 +- .../lib/interactions/js/getting-started.mdx | 32 +- .../lib/predictions/js/getting-started.mdx | 70 +++-- .../lib/restapi/js/getting-started.mdx | 64 ++-- .../lib/storage/js/getting-started.mdx | 283 +++++++++--------- 10 files changed, 254 insertions(+), 223 deletions(-) rename src/fragments/lib/analytics/{js => native_common}/getting-started/30_initAnalytics.mdx (56%) create mode 100644 src/fragments/lib/common/js/import_configuration.mdx create mode 100644 src/fragments/lib/common/react-native/import_configuration.mdx diff --git a/src/fragments/lib/analytics/js/getting-started/30_initAnalytics.mdx b/src/fragments/lib/analytics/native_common/getting-started/30_initAnalytics.mdx similarity index 56% rename from src/fragments/lib/analytics/js/getting-started/30_initAnalytics.mdx rename to src/fragments/lib/analytics/native_common/getting-started/30_initAnalytics.mdx index aaf12c4cc6b..e9087c36840 100644 --- a/src/fragments/lib/analytics/js/getting-started/30_initAnalytics.mdx +++ b/src/fragments/lib/analytics/native_common/getting-started/30_initAnalytics.mdx @@ -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' + + + +import rn1 from '/src/fragments/lib/common/react-native/import_configuration.mdx' + + ```javascript import { Amplify, Analytics } from 'aws-amplify'; diff --git a/src/fragments/lib/analytics/native_common/getting-started/common.mdx b/src/fragments/lib/analytics/native_common/getting-started/common.mdx index af16688206d..82a36251c39 100644 --- a/src/fragments/lib/analytics/native_common/getting-started/common.mdx +++ b/src/fragments/lib/analytics/native_common/getting-started/common.mdx @@ -38,11 +38,11 @@ amplify add analytics ```console ? Select an Analytics provider (Use arrow keys) - `Amazon Pinpoint` + `Amazon Pinpoint` ? Provide your pinpoint resource name: - `yourPinpointResourceName` + `yourPinpointResourceName` ? Apps need authorization to send analytics events. Do you want to allow guests and unauthenticated users to send analytics events? (we recommend you allow this when getting started) - `Yes` + `Yes` ``` To deploy your backend, run: @@ -107,11 +107,11 @@ import flutter11 from '/src/fragments/lib/analytics/flutter/getting-started/30_i -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'; -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'; diff --git a/src/fragments/lib/common/js/import_configuration.mdx b/src/fragments/lib/common/js/import_configuration.mdx new file mode 100644 index 00000000000..4d51122069d --- /dev/null +++ b/src/fragments/lib/common/js/import_configuration.mdx @@ -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. diff --git a/src/fragments/lib/common/react-native/import_configuration.mdx b/src/fragments/lib/common/react-native/import_configuration.mdx new file mode 100644 index 00000000000..c8128cd2465 --- /dev/null +++ b/src/fragments/lib/common/react-native/import_configuration.mdx @@ -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). diff --git a/src/fragments/lib/in-app-messaging/integrate-your-application/react-native/configure-amplify.mdx b/src/fragments/lib/in-app-messaging/integrate-your-application/react-native/configure-amplify.mdx index 4732f44af10..167c9811a07 100644 --- a/src/fragments/lib/in-app-messaging/integrate-your-application/react-native/configure-amplify.mdx +++ b/src/fragments/lib/in-app-messaging/integrate-your-application/react-native/configure-amplify.mdx @@ -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' + + ```js import { Amplify } from 'aws-amplify'; diff --git a/src/fragments/lib/interactions/js/frontend.mdx b/src/fragments/lib/interactions/js/frontend.mdx index 8d54e0f49ce..242793e27e8 100644 --- a/src/fragments/lib/interactions/js/frontend.mdx +++ b/src/fragments/lib/interactions/js/frontend.mdx @@ -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' + + ```javascript import { Amplify, Interactions } from 'aws-amplify'; diff --git a/src/fragments/lib/interactions/js/getting-started.mdx b/src/fragments/lib/interactions/js/getting-started.mdx index f328715abcf..108cbb21226 100644 --- a/src/fragments/lib/interactions/js/getting-started.mdx +++ b/src/fragments/lib/interactions/js/getting-started.mdx @@ -77,23 +77,23 @@ import { AWSLexV2Provider } from '@aws-amplify/interactions'; Amplify.addPluggable(new AWSLexV2Provider()); const interactionsConfig = { - Auth: { - identityPoolId: "", - region: "" - }, - Interactions: { - bots: { - // LexV2 Bot - : { - name: "", - aliasId: "", - botId: "", - localeId: "", - region: "", - providerName: "AWSLexV2Provider", - }, - } + Auth: { + identityPoolId: "", + region: "" + }, + Interactions: { + bots: { + // LexV2 Bot + : { + name: "", + aliasId: "", + botId: "", + localeId: "", + region: "", + providerName: "AWSLexV2Provider", + }, } + } } Amplify.configure(interactionsConfig); diff --git a/src/fragments/lib/predictions/js/getting-started.mdx b/src/fragments/lib/predictions/js/getting-started.mdx index 2cbc1b5e2ce..2ecf81b3f98 100644 --- a/src/fragments/lib/predictions/js/getting-started.mdx +++ b/src/fragments/lib/predictions/js/getting-started.mdx @@ -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' + + + +import rn1 from '/src/fragments/lib/common/react-native/import_configuration.mdx' + + ```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": [ + "*" + ] + } + ] } ``` diff --git a/src/fragments/lib/restapi/js/getting-started.mdx b/src/fragments/lib/restapi/js/getting-started.mdx index 6ad9c1a3bf7..97a96ccf94c 100644 --- a/src/fragments/lib/restapi/js/getting-started.mdx +++ b/src/fragments/lib/restapi/js/getting-started.mdx @@ -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' + + + +import rn1 from '/src/fragments/lib/common/react-native/import_configuration.mdx' + + ```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" + } + ] } ``` diff --git a/src/fragments/lib/storage/js/getting-started.mdx b/src/fragments/lib/storage/js/getting-started.mdx index 47dcaaba306..871ba9747cb 100644 --- a/src/fragments/lib/storage/js/getting-started.mdx +++ b/src/fragments/lib/storage/js/getting-started.mdx @@ -38,7 +38,14 @@ Add Amplify to your app with `yarn` or `npm`: npm install aws-amplify ``` -In your app’s entry point i.e. `App.js`, import and load the configuration file `aws-exports.js` which has been created and replaced into `/src` folder in the previous step. +import js0 from '/src/fragments/lib/common/js/import_configuration.mdx' + + + +import rn1 from '/src/fragments/lib/common/react-native/import_configuration.mdx' + + + ```javascript import { Amplify, Storage } from 'aws-amplify'; import awsconfig from './aws-exports'; @@ -53,18 +60,18 @@ To configure Storage manually, you will have to configure Amplify Auth category import { Amplify, Auth, Storage } from 'aws-amplify'; Amplify.configure({ - 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: 'XX-XXXX-X_abcd1234', //OPTIONAL - Amazon Cognito Web Client ID - }, - Storage: { - AWSS3: { - bucket: '', //REQUIRED - Amazon S3 bucket name - region: 'XX-XXXX-X', //OPTIONAL - Amazon service region - } + 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: 'XX-XXXX-X_abcd1234', //OPTIONAL - Amazon Cognito Web Client ID + }, + Storage: { + AWSS3: { + bucket: '', //REQUIRED - Amazon S3 bucket name + region: 'XX-XXXX-X', //OPTIONAL - Amazon service region } + } }); ``` @@ -78,61 +85,61 @@ Inline policy for the `Auth_Role`: ```json { - "Version": "2012-10-17", - "Statement": [ - { - "Action": [ - "s3:GetObject", - "s3:PutObject", - "s3:DeleteObject" - ], - "Resource": [ - "arn:aws:s3:::{enter bucket name}/public/*", - "arn:aws:s3:::{enter bucket name}/protected/${cognito-identity.amazonaws.com:sub}/*", - "arn:aws:s3:::{enter bucket name}/private/${cognito-identity.amazonaws.com:sub}/*" - ], - "Effect": "Allow" - }, - { - "Action": [ - "s3:PutObject" - ], - "Resource": [ - "arn:aws:s3:::{enter bucket name}/uploads/*" - ], - "Effect": "Allow" - }, - { - "Action": [ - "s3:GetObject" - ], - "Resource": [ - "arn:aws:s3:::{enter bucket name}/protected/*" - ], - "Effect": "Allow" - }, - { - "Condition": { - "StringLike": { - "s3:prefix": [ - "public/", - "public/*", - "protected/", - "protected/*", - "private/${cognito-identity.amazonaws.com:sub}/", - "private/${cognito-identity.amazonaws.com:sub}/*" - ] - } - }, - "Action": [ - "s3:ListBucket" - ], - "Resource": [ - "arn:aws:s3:::{enter bucket name}" - ], - "Effect": "Allow" + "Version": "2012-10-17", + "Statement": [ + { + "Action": [ + "s3:GetObject", + "s3:PutObject", + "s3:DeleteObject" + ], + "Resource": [ + "arn:aws:s3:::{enter bucket name}/public/*", + "arn:aws:s3:::{enter bucket name}/protected/${cognito-identity.amazonaws.com:sub}/*", + "arn:aws:s3:::{enter bucket name}/private/${cognito-identity.amazonaws.com:sub}/*" + ], + "Effect": "Allow" + }, + { + "Action": [ + "s3:PutObject" + ], + "Resource": [ + "arn:aws:s3:::{enter bucket name}/uploads/*" + ], + "Effect": "Allow" + }, + { + "Action": [ + "s3:GetObject" + ], + "Resource": [ + "arn:aws:s3:::{enter bucket name}/protected/*" + ], + "Effect": "Allow" + }, + { + "Condition": { + "StringLike": { + "s3:prefix": [ + "public/", + "public/*", + "protected/", + "protected/*", + "private/${cognito-identity.amazonaws.com:sub}/", + "private/${cognito-identity.amazonaws.com:sub}/*" + ] } - ] + }, + "Action": [ + "s3:ListBucket" + ], + "Resource": [ + "arn:aws:s3:::{enter bucket name}" + ], + "Effect": "Allow" + } + ] } ``` @@ -140,57 +147,57 @@ Inline policy for the `Unauth_Role`: ```json { - "Version": "2012-10-17", - "Statement": [ - { - "Action": [ - "s3:GetObject", - "s3:PutObject", - "s3:DeleteObject" - ], - "Resource": [ - "arn:aws:s3:::{enter bucket name}/public/*" - ], - "Effect": "Allow" - }, - { - "Action": [ - "s3:PutObject" - ], - "Resource": [ - "arn:aws:s3:::{enter bucket name}/uploads/*" - ], - "Effect": "Allow" - }, - { - "Action": [ - "s3:GetObject" - ], - "Resource": [ - "arn:aws:s3:::{enter bucket name}/protected/*" - ], - "Effect": "Allow" - }, - { - "Condition": { - "StringLike": { - "s3:prefix": [ - "public/", - "public/*", - "protected/", - "protected/*" - ] - } - }, - "Action": [ - "s3:ListBucket" - ], - "Resource": [ - "arn:aws:s3:::{enter bucket name}" - ], - "Effect": "Allow" + "Version": "2012-10-17", + "Statement": [ + { + "Action": [ + "s3:GetObject", + "s3:PutObject", + "s3:DeleteObject" + ], + "Resource": [ + "arn:aws:s3:::{enter bucket name}/public/*" + ], + "Effect": "Allow" + }, + { + "Action": [ + "s3:PutObject" + ], + "Resource": [ + "arn:aws:s3:::{enter bucket name}/uploads/*" + ], + "Effect": "Allow" + }, + { + "Action": [ + "s3:GetObject" + ], + "Resource": [ + "arn:aws:s3:::{enter bucket name}/protected/*" + ], + "Effect": "Allow" + }, + { + "Condition": { + "StringLike": { + "s3:prefix": [ + "public/", + "public/*", + "protected/", + "protected/*" + ] } - ] + }, + "Action": [ + "s3:ListBucket" + ], + "Resource": [ + "arn:aws:s3:::{enter bucket name}" + ], + "Effect": "Allow" + } + ] } ``` @@ -212,28 +219,28 @@ The following steps will set up your CORS Policy: ```json [ - { - "AllowedHeaders": [ - "*" - ], - "AllowedMethods": [ - "GET", - "HEAD", - "PUT", - "POST", - "DELETE" - ], - "AllowedOrigins": [ - "*" - ], - "ExposeHeaders": [ - "x-amz-server-side-encryption", - "x-amz-request-id", - "x-amz-id-2", - "ETag" - ], - "MaxAgeSeconds": 3000 - } + { + "AllowedHeaders": [ + "*" + ], + "AllowedMethods": [ + "GET", + "HEAD", + "PUT", + "POST", + "DELETE" + ], + "AllowedOrigins": [ + "*" + ], + "ExposeHeaders": [ + "x-amz-server-side-encryption", + "x-amz-request-id", + "x-amz-id-2", + "ETag" + ], + "MaxAgeSeconds": 3000 + } ] ``` From 90f21dbd67e0b70d210780f5f472ee951073c2f5 Mon Sep 17 00:00:00 2001 From: Bannon Tanner Date: Tue, 21 Mar 2023 16:38:47 -0500 Subject: [PATCH 2/2] removed CLI prompt from indent rule --- .../lib/analytics/native_common/getting-started/common.mdx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/fragments/lib/analytics/native_common/getting-started/common.mdx b/src/fragments/lib/analytics/native_common/getting-started/common.mdx index 82a36251c39..5af8d8ef360 100644 --- a/src/fragments/lib/analytics/native_common/getting-started/common.mdx +++ b/src/fragments/lib/analytics/native_common/getting-started/common.mdx @@ -38,11 +38,11 @@ amplify add analytics ```console ? Select an Analytics provider (Use arrow keys) - `Amazon Pinpoint` + `Amazon Pinpoint` ? Provide your pinpoint resource name: - `yourPinpointResourceName` + `yourPinpointResourceName` ? Apps need authorization to send analytics events. Do you want to allow guests and unauthenticated users to send analytics events? (we recommend you allow this when getting started) - `Yes` + `Yes` ``` To deploy your backend, run: