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

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

* fix: accessibility issue with reference page

---------

Co-authored-by: Ashwin Kumar <[email protected]>

Author: ashwinkumar6

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

@@ -53,11 +53,15 @@ Alternatively, you can configure the client library directly using `Amplify.conf
 
 ```ts title="src/main.ts"
 import { Amplify } from 'aws-amplify';
+import { parseAmplifyConfig } from "aws-amplify/utils";
+import outputs from '../amplify_outputs.json';
+
+const amplifyConfig = parseAmplifyConfig(outputs);
 
 Amplify.configure({
-  ...Amplify.getConfig(),
+  ...amplifyConfig,
   Analytics: {
-    ...Amplify.getConfig().Analytics,
+    ...amplifyConfig.Analytics,
     Pinpoint: {
       // REQUIRED -  Amazon Pinpoint App Client ID
       appId: 'XXXXXXXXXXabcdefghij1234567890ab',

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

@@ -57,8 +57,12 @@ Configure Amazon Personalize:
 
 ```javascript title="src/index.js"
 import { Amplify } from 'aws-amplify';
+import outputs from '../amplify_outputs.json';
+
+const amplifyConfig = parseAmplifyConfig(outputs);
+
 Amplify.configure({
-  ...Amplify.getConfig(),
+  ...amplifyConfig,
   Analytics: {
     Personalize: {
       // REQUIRED - The trackingId to track the events

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

@@ -183,26 +183,18 @@ Import and load the configuration file in your app. It's recommended you add the
 <InlineFilter filters={["javascript", "angular", "react", "vue", "react-native"]}>
 ```js title="src/index.js"
 import { Amplify } from 'aws-amplify';
-import { record } from 'aws-amplify/analytics';
 import outputs from '../amplify_outputs.json';
 
-Amplify.configure({
-  ...Amplify.getConfig(),
-  Analytics: amplifyconfig.Analytics,
-});
+Amplify.configure(outputs);
 ```
 </InlineFilter>
 
 <InlineFilter filters={['nextjs']}>
 ```js title="pages/_app.tsx"
 import { Amplify } from 'aws-amplify';
-import { record } from 'aws-amplify/analytics';
 import outputs from '@/amplify_outputs.json';
 
-Amplify.configure({
-  ...Amplify.getConfig(),
-  Analytics: amplifyconfig.Analytics,
-});
+Amplify.configure(outputs);
 ```
 </InlineFilter>
 

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

@@ -128,9 +128,12 @@ Configure Firehose:
 
 ```javascript title="src/index.js"
 import { Amplify } from 'aws-amplify';
+import outputs from '../amplify_outputs.json';
+
+const amplifyConfig = parseAmplifyConfig(outputs);
 
 Amplify.configure({
-  ...Amplify.getConfig(),
+  ...amplifyConfig,
   Analytics: {
     KinesisFirehose: {
       // REQUIRED -  Amazon Kinesis Firehose service region

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

@@ -93,9 +93,12 @@ Configure Kinesis:
 ```javascript title="src/index.js"
 // Configure the plugin after adding it to the Analytics module
 import { Amplify } from 'aws-amplify';
+import outputs from '../amplify_outputs.json';
+
+const amplifyConfig = parseAmplifyConfig(outputs);
 
 Amplify.configure({
-  ...Amplify.getConfig(),
+  ...amplifyConfig,
   Analytics: {
     Kinesis: {
       // REQUIRED -  Amazon Kinesis service region

src/pages/[platform]/build-a-backend/add-aws-services/geo/existing-resources/index.mdx

@@ -101,15 +101,17 @@ There are two roles created by Cognito: an "authenticated role" that grants sign
 <InlineFilter filters={['javascript', 'angular', 'react', 'vue', 'react-native', 'nextjs']}>
 ## Configure client library directly
 
-You can first import and configure the generated `amplify_outputs.json`. You can then manually configure Amplify Geo like this:
+You can first import and parse the generated `amplify_outputs.json`. You can then manually configure Amplify Geo like this:
 
 ```js
 import { Amplify } from 'aws-amplify';
+import { parseAmplifyConfig } from "aws-amplify/utils";
 import outputs from '../amplify_outputs.json';
 
-Amplify.configure(outputs);
+const amplifyConfig = parseAmplifyConfig(outputs);
+
 Amplify.configure({
-  ...Amplify.getConfig(),
+  ...amplifyConfig,
   Geo: {
     LocationService: {
       maps: {

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

@@ -101,11 +101,13 @@ Import and load the configuration file in your app. It's recommended you add the
 
 ```javascript title="src/index.js"
 import { Amplify } from 'aws-amplify';
+import { parseAmplifyConfig } from "aws-amplify/utils";
 import outputs from '../amplify_outputs.json';
 
-Amplify.configure(outputs);
+const amplifyConfig = parseAmplifyConfig(outputs);
+
 Amplify.configure({
-  ...Amplify.getConfig(),
+  ...amplifyConfig,
   Interactions: {
     LexV2: {
       '<your-bot-name>': {

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

@@ -154,12 +154,7 @@ 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 outputs from '../amplify_outputs.json';
 
 Amplify.configure(outputs);
-
-Amplify.configure({
-  ...Amplify.getConfig(),
-  Predictions: outputs.custom.Predictions,
-});
 ```

src/pages/[platform]/build-a-backend/add-aws-services/rest-api/existing-resources/index.mdx

@@ -26,22 +26,22 @@ export function getStaticProps(context) {
   };
 }
 
-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 will 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:
+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 will need to parse the Amplify configuration using `parseAmplifyConfig` before calling `Amplify.configure()`. The following example shows how to configure additional API Gateway resources to an existing Amplify application:
 
 ```ts
 import { Amplify } from 'aws-amplify';
+import { parseAmplifyConfig } from "aws-amplify/utils";
 import outputs from '../amplify_outputs.json';
-Amplify.configure(outputs):
 
-const existingConfig = Amplify.getConfig();
+const amplifyConfig = parseAmplifyConfig(outputs);
 
 // Add existing resource to the existing configuration.
 Amplify.configure({
-  ...existingConfig,
+  ...amplifyConfig,
   API: {
-    ...existingConfig.API,
+    ...amplifyConfig.API,
     REST: {
-      ...existingConfig.API?.REST,
+      ...amplifyConfig.API?.REST,
       YourAPIName: {
         endpoint:
           'https://abcdefghij1234567890.execute-api.us-east-1.amazonaws.com/stageName',

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

@@ -228,14 +228,15 @@ Import and load the configuration file in your app. It's recommended you add the
 <InlineFilter filters={['javascript', "angular", "react", "vue", "react-native"]}>
 ```ts title="src/main.ts"
 import { Amplify } from 'aws-amplify';
+import { parseAmplifyConfig } from "aws-amplify/utils";
 import outputs from '../amplify_outputs.json';
 
-Amplify.configure(outputs);
-const existingConfig = Amplify.getConfig();
+const amplifyConfig = parseAmplifyConfig(outputs);
+
 Amplify.configure({
-  ...existingConfig,
+  ...amplifyConfig,
   API: {
-    ...existingConfig.API,
+    ...amplifyConfig.API,
     REST: outputs.custom.API,
   },
 });
@@ -245,14 +246,15 @@ Amplify.configure({
 <InlineFilter filters={["nextjs"]}>
 ```tsx title="pages/_app.tsx"
 import { Amplify } from 'aws-amplify';
+import { parseAmplifyConfig } from "aws-amplify/utils";
 import outputs from '@/amplify_outputs.json';
 
-Amplify.configure(outputs);
-const existingConfig = Amplify.getConfig();
+const amplifyConfig = parseAmplifyConfig(outputs);
+
 Amplify.configure({
-  ...existingConfig,
+  ...amplifyConfig,
   API: {
-    ...existingConfig.API,
+    ...amplifyConfig.API,
     REST: outputs.custom.API,
   },
 });

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

@@ -211,14 +211,15 @@ Import and load the configuration file in your app. It's recommended you add the
 <InlineFilter filters={['javascript', "angular", "react", "vue", "react-native"]}>
 ```javascript title="src/main.ts"
 import { Amplify } from 'aws-amplify';
+import { parseAmplifyConfig } from "aws-amplify/utils";
 import outputs from '../amplify_outputs.json';
 
-Amplify.configure(outputs);
-const existingConfig = Amplify.getConfig();
+const amplifyConfig = parseAmplifyConfig(outputs);
+
 Amplify.configure({
-  ...existingConfig,
+  ...amplifyConfig,
   API: {
-    ...existingConfig.API,
+    ...amplifyConfig.API,
     REST: outputs.custom.API,
   },
 });
@@ -228,14 +229,15 @@ Amplify.configure({
 <InlineFilter filters={["nextjs"]}>
 ```tsx title="pages/_app.tsx"
 import { Amplify } from 'aws-amplify';
+import { parseAmplifyConfig } from "aws-amplify/utils";
 import outputs from '@/amplify_outputs.json';
 
-Amplify.configure(outputs);
-const existingConfig = Amplify.getConfig();
+const amplifyConfig = parseAmplifyConfig(outputs);
+
 Amplify.configure({
-  ...existingConfig,
+  ...amplifyConfig,
   API: {
-    ...existingConfig.API,
+    ...amplifyConfig.API,
     REST: outputs.custom.API,
   },
 });

src/pages/[platform]/reference/amplify_outputs/index.mdx

@@ -104,12 +104,13 @@ In your frontend application, you can access these custom configurations as foll
 
 ```ts title="src/index.ts"
 import { Amplify } from "aws-amplify";
+import { parseAmplifyConfig } from "aws-amplify/utils";
 import outputs from "@/amplify_outputs.json";
 
-Amplify.configure(outputs);
-const currentConfig = Amplify.getConfig(); 
+const amplifyConfig = parseAmplifyConfig(outputs);
+
 Amplify.configure({
-  ...currentConfig,
+  ...amplifyConfig,
   API: {
     REST: {
       [outputs.custom.api_name]: {
@@ -126,6 +127,6 @@ Amplify.configure({
 
 The Amplify outputs file is defined using a JSON schema. You can find this schema in the [`aws-amplify/amplify-backend` repository](https://github.com/aws-amplify/amplify-backend/blob/main/packages/client-config/src/client-config-schema/schema_v1.json).
 
-<pre><code style={{ maxWidth: "100%", overflowX: "scroll" }}>
+<pre><code tabIndex="0" style={{ maxWidth: "100%", overflowX: "scroll" }}>
 {JSON.stringify(schema, null, 2)}
 </code></pre>