Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 6 additions & 2 deletions src/fragments/lib/analytics/js/existing-resources.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand Down
4 changes: 3 additions & 1 deletion src/fragments/lib/analytics/js/personalize.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
4 changes: 3 additions & 1 deletion src/fragments/lib/analytics/js/storing.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
4 changes: 3 additions & 1 deletion src/fragments/lib/analytics/js/streaming.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
4 changes: 2 additions & 2 deletions src/fragments/lib/geo/js/existing-resources.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -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: {
Expand Down
8 changes: 4 additions & 4 deletions src/fragments/lib/interactions/js/getting-started.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -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>': {
Expand Down Expand Up @@ -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>': {
Expand Down
13 changes: 9 additions & 4 deletions src/fragments/lib/restapi/js/existing-resources.mdx
Original file line number Diff line number Diff line change
@@ -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]'
Expand Down
7 changes: 3 additions & 4 deletions src/fragments/lib/troubleshooting/common/upgrading.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -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](/gen1/[platform]/tools/libraries/configure-categories/). 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.
Expand Down Expand Up @@ -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>': {
Expand All @@ -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
});
```
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down