fix(js): gen1 recommend parseAmplifyConfig instead of calling configure twice

src/fragments/lib/analytics/js/existing-resources.mdx

@@ -4,11 +4,15 @@ The manual setup enables you to use your existing Amazon Pinpoint resource in yo
 
 ```javascript
 import { Amplify } from 'aws-amplify';
+import { parseAmplifyConfig } from "aws-amplify/utils";
+import amplifyconfig from './amplifyconfiguration.json';
+
+const resourceConfig = parseAmplifyConfig(amplifyconfig);
 
 Amplify.configure({
-  ...Amplify.getConfig(),
+  ...resourceConfig,
   Analytics: {
-    ...Amplify.getConfig().Analytics,
+    ...resourceConfig.Analytics,
     Pinpoint: {
       // REQUIRED -  Amazon Pinpoint App Client ID
       appId: 'XXXXXXXXXXabcdefghij1234567890ab',

src/fragments/lib/analytics/js/personalize.mdx

@@ -29,9 +29,11 @@ Configure Amazon Personalize:
 
 ```javascript
 import { Amplify } from 'aws-amplify';
+import { parseAmplifyConfig } from "aws-amplify/utils";
+import amplifyconfig from './amplifyconfiguration.json';
 
 Amplify.configure({
-  ...Amplify.getConfig(),
+  ...parseAmplifyConfig(amplifyconfig),
   Analytics: {
     Personalize: {
       // REQUIRED - The trackingId to track the events

src/fragments/lib/analytics/js/storing.mdx

@@ -22,9 +22,11 @@ Configure Kinesis Firehose:
 
 ```javascript
 import { Amplify } from 'aws-amplify';
+import { parseAmplifyConfig } from "aws-amplify/utils";
+import amplifyconfig from './amplifyconfiguration.json';
 
 Amplify.configure({
-  ...Amplify.getConfig(),
+  ...parseAmplifyConfig(amplifyconfig),
   Analytics: {
     KinesisFirehose: {
       // REQUIRED -  Amazon Kinesis Firehose service region

src/fragments/lib/analytics/js/streaming.mdx

@@ -24,9 +24,11 @@ Configure Kinesis:
 ```javascript
 // Configure the plugin after adding it to the Analytics module
 import { Amplify } from 'aws-amplify';
+import { parseAmplifyConfig } from "aws-amplify/utils";
+import amplifyconfig from './amplifyconfiguration.json';
 
 Amplify.configure({
-  ...Amplify.getConfig(),
+  ...parseAmplifyConfig(amplifyconfig),
   Analytics: {
     Kinesis: {
       // REQUIRED -  Amazon Kinesis service region

src/fragments/lib/geo/js/existing-resources.mdx

@@ -4,11 +4,11 @@ You can first import and configure the CLI generated `amplifyconfiguration.json`
 
 ```js
 import { Amplify } from 'aws-amplify';
+import { parseAmplifyConfig } from "aws-amplify/utils";
 import amplifyconfig from './amplifyconfiguration.json';
 
-Amplify.configure(amplifyconfig);
 Amplify.configure({
-  ...Amplify.getConfig(),
+  ...parseAmplifyConfig(amplifyconfig),
   Geo: {
     LocationService: {
       maps: {

src/fragments/lib/interactions/js/getting-started.mdx

@@ -35,11 +35,11 @@ For adding IAM permissions, find you IAM role and attach the policy below (_reme
 
 ```javascript
 import { Amplify } from 'aws-amplify';
+import { parseAmplifyConfig } from "aws-amplify/utils";
 import amplifyconfig from './amplifyconfiguration.json';
 
-Amplify.configure(amplifyconfig);
 Amplify.configure({
-  ...Amplify.getConfig(),
+  ...parseAmplifyConfig(amplifyconfig),
   Interactions: {
     LexV2: {
       '<V2BotName>': {
@@ -125,11 +125,11 @@ Configuring bot details in your web app like this:
 
 ```javascript
 import { Amplify } from 'aws-amplify';
+import { parseAmplifyConfig } from "aws-amplify/utils";
 import amplifyconfig from './amplifyconfiguration.json';
 
-Amplify.configure(amplifyconfig);
 Amplify.configure({
-  ...Amplify.getConfig(),
+  ...parseAmplifyConfig(amplifyconfig),
   Interactions: {
     LexV1: {
       '<V1BotName>': {

src/fragments/lib/restapi/js/existing-resources.mdx

@@ -1,13 +1,18 @@
 Existing Amazon API Gateway resources can be used with the Amplify Libraries by calling `Amplify.configure()` with the API Gateway API name and options. Note you need to supply the full resource configuration and library options objects when calling `Amplify.configure()`. The following example shows how to configure additional API Gateway resources to an existing Amplify application:
 
 ```javascript
-const existingConfig = Amplify.getConfig();
+import { Amplify } from 'aws-amplify';
+import { parseAmplifyConfig } from "aws-amplify/utils";
+import amplifyconfig from './amplifyconfiguration.json';
+
+const resourceConfig = parseAmplifyConfig(amplifyconfig);
+
 Amplify.configure({
-  ...existingConfig,
+  ...resourceConfig,
   API: {
-    ...existingConfig.API,
+    ...resourceConfig.API,
     REST: {
-      ...existingConfig.API?.REST,
+      ...resourceConfig.API?.REST,
       '[API NAME]': {
         endpoint: '[API GATEWAY ENDPOINT]',
         region: '[REGION]'

src/fragments/lib/troubleshooting/common/upgrading.mdx

@@ -177,7 +177,7 @@ Wherever you called `Amplify.configure({ aws-exports });` previously (usually in
 </Columns>
 
 <Callout>
-  `Amplify.configure()` will now accept either the config JSON file or a strongly typed configuration object. Therefore, if you need to add additional configuration, you will call configure twice: once with the contents of **amplifyconfiguration.json**, and then again using `Amplify.getConfig()` plus any additions. Keep in mind that any call to configuration will fully override previous configurations, so pay special attention to nested configurations.
+  `Amplify.configure()` accepts either the config JSON file or a ResourceConfig configuration object. You can use the `parseAmplifyConfig` util to parse the contents of the config JSON file **amplifyconfiguration.json** into the ResourceConfig configuration object and override properties as needed. Keep in mind that any call to configuration will fully override previous configurations, so pay special attention to nested configurations.
 </Callout>
 
 If you have previously configured Amplify by passing the configuration object literal when calling the `Amplify.configure()` function, you can now configure Amplify manually with type safety. Please refer to the documentation of each category that you are using for migration.
@@ -635,10 +635,9 @@ In v6, the `AWSLexV2Provider` provider will be included by default and you are n
   <Block name="V6">
     ```
     import { Amplify } from 'aws-amplify';
+    import { parseAmplifyConfig } from "aws-amplify/utils";
     import amplifyconfig from './amplifyconfiguration.json';
 
-    Amplify.configure(amplifyconfig);
-
     const interactionsConfig = {
       LexV2: {
         '<V2BotName>': {
@@ -651,7 +650,7 @@ In v6, the `AWSLexV2Provider` provider will be included by default and you are n
     }
 
     Amplify.configure({
-      ...Amplify.getConfig(),
+      ...parseAmplifyConfig(amplifyconfig),
       Interactions: interactionsConfig
     });
     ```

src/pages/[platform]/build-a-backend/add-aws-services/analytics/streaming-data/index.mdx

@@ -93,6 +93,7 @@ Configure Kinesis:
 ```javascript title="src/index.js"
 // Configure the plugin after adding it to the Analytics module
 import { Amplify } from 'aws-amplify';
+import { parseAmplifyConfig } from "aws-amplify/utils";
 import outputs from '../amplify_outputs.json';
 
 const amplifyConfig = parseAmplifyConfig(outputs);

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

@@ -154,7 +154,13 @@ Import and load the configuration file in your app. It is recommended you add th
 
 ```ts title="src/main.ts"
 import { Amplify } from "aws-amplify";
-import outputs from '../amplify_outputs.json';
+import { parseAmplifyConfig } from "aws-amplify/utils";
+import outputs from './amplify_outputs.json';
 
-Amplify.configure(outputs);
+const amplifyConfig = parseAmplifyConfig(outputs);
+
+Amplify.configure({
+  ...amplifyConfig,
+  Predictions: outputs.custom.Predictions,
+});
 ```

src/pages/gen1/[platform]/build-a-backend/restapi/existing-resources/index.mdx

@@ -47,18 +47,18 @@ Existing Amazon API Gateway resources can be used with the Amplify Libraries by
 
 ```javascript
 import { Amplify } from 'aws-amplify';
+import { parseAmplifyConfig } from "aws-amplify/utils";
 import amplifyconfig from './src/amplifyconfiguration.json';
-Amplify.configure(amplifyconfig):
 
-const existingConfig = Amplify.getConfig();
+const resourceConfig = parseAmplifyConfig(amplifyconfig);
 
 // Add existing resource to the existing configuration.
 Amplify.configure({
-  ...existingConfig,
+  ...resourceConfig,
   API: {
-    ...existingConfig.API,
+    ...resourceConfig.API,
     REST: {
-      ...existingConfig.API?.REST,
+      ...resourceConfig.API?.REST,
       YourAPIName: {
         endpoint:
           'https://abcdefghij1234567890.execute-api.us-east-1.amazonaws.com/stageName',

src/pages/gen1/[platform]/build-a-backend/storage/existing-resources/index.mdx

@@ -59,11 +59,11 @@ If you are not using the Amplify CLI, an existing Amazon S3 bucket can be used b
 </Callout>
 ```javascript
 import { Amplify } from 'aws-amplify';
-import amplifyconfig from './amplifyconfiguration.json';
+import { parseAmplifyConfig } from "aws-amplify/utils";
+import resourceConfig from './amplifyconfiguration.json';
 
-Amplify.configure(amplifyconfig);
 Amplify.configure({
-  ...Amplify.getConfig(),
+  ...parseAmplifyConfig(resourceConfig),
   Storage: {
     S3: {
       region: '[REGION]', // (required) - Amazon S3 bucket region