Page updated Mar 12, 2024

About amplifyconfiguration

In Amplify Gen 2, the CLI will generate an amplifyconfiguration.json file with a similar structure to the configuration files generated by Amplify Gen 1. Locally, this file is created while using amplify sandbox. In Amplify's CI/CD, this is created automatically for you based on the current Amplify app ID and git branch.

You can also manually create this file for a specified Amplify app ID and branch, or an AWS CloudFormation stack name with amplify generate config.

Extending Amplify configuration file

The amplifyconfiguration.json file is not just a static artifact; it's designed to be extendable to suit the evolving needs of your application. By leveraging the addOutput method from your backend, you can programmatically add configurations. This is particularly useful for customizing outputs that are not directly exposed through the Amplify constructs or for dynamically adjusting your app's configuration in response to changes in your backend strategy.

Overriding Amplify-managed configurations on amplifyconfiguration.json is not supported.

One common scenario where extending the configuration becomes handy is when you need to add custom outputs or extend existing configurations without manual file edits.

Consider a scenario where you want to add output parameters in your amplifyconfiguration.json that specify an S3 bucket and its region that your application will use for storing files.

amplify/backend.ts
1import { defineBackend } from "@aws-amplify/backend";
2import { auth } from "./auth/resource";
3import { data } from "./data/resource";
4
5const backend = defineBackend({
6 auth,
7 data,
8});
9
10backend.addOutput({
11 aws_user_files_s3_bucket: "my-externally-managed-bucket",
12 aws_user_files_s3_bucket_region: "us-east-1",
13});

In your frontend end application, you can configure Amplify as follows:

src/index.ts
1import { Amplify } from "aws-amplify";
2import config from "@/amplifyconfiguration.json";
3
4Amplify.configure(config);

Custom configuration

In addition to extending existing configurations, you can also add custom output parameters to your amplifyconfiguration.json. This is useful for surfacing arbitrary outputs, values from custom CDK resources, or any other information that might be necessary for your application's logic or configuration.

amplify/backend.ts
1import { defineBackend } from "@aws-amplify/backend";
2import { auth } from "./auth/resource";
3import { data } from "./data/resource";
4
5const backend = defineBackend({
6 auth,
7 data,
8});
9
10backend.addOutput({
11 custom: {
12 apiId: "restAPIId",
13 apiEndpoint: "https://api.example.com",
14 apiName: "restApiName",
15 },
16});

In your frontend end application, you can access these custom configurations as follows:

src/index.ts
1import { Amplify } from "aws-amplify";
2import config from "@/amplifyconfiguration.json";
3
4Amplify.configure(config);
5const currentConfig = Amplify.getConfig();
6Amplify.configure({
7 ...currentConfig,
8 API: {
9 REST: {
10 [config.custom.apiName]: {
11 endpoint: config.custom.apiEndpoint,
12 region: "us-east-1",
13 },
14 },
15 },
16});