amplifyconfiguration.json -> amplify_outputs.json

src/pages/[platform]/build-a-backend/auth/set-up-auth/index.mdx

@@ -158,7 +158,7 @@ In your app's entry point (specifically, **App.js**, **index.js**, **\_app.js**,
 ```javascript
 import { Amplify } from 'aws-amplify';
 import config from './amplifyconfiguration.json';
-Amplify.configure(config);
+Amplify.configure(outputs);
 ```
 
 <Callout warning="true">
@@ -210,7 +210,7 @@ In your app's entry point (specifically, **App.js**, **index.js**, **\_app.js**,
 ```javascript
 import { Amplify } from 'aws-amplify';
 import config from './amplifyconfiguration.json';
-Amplify.configure(config);
+Amplify.configure(outputs);
 ```
 
 <Callout warning="true">
@@ -376,7 +376,7 @@ import type { WithAuthenticatorProps } from '@aws-amplify/ui-react';
 import { withAuthenticator } from '@aws-amplify/ui-react';
 import '@aws-amplify/ui-react/styles.css';
 import config from './amplifyconfiguration.json';
-Amplify.configure(config);
+Amplify.configure(outputs);
 
 export function App({ signOut, user }: WithAuthenticatorProps) {
   return (
@@ -399,7 +399,7 @@ import { Amplify } from 'aws-amplify';
 import { withAuthenticator } from '@aws-amplify/ui-react';
 import '@aws-amplify/ui-react/styles.css';
 import config from './amplifyconfiguration.json';
-Amplify.configure(config);
+Amplify.configure(outputs);
 
 function App({ signOut, user }) {
   return (
@@ -438,7 +438,7 @@ The `Authenticator` component offers a simple way to add authentication flows in
 
   import { Amplify } from 'aws-amplify';
   import config from './amplifyconfiguration.json';
-  Amplify.configure(config);
+  Amplify.configure(outputs);
 </script>
 
 <template>

src/pages/gen2/build-a-backend/add-aws-services/rest-api/index.mdx

@@ -40,8 +40,8 @@ export const handler: APIGatewayProxyHandlerV2 = async (event) => {
 Lets create API Gateway REST API with AWS Lambda proxy integration using AWS CDK and add the function.
 
 ```ts title="amplify/backend.ts"
-import { myFunction } from "./functions/my-function/resource";
 import { LambdaRestApi } from "aws-cdk-lib/aws-apigateway";
+import { myFunction } from "./functions/my-function/resource";
 
 const backend = defineBackend({
   auth, 
@@ -73,8 +73,8 @@ To initialize the REST API you need to configure Amplify with `Amplify.configure
 
 ```tsx title="pages/index.tsx"
 import { Amplify } from 'aws-amplify';
-import amplifyconfig from './src/amplifyconfiguration.json';
-Amplify.configure(amplifyconfig):
+import outputs from '../amplify_outputs.json';
+Amplify.configure(outputs):
 
 const existingConfig = Amplify.getConfig();
 

src/pages/gen2/build-a-backend/auth/set-up-auth/index.mdx

@@ -118,7 +118,7 @@ After you have chosen and set up your authentication resource, run the following
 npx amplify sandbox
 ```
 
-After a successful deployment, this command also generates a configuration file (`amplifyconfiguration.json`) to enable your frontend app to connect to your backend resources. The values you configure in your backend authentication resource are set in the generated configuration file to automatically configure the frontend [`Authenticator connected component`](https://ui.docs.amplify.aws/react/connected-components/authenticator).
+After a successful deployment, this command also generates an outputs file (`amplify_outputs.json`) to enable your frontend app to connect to your backend resources. The values you configure in your backend authentication resource are set in the generated outputs file to automatically configure the frontend [`Authenticator connected component`](https://ui.docs.amplify.aws/react/connected-components/authenticator).
 
 ## Connect your application code to the auth backend
 
@@ -151,7 +151,7 @@ A higher-order component (HOC) is a function that takes a component and returns
 import type { AppProps } from "next/app";
 import { withAuthenticator } from '@aws-amplify/ui-react';
 import { Amplify } from 'aws-amplify';
-import config from '@/amplifyconfiguration.json';
+import outputs from '@/amplify_outputs.json';
 import '@aws-amplify/ui-react/styles.css';
 import type { WithAuthenticatorProps } from '@aws-amplify/ui-react';
 
@@ -177,7 +177,7 @@ export default withAuthenticator(App);
 // pages/_app.js
 import { withAuthenticator } from '@aws-amplify/ui-react';
 import { Amplify } from 'aws-amplify';
-import config from '@/amplifyconfiguration.json';
+import outputs from '@/amplify_outputs.json';
 import '@aws-amplify/ui-react/styles.css';
 
 Amplify.configure(config);
@@ -218,7 +218,7 @@ The `Authenticator` component offers a simple way to add authentication flows in
   import "@aws-amplify/ui-vue/styles.css";
 
   import { Amplify } from 'aws-amplify';
-  import config from '../amplifyconfiguration.json';
+  import outputs from '../amplify_outputs.json';
 
   Amplify.configure(config);
 </script>
@@ -293,7 +293,7 @@ import { BrowserModule } from '@angular/platform-browser';
 import { AmplifyAuthenticatorModule } from '@aws-amplify/ui-angular';
 
 import { AppComponent } from './app.component';
-import config from './amplifyconfiguration.json';
+import outputs from './amplify_outputs.json';
 
 Amplify.configure(config);
 

src/pages/gen2/build-a-backend/data/connect-from-server-runtime/index.mdx

@@ -71,7 +71,7 @@ To generate a Data client for the Next.js server runtime using cookies, you need
 ```ts
 import { type Schema } from '@/amplify/data/resource';
 import { generateServerClientUsingCookies } from '@aws-amplify/adapter-nextjs/data';
-import amplifyConfig from '@/amplifyconfiguration.json';
+import outputs from '@/amplify_outputs.json';
 import { cookies } from 'next/headers';
 
 export const cookieBasedClient = generateServerClientUsingCookies<Schema>({
@@ -96,7 +96,7 @@ To generate a Data client for the Next.js server runtime using `NextRequest` and
 import { type Schema } from '@/amplify/data/resource';
 import { createServerRunner } from '@aws-amplify/adapter-nextjs';
 import { generateServerClientUsingReqRes } from '@aws-amplify/adapter-nextjs/data';
-import amplifyConfig from '@/amplifyconfiguration.json';
+import outputs from '@/amplify_outputs.json';
 
 export const { runWithAmplifyServerContext } = createServerRunner({
   config: amplifyConfig,
@@ -130,7 +130,7 @@ Import the cookie-based server Data client in your Next.js React Server Componen
 ```ts
 import { type Schema } from '@/amplify/data/resource';
 import { generateServerClientUsingCookies } from '@aws-amplify/adapter-nextjs/data';
-import amplifyConfig from '@/amplifyconfiguration.json';
+import outputs from '@/amplify_outputs.json';
 import { cookies } from 'next/headers';
 
 export const cookieBasedClient = generateServerClientUsingCookies<Schema>({

src/pages/gen2/build-a-backend/data/connect-to-API/index.mdx

@@ -32,13 +32,13 @@ npm add aws-amplify
 
 You will then configure the library to connect with your Amplify Data's backend API:
 
-When you deploy you're iterating on your backend (`npx amplify sandbox`), an `amplifyconfiguration.json` file is generated for you. This file contains your API's endpoint information and auth configurations. Add the following code to your app's entrypoint to initialize and configure the Amplify client library:
+When you deploy you're iterating on your backend (`npx amplify sandbox`), an `amplify_outputs.json` file is generated for you. This file contains your API's endpoint information and auth configurations. Add the following code to your app's entrypoint to initialize and configure the Amplify client library:
 
 ```ts
 import { Amplify } from 'aws-amplify';
-import config from '../amplifyconfiguration.json';
+import outputs from '../amplify_outputs.json';
 
-Amplify.configure(config);
+Amplify.configure(outputs);
 ```
 
 ## Generate the Amplify Data client
@@ -60,7 +60,7 @@ const fetchTodos = async () => {
 
 ## Configure authorization mode
 
-The **Authorization Mode** is determines how a request should be authorized with the backend. By default, Amplify Data uses the "userPool" authorization which uses the signed-in user credentials to sign an API request. If you use public authorization rules for you data models, you need to use "apiKey" an an authorization mode. Review [Customize your auth rules](/gen2/build-a-backend/data/customize-authz) to learn more about which authorization modes to choose for which type of request. A **Default Authorization Mode** is provided as part of the **amplifyconfiguration.json** that is generated upon a successful deployment.
+The **Authorization Mode** is determines how a request should be authorized with the backend. By default, Amplify Data uses the "userPool" authorization which uses the signed-in user credentials to sign an API request. If you use public authorization rules for you data models, you need to use "apiKey" an an authorization mode. Review [Customize your auth rules](/gen2/build-a-backend/data/customize-authz) to learn more about which authorization modes to choose for which type of request. A **Default Authorization Mode** is provided as part of the **amplify_outputs.json** that is generated upon a successful deployment.
 
 You can generate different Data clients with different authorization modes or pass in the authorization mode at the request time.
 

src/pages/gen2/build-a-backend/data/customize-authz/grant-lambda-function-access-to-api/index.mdx

@@ -85,7 +85,7 @@ import { Schema } from '../data/resource';
 import { env } from '@env/<data-access>'; // replace with your function name
 // highlight-start
 // see instructions below on copying this file
-import { modelIntrospection } from './amplifyconfiguration.json';
+import { modelIntrospection } from './amplify_outputs.json';
 // highlight-end
 
 Amplify.configure(
@@ -124,11 +124,11 @@ export const handler = async (event) => {
 }
 ```
 
-The `amplifyconfiguration.json` file is not automatically accessible to your function. To include it with your function, you must first do a deployment of your backend using either `npx amplify sandbox` or Amplify hosting. Then copy the `amplifyconfiguration.json` file that is placed in your project root into your function directory. Now you can import the file into your function as shown above.
+The `amplify_outputs.json` file is not automatically accessible to your function. To include it with your function, you must first do a deployment of your backend using either `npx amplify sandbox` or Amplify hosting. Then copy the `amplify_outputs.json` file that is placed in your project root into your function directory. Now you can import the file into your function as shown above.
 
 <Callout warning>
 
-**Note:** Whenever you update your data model, you will need to copy the `amplifyconfiguration.json` file again.
+**Note:** Whenever you update your data model, you will need to copy the `amplify_outputs.json` file again.
 
 </Callout>
 

src/pages/gen2/build-a-backend/data/customize-authz/public-data-access/index.mdx

@@ -64,12 +64,12 @@ const schema = a.schema({
 In your application, you can perform CRUD operations against the model using `client.models.<model-name>` with the `iam` auth mode.
 
 <Callout info>
-If you're not using the auto-generated **amplifyconfiguration.json** file, then you must set the Amplify Library resource configuration's `allowGuestAccess` flag to `true`. This lets the Amplify Library use the unauthenticated role from your Cognito identity pool when your user isn't logged in.
+If you're not using the auto-generated **amplify_outputs.json** file, then you must set the Amplify Library resource configuration's `allowGuestAccess` flag to `true`. This lets the Amplify Library use the unauthenticated role from your Cognito identity pool when your user isn't logged in.
 
 <Accordion title="Amplify configuration">
 ```ts title="src/App.tsx"
 import { Amplify } from "aws-amplify";
-import config from "../amplifyconfiguration.json";
+import outputs from "../amplify_outputs.json";
 
 Amplify.configure(
   {

src/pages/gen2/build-a-backend/data/set-up-data/index.mdx

@@ -70,11 +70,11 @@ npx amplify sandbox
 
 ## Connect your application code to the data backend
 
-Once the cloud sandbox is up and running, it will also create an `amplifyconfiguration.json` file, which includes the relevant connection information to your data backend, like your API endpoint URL and API key.
+Once the cloud sandbox is up and running, it will also create an `amplify_outputs.json` file, which includes the relevant connection information to your data backend, like your API endpoint URL and API key.
 
 To connect your frontend code to your backend, you need to:
 
-1. configure the Amplify library with the Amplify client configuration file
+1. configure the Amplify library with the Amplify client configuration file (`amplify_outputs.json`)
 2. generate a new API client from the Amplify library
 3. make an API request with end-to-end type-safety
 
@@ -84,7 +84,7 @@ In your app's entry point, typically **main.tsx** for React apps created using V
 // main.tsx
 
 import { Amplify } from 'aws-amplify';
-import config from '../amplifyconfiguration.json';
+import outputs from '../amplify_outputs.json';
 
 Amplify.configure(config);
 ```

src/pages/gen2/build-a-backend/server-side-rendering/index.mdx

@@ -29,13 +29,13 @@ npm add aws-amplify @aws-amplify/adapter-nextjs
 
 You will need to create a `runWithAmplifyServerContextRunner` function to use Amplify APIs on the server-side of your Next.js app.
 
-You can create an `amplifyServerUtils.ts` file under a `utils` folder in your codebase. In this file, you will import the Amplify configuration object from the `amplifyconfiguration.json` file that is generated by the Amplify CLI, and use the `createServerRunner` function to create the `runWithAmplifyServerContextRunner` function.
+You can create an `amplifyServerUtils.ts` file under a `utils` folder in your codebase. In this file, you will import the Amplify backend outputs from the `amplify_outputs.json` file that is generated by the Amplify CLI, and use the `createServerRunner` function to create the `runWithAmplifyServerContextRunner` function.
 
 For example, the `utils/amplifyServerUtils.ts` file may contain the following content:
 
 ```typescript
 import { createServerRunner } from '@aws-amplify/adapter-nextjs';
-import config from '@/amplifyconfiguration.json';
+import outputs from '@/amplify_outputs.json';
 
 export const { runWithAmplifyServerContext } = createServerRunner({
   config
@@ -61,7 +61,7 @@ When you use the Amplify library on the client-side of your Next.js app, you wil
 ```typescript
 'use client';
 
-import config from '@/amplifyconfiguration.json';
+import outputs from '@/amplify_outputs.json';
 import { Amplify } from 'aws-amplify';
 
 Amplify.configure(config, {
@@ -93,7 +93,7 @@ If you're using the Next.js App Router, you can create a client component to con
 'use client';
 
 import { Amplify } from 'aws-amplify';
-import config from '../amplifyconfiguration.json';
+import outputs from '../amplify_outputs.json';
 
 Amplify.configure(config, { ssr: true });
 

src/pages/gen2/deploy-and-host/fullstack-branching/cross-account-deployments/index.mdx

@@ -36,7 +36,7 @@ Please refer to this Amazon CodeCatalyst [guide](https://docs.aws.amazon.com/cod
 
 ### Step 3: Update build specification
 
-Add the `npx amplify generate config --branch $AWS_BRANCH --app-id $AWS_APP_ID` command to the build spec and comment out the `npx amplify pipeline-deploy --branch $AWS_BRANCH --app-id $AWS_APP_ID` command. `amplify pipeline-deploy` runs a script to deploy backend updates, while `amplify generate config` fetches the latest `amplifyconfiguration.json` for the specified environment.
+Add the `npx amplify generate config --branch $AWS_BRANCH --app-id $AWS_APP_ID` command to the build spec and comment out the `npx amplify pipeline-deploy --branch $AWS_BRANCH --app-id $AWS_APP_ID` command. `amplify pipeline-deploy` runs a script to deploy backend updates, while `amplify generate config` fetches the latest `amplify_outputs.json` for the specified environment.
 
 ![Screenshot of Build image settings section in AWS Amplify Gen 2 console, with details about the app build specification](images/gen2/cross-account-deployments/pipeline10.png)
 
@@ -166,4 +166,4 @@ Next, you can review the result of the workflow run from the **Runs** tab:
 
 ![Screenshot of CodeCatalyst console showing the Workflows section, focusing on the Runs tab](images/gen2/cross-account-deployments/pipeline11.png)
 
-Done! You have successfully set up a custom cross-account pipeline to deploy your frontend and backend for apps built using Amplify Gen 2. To summarize, this custom pipeline will enable you to deploy your backend initially with your `staging` environment using `amplify pipeline-deploy` in the CodeCatalyst workflow and `amplify generate config` will generate the `amplifyconfiguration.json` file for the `main` branch. Amplify Hosting will not deploy backend resources as part of the build and instead will use the deployed backend resources from the `main` branch. Once the staging environment deploys successfully, a similar process will be followed to deploy your `production` environment in a different AWS account.
+Done! You have successfully set up a custom cross-account pipeline to deploy your frontend and backend for apps built using Amplify Gen 2. To summarize, this custom pipeline will enable you to deploy your backend initially with your `staging` environment using `amplify pipeline-deploy` in the CodeCatalyst workflow and `amplify generate config` will generate the `amplify_outputs.json` file for the `main` branch. Amplify Hosting will not deploy backend resources as part of the build and instead will use the deployed backend resources from the `main` branch. Once the staging environment deploys successfully, a similar process will be followed to deploy your `production` environment in a different AWS account.

src/pages/gen2/deploy-and-host/fullstack-branching/custom-pipelines/index.mdx

@@ -26,7 +26,7 @@ You can set up your backend deployments using the following steps:
   <source src="/images/gen2/fullstack-branching/auto-build.mp4" />
 </video>
 
-3. Update the Amplify build-spec to add `npx amplify generate config --branch $AWS_BRANCH --app-id $AWS_APP_ID` and comment out the `pipeline-deploy` script. `amplify pipeline-deploy` runs a script to deploy backend updates, while `amplify generate config` fetches the latest `amplifyconfiguration.json` for the specified environment.
+3. Update the Amplify build-spec to add `npx amplify generate config --branch $AWS_BRANCH --app-id $AWS_APP_ID` and comment out the `pipeline-deploy` script. `amplify pipeline-deploy` runs a script to deploy backend updates, while `amplify generate config` fetches the latest `amplify_outputs.json` for the specified environment.
 
 ![custom-ci](/images/gen2/fullstack-branching/custom-ci.png)
 
@@ -97,4 +97,4 @@ aws amplify create-webhook --app-id AMPLIFY-APPID --branch-name main  --region R
             -H "Content-Type:application/json"; fi
 ```
 
-4. This should trigger a build in your Amplify app. Amplify CI will build and first generate the `amplifyconfiguration.json` for the branch and then build, deploy, and host the frontend.
+4. This should trigger a build in your Amplify app. Amplify CI will build and first generate the `amplify_outputs.json` for the branch and then build, deploy, and host the frontend.

src/pages/gen2/deploy-and-host/fullstack-branching/mono-and-multi-repos/index.mdx

@@ -49,11 +49,11 @@ npm add @aws-amplify/backend-cli aws-amplify @aws-amplify/ui-react
 npx amplify generate config --branch main --app-id BACKEND-APPID
 ```
 
-This will generate the `amplifyconfiguration.json` file that contains all the information about your backend at the root of your project.
+This will generate the `amplify_outputs.json` file that contains all the information about your backend at the root of your project.
 
 <img
   src="/images/gen2/fullstack-branching/multirepo3.png"
-  alt="Screenshot of project folder contents with amplifyconfiguration.json file highlighted"
+  alt="Screenshot of project folder contents with amplify_outputs.json file highlighted"
   width="300"
 />
 
@@ -63,7 +63,7 @@ This will generate the `amplifyconfiguration.json` file that contains all the in
 // pages/_app.tsx
 import { withAuthenticator } from '@aws-amplify/ui-react';
 import { Amplify } from 'aws-amplify';
-import config from '@/amplifyconfiguration.json';
+import outputs from '@/amplify_outputs.json';
 import '@aws-amplify/ui-react/styles.css';
 import '@/styles/globals.css';
 import type { AppProps } from 'next/app';