From b1ee48e2f6a720bb339c41ac5e92bb7ab7f84192 Mon Sep 17 00:00:00 2001 From: josefaidt Date: Mon, 29 Apr 2024 12:10:22 -0700 Subject: [PATCH 01/18] amplifyconfiguration.json -> amplify_outputs.json --- .../add-aws-services/rest-api/index.mdx | 4 ++-- .../build-a-backend/auth/set-up-auth/index.mdx | 10 +++++----- .../data/connect-from-server-runtime/index.mdx | 6 +++--- .../build-a-backend/data/connect-to-API/index.mdx | 6 +++--- .../grant-lambda-function-access-to-api/index.mdx | 6 +++--- .../customize-authz/public-data-access/index.mdx | 4 ++-- .../build-a-backend/data/set-up-data/index.mdx | 4 ++-- .../server-side-rendering/index.mdx | 8 ++++---- .../cross-account-deployments/index.mdx | 4 ++-- .../fullstack-branching/custom-pipelines/index.mdx | 4 ++-- .../mono-and-multi-repos/index.mdx | 6 +++--- .../fullstack-branching/share-resources/index.mdx | 2 +- .../sandbox-environments/features/index.mdx | 2 +- .../gen2/reference/amplifyconfiguration/index.mdx | 14 +++++++------- src/pages/gen2/reference/cli-commands/index.mdx | 4 ++-- .../nextjs-app-router-client-components/index.mdx | 2 +- .../nextjs-app-router-server-components/index.mdx | 4 ++-- .../start/quickstart/nextjs-pages-router/index.mdx | 2 +- .../gen2/start/quickstart/vite-react-app/index.mdx | 2 +- 19 files changed, 47 insertions(+), 47 deletions(-) diff --git a/src/pages/gen2/build-a-backend/add-aws-services/rest-api/index.mdx b/src/pages/gen2/build-a-backend/add-aws-services/rest-api/index.mdx index e467660ab29..c1377e49016 100644 --- a/src/pages/gen2/build-a-backend/add-aws-services/rest-api/index.mdx +++ b/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,7 +73,7 @@ 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'; +import amplifyconfig from '../amplify_outputs.json'; Amplify.configure(amplifyconfig): const existingConfig = Amplify.getConfig(); diff --git a/src/pages/gen2/build-a-backend/auth/set-up-auth/index.mdx b/src/pages/gen2/build-a-backend/auth/set-up-auth/index.mdx index 11cacf6e8fc..c92af97ac6a 100644 --- a/src/pages/gen2/build-a-backend/auth/set-up-auth/index.mdx +++ b/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 a configuration 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 configuration 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 config 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 config 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 config from '../amplify_outputs.json'; Amplify.configure(config); @@ -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 config from './amplify_outputs.json'; Amplify.configure(config); diff --git a/src/pages/gen2/build-a-backend/data/connect-from-server-runtime/index.mdx b/src/pages/gen2/build-a-backend/data/connect-from-server-runtime/index.mdx index 58fd3b54006..7cf5c145d66 100644 --- a/src/pages/gen2/build-a-backend/data/connect-from-server-runtime/index.mdx +++ b/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 amplifyConfig from '@/amplify_outputs.json'; import { cookies } from 'next/headers'; export const cookieBasedClient = generateServerClientUsingCookies({ @@ -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 amplifyConfig 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 amplifyConfig from '@/amplify_outputs.json'; import { cookies } from 'next/headers'; export const cookieBasedClient = generateServerClientUsingCookies({ diff --git a/src/pages/gen2/build-a-backend/data/connect-to-API/index.mdx b/src/pages/gen2/build-a-backend/data/connect-to-API/index.mdx index 2f3ff476064..be7eaf41184 100644 --- a/src/pages/gen2/build-a-backend/data/connect-to-API/index.mdx +++ b/src/pages/gen2/build-a-backend/data/connect-to-API/index.mdx @@ -32,11 +32,11 @@ 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 config from '../amplify_outputs.json'; Amplify.configure(config); ``` @@ -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. diff --git a/src/pages/gen2/build-a-backend/data/customize-authz/grant-lambda-function-access-to-api/index.mdx b/src/pages/gen2/build-a-backend/data/customize-authz/grant-lambda-function-access-to-api/index.mdx index fe27464ab15..53b55cdefe0 100644 --- a/src/pages/gen2/build-a-backend/data/customize-authz/grant-lambda-function-access-to-api/index.mdx +++ b/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/'; // 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. -**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. diff --git a/src/pages/gen2/build-a-backend/data/customize-authz/public-data-access/index.mdx b/src/pages/gen2/build-a-backend/data/customize-authz/public-data-access/index.mdx index aa1f6aa4a1e..40d85b51b32 100644 --- a/src/pages/gen2/build-a-backend/data/customize-authz/public-data-access/index.mdx +++ b/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.` with the `iam` auth mode. -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. ```ts title="src/App.tsx" import { Amplify } from "aws-amplify"; -import config from "../amplifyconfiguration.json"; +import config from "../amplify_outputs.json"; Amplify.configure( { diff --git a/src/pages/gen2/build-a-backend/data/set-up-data/index.mdx b/src/pages/gen2/build-a-backend/data/set-up-data/index.mdx index 16bda122d13..28765f33398 100644 --- a/src/pages/gen2/build-a-backend/data/set-up-data/index.mdx +++ b/src/pages/gen2/build-a-backend/data/set-up-data/index.mdx @@ -70,7 +70,7 @@ 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: @@ -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 config from '../amplify_outputs.json'; Amplify.configure(config); ``` diff --git a/src/pages/gen2/build-a-backend/server-side-rendering/index.mdx b/src/pages/gen2/build-a-backend/server-side-rendering/index.mdx index 38959356969..5f14ec424d2 100644 --- a/src/pages/gen2/build-a-backend/server-side-rendering/index.mdx +++ b/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 configuration object 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 config 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 config 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 config from '../amplify_outputs.json'; Amplify.configure(config, { ssr: true }); diff --git a/src/pages/gen2/deploy-and-host/fullstack-branching/cross-account-deployments/index.mdx b/src/pages/gen2/deploy-and-host/fullstack-branching/cross-account-deployments/index.mdx index f76d0e9df1b..9f400553274 100644 --- a/src/pages/gen2/deploy-and-host/fullstack-branching/cross-account-deployments/index.mdx +++ b/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. diff --git a/src/pages/gen2/deploy-and-host/fullstack-branching/custom-pipelines/index.mdx b/src/pages/gen2/deploy-and-host/fullstack-branching/custom-pipelines/index.mdx index 71174c3b7b4..325eb886272 100644 --- a/src/pages/gen2/deploy-and-host/fullstack-branching/custom-pipelines/index.mdx +++ b/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: -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. diff --git a/src/pages/gen2/deploy-and-host/fullstack-branching/mono-and-multi-repos/index.mdx b/src/pages/gen2/deploy-and-host/fullstack-branching/mono-and-multi-repos/index.mdx index 34813262676..f4b47a5301d 100644 --- a/src/pages/gen2/deploy-and-host/fullstack-branching/mono-and-multi-repos/index.mdx +++ b/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. Screenshot of project folder contents with amplifyconfiguration.json file highlighted @@ -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 config from '@/amplify_outputs.json'; import '@aws-amplify/ui-react/styles.css'; import '@/styles/globals.css'; import type { AppProps } from 'next/app'; diff --git a/src/pages/gen2/deploy-and-host/fullstack-branching/share-resources/index.mdx b/src/pages/gen2/deploy-and-host/fullstack-branching/share-resources/index.mdx index a51e5773db4..3b4365ffda3 100644 --- a/src/pages/gen2/deploy-and-host/fullstack-branching/share-resources/index.mdx +++ b/src/pages/gen2/deploy-and-host/fullstack-branching/share-resources/index.mdx @@ -20,7 +20,7 @@ You can update your app build settings to share resources across branches. In th ![The build specification YML file on the Build settings page in Amplify console.](/images/gen2/fullstack-branching/build-settings.png) -Update the build settings for the `backend` phase to run `npx amplify generate config --branch dev app-id $AWS_APP_ID` to generate the `amplifyconfiguration.json` file for all branches other than `main` or `dev`. After this update, any new deployed branches will not deploy backend resources as part of the build and instead will use the deployed backend resources from the `dev` branch. +Update the build settings for the `backend` phase to run `npx amplify generate config --branch dev app-id $AWS_APP_ID` to generate the `amplify_outputs.json` file for all branches other than `main` or `dev`. After this update, any new deployed branches will not deploy backend resources as part of the build and instead will use the deployed backend resources from the `dev` branch. ```yaml title="amplify.yml" version: 1 diff --git a/src/pages/gen2/deploy-and-host/sandbox-environments/features/index.mdx b/src/pages/gen2/deploy-and-host/sandbox-environments/features/index.mdx index 8d57ec06dce..d85d07d98e4 100644 --- a/src/pages/gen2/deploy-and-host/sandbox-environments/features/index.mdx +++ b/src/pages/gen2/deploy-and-host/sandbox-environments/features/index.mdx @@ -109,7 +109,7 @@ After successful deployment, sandboxes `s1` and `s2` will be ready. Pick sandbox ## Generate client config -The client config, or `amplifyconfiguration.json` file, contains the configuration strings for interacting with AWS resources specific to an environment. The Amplify client libraries need the client config in order to use the library APIs to connect to backend resources. By default, the cloud sandbox generates the client configuration file at the root of the project (such as `@/amplifyconfiguration.json`). If you want to place the file at a different path (such as for a monorepo or Android app), run the following command in the terminal: +The client config, or `amplify_outputs.json` file, contains the configuration strings for interacting with AWS resources specific to an environment. The Amplify client libraries need the client config in order to use the library APIs to connect to backend resources. By default, the cloud sandbox generates the client configuration file at the root of the project (such as `@/amplify_outputs.json`). If you want to place the file at a different path (such as for a monorepo or Android app), run the following command in the terminal: ```bash npx amplify sandbox --config-out-dir ./path/to/config --format ["mjs", "json", "json-mobile", "ts", "dart"] diff --git a/src/pages/gen2/reference/amplifyconfiguration/index.mdx b/src/pages/gen2/reference/amplifyconfiguration/index.mdx index 66118ceaae3..461c28d32eb 100644 --- a/src/pages/gen2/reference/amplifyconfiguration/index.mdx +++ b/src/pages/gen2/reference/amplifyconfiguration/index.mdx @@ -11,7 +11,7 @@ export function getStaticProps(context) { }; } -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. +In Amplify Gen 2, the CLI will generate an `amplify_outputs.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`](/gen2/reference/cli-commands#amplify-generate-config). @@ -19,17 +19,17 @@ You can also manually create this file for a specified Amplify app ID and branch ## 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. +The `amplify_outputs.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. +Overriding Amplify-managed configurations on `amplify_outputs.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. +Consider a scenario where you want to add output parameters in your `amplify_outputs.json` that specify an S3 bucket and its region that your application will use for storing files. ```ts title="amplify/backend.ts" import { defineBackend } from "@aws-amplify/backend"; @@ -51,14 +51,14 @@ In your frontend end application, you can configure Amplify as follows: ```ts title="src/index.ts" import { Amplify } from "aws-amplify"; -import config from "@/amplifyconfiguration.json"; +import config from "@/amplify_outputs.json"; Amplify.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. +In addition to extending existing configurations, you can also add custom output parameters to your `amplify_outputs.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. ```ts title="amplify/backend.ts" import { defineBackend } from "@aws-amplify/backend"; @@ -84,7 +84,7 @@ In your frontend end application, you can access these custom configurations as ```ts title="src/index.ts" import { Amplify } from "aws-amplify"; -import config from "@/amplifyconfiguration.json"; +import config from "@/amplify_outputs.json"; Amplify.configure(config); const currentConfig = Amplify.getConfig(); diff --git a/src/pages/gen2/reference/cli-commands/index.mdx b/src/pages/gen2/reference/cli-commands/index.mdx index 49170d5de91..487216a4ffd 100644 --- a/src/pages/gen2/reference/cli-commands/index.mdx +++ b/src/pages/gen2/reference/cli-commands/index.mdx @@ -70,7 +70,7 @@ AWS_REGION=us-west-2 amplify sandbox #### Use with mobile applications -For mobile applications, you will need to set the output directory and format of the generated configuration file, specifically `amplifyconfiguration.json`: +For mobile applications, you will need to set the output directory and format of the generated configuration file, specifically `amplify_outputs.json`: ```bash # for Android @@ -187,7 +187,7 @@ npx amplify generate --app-id --branch ## npx amplify generate config -Generate the client configuration file (such as `amplifyconfiguration.json`) for your frontend application to consume. This is intended to be used to manually generate a configuration file for an environment other than your personal cloud sandbox. For example, you might use it if you would like to verify something your coworker is seeing in their cloud sandbox, or to demonstrate frontend changes locally using a pre-existing "staging" branch. +Generate the client configuration file (such as `amplify_outputs.json`) for your frontend application to consume. This is intended to be used to manually generate a configuration file for an environment other than your personal cloud sandbox. For example, you might use it if you would like to verify something your coworker is seeing in their cloud sandbox, or to demonstrate frontend changes locally using a pre-existing "staging" branch. Options diff --git a/src/pages/gen2/start/quickstart/nextjs-app-router-client-components/index.mdx b/src/pages/gen2/start/quickstart/nextjs-app-router-client-components/index.mdx index 1c1c59cb5a7..117ffd42f48 100644 --- a/src/pages/gen2/start/quickstart/nextjs-app-router-client-components/index.mdx +++ b/src/pages/gen2/start/quickstart/nextjs-app-router-client-components/index.mdx @@ -48,7 +48,7 @@ Next, create a `components` folder in the root of your project and the contents // components/ConfigureAmplify.tsx "use client"; -import config from "@/amplifyconfiguration.json"; +import config from "@/amplify_outputs.json"; import { Amplify } from "aws-amplify"; Amplify.configure(config, { ssr: true }); diff --git a/src/pages/gen2/start/quickstart/nextjs-app-router-server-components/index.mdx b/src/pages/gen2/start/quickstart/nextjs-app-router-server-components/index.mdx index 5e41c496df1..94fc59652e0 100644 --- a/src/pages/gen2/start/quickstart/nextjs-app-router-server-components/index.mdx +++ b/src/pages/gen2/start/quickstart/nextjs-app-router-server-components/index.mdx @@ -51,7 +51,7 @@ Next, create a `components` folder in the root of your project and copy the cont import { Amplify } from "aws-amplify"; -import config from "@/amplifyconfiguration.json"; +import config from "@/amplify_outputs.json"; Amplify.configure(config, { ssr: true }); @@ -113,7 +113,7 @@ import { generateServerClientUsingCookies } from "@aws-amplify/adapter-nextjs/ap import { getCurrentUser } from "aws-amplify/auth/server"; import { type Schema } from "@/amplify/data/resource"; -import config from "@/amplifyconfiguration.json"; +import config from "@/amplify_outputs.json"; export const { runWithAmplifyServerContext } = createServerRunner({ config, diff --git a/src/pages/gen2/start/quickstart/nextjs-pages-router/index.mdx b/src/pages/gen2/start/quickstart/nextjs-pages-router/index.mdx index 5cf56bf130f..16fd83b78d0 100644 --- a/src/pages/gen2/start/quickstart/nextjs-pages-router/index.mdx +++ b/src/pages/gen2/start/quickstart/nextjs-pages-router/index.mdx @@ -49,7 +49,7 @@ Next, in your app's `pages/_app.tsx`, add the following imports and wrap your Ap // pages/_app.tsx import { withAuthenticator } from '@aws-amplify/ui-react'; import { Amplify } from 'aws-amplify'; -import config from '@/amplifyconfiguration.json'; +import config from '@/amplify_outputs.json'; import '@aws-amplify/ui-react/styles.css'; import type { AppProps } from 'next/app'; diff --git a/src/pages/gen2/start/quickstart/vite-react-app/index.mdx b/src/pages/gen2/start/quickstart/vite-react-app/index.mdx index 1db9dc736d2..09b8ebbadf4 100644 --- a/src/pages/gen2/start/quickstart/vite-react-app/index.mdx +++ b/src/pages/gen2/start/quickstart/vite-react-app/index.mdx @@ -109,7 +109,7 @@ Open `src/main.tsx` and add the following code below the last import: ```tsx title="src/main.tsx" import { Amplify } from 'aws-amplify'; -import amplifyconfig from '../amplifyconfiguration.json'; +import amplifyconfig from '../amplify_outputs.json'; Amplify.configure(amplifyconfig); ``` From 6396f6504ded052d5621533f98437027fcdb1d79 Mon Sep 17 00:00:00 2001 From: josefaidt Date: Mon, 29 Apr 2024 12:13:18 -0700 Subject: [PATCH 02/18] configuration file -> outputs file --- src/pages/gen2/build-a-backend/auth/set-up-auth/index.mdx | 2 +- src/pages/gen2/build-a-backend/data/set-up-data/index.mdx | 2 +- src/pages/gen2/reference/cli-commands/index.mdx | 6 +++--- 3 files changed, 5 insertions(+), 5 deletions(-) diff --git a/src/pages/gen2/build-a-backend/auth/set-up-auth/index.mdx b/src/pages/gen2/build-a-backend/auth/set-up-auth/index.mdx index c92af97ac6a..fa7bf04dced 100644 --- a/src/pages/gen2/build-a-backend/auth/set-up-auth/index.mdx +++ b/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 (`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 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 diff --git a/src/pages/gen2/build-a-backend/data/set-up-data/index.mdx b/src/pages/gen2/build-a-backend/data/set-up-data/index.mdx index 28765f33398..c8f5b9c9ab2 100644 --- a/src/pages/gen2/build-a-backend/data/set-up-data/index.mdx +++ b/src/pages/gen2/build-a-backend/data/set-up-data/index.mdx @@ -74,7 +74,7 @@ Once the cloud sandbox is up and running, it will also create an `amplify_output 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 diff --git a/src/pages/gen2/reference/cli-commands/index.mdx b/src/pages/gen2/reference/cli-commands/index.mdx index 487216a4ffd..a3770674a89 100644 --- a/src/pages/gen2/reference/cli-commands/index.mdx +++ b/src/pages/gen2/reference/cli-commands/index.mdx @@ -70,7 +70,7 @@ AWS_REGION=us-west-2 amplify sandbox #### Use with mobile applications -For mobile applications, you will need to set the output directory and format of the generated configuration file, specifically `amplify_outputs.json`: +For mobile applications, you will need to set the output directory and format of the generated outputs file, specifically `amplify_outputs.json`: ```bash # for Android @@ -187,7 +187,7 @@ npx amplify generate --app-id --branch ## npx amplify generate config -Generate the client configuration file (such as `amplify_outputs.json`) for your frontend application to consume. This is intended to be used to manually generate a configuration file for an environment other than your personal cloud sandbox. For example, you might use it if you would like to verify something your coworker is seeing in their cloud sandbox, or to demonstrate frontend changes locally using a pre-existing "staging" branch. +Generate the client configuration file (such as `amplify_outputs.json`) for your frontend application to consume. This is intended to be used to manually generate a client configuration file for an environment other than your personal cloud sandbox. For example, you might use it if you would like to verify something your coworker is seeing in their cloud sandbox, or to demonstrate frontend changes locally using a pre-existing "staging" branch. Options @@ -207,7 +207,7 @@ npx amplify generate config --stack amplify-nextamplifygen2-josef-sandbox-ca85e1 #### Use with mobile applications -Similar to `sandbox`, you can specify an alternate configuration file format by using `--format`: +Similar to `sandbox`, you can specify an alternate outputs file format by using `--format`: ```bash npx amplify generate config --stack amplify-nextamplifygen2-josef-sandbox-ca85e1081b --format json-mobile From 0ded9fd2862c54ec4f64a1f962c34cc08c260e3d Mon Sep 17 00:00:00 2001 From: josefaidt Date: Mon, 29 Apr 2024 13:48:30 -0700 Subject: [PATCH 03/18] update all references to "import *config" to "import outputs" --- .../build-a-backend/add-aws-services/rest-api/index.mdx | 2 +- src/pages/gen2/build-a-backend/auth/set-up-auth/index.mdx | 8 ++++---- .../data/connect-from-server-runtime/index.mdx | 6 +++--- .../gen2/build-a-backend/data/connect-to-API/index.mdx | 2 +- .../data/customize-authz/public-data-access/index.mdx | 2 +- src/pages/gen2/build-a-backend/data/set-up-data/index.mdx | 2 +- .../gen2/build-a-backend/server-side-rendering/index.mdx | 6 +++--- .../fullstack-branching/mono-and-multi-repos/index.mdx | 2 +- src/pages/gen2/reference/amplifyconfiguration/index.mdx | 4 ++-- .../nextjs-app-router-client-components/index.mdx | 2 +- .../nextjs-app-router-server-components/index.mdx | 4 ++-- .../gen2/start/quickstart/nextjs-pages-router/index.mdx | 2 +- src/pages/gen2/start/quickstart/vite-react-app/index.mdx | 2 +- 13 files changed, 22 insertions(+), 22 deletions(-) diff --git a/src/pages/gen2/build-a-backend/add-aws-services/rest-api/index.mdx b/src/pages/gen2/build-a-backend/add-aws-services/rest-api/index.mdx index c1377e49016..d4918fd5569 100644 --- a/src/pages/gen2/build-a-backend/add-aws-services/rest-api/index.mdx +++ b/src/pages/gen2/build-a-backend/add-aws-services/rest-api/index.mdx @@ -73,7 +73,7 @@ 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 '../amplify_outputs.json'; +import outputs from '../amplify_outputs.json'; Amplify.configure(amplifyconfig): const existingConfig = Amplify.getConfig(); diff --git a/src/pages/gen2/build-a-backend/auth/set-up-auth/index.mdx b/src/pages/gen2/build-a-backend/auth/set-up-auth/index.mdx index fa7bf04dced..64e3facc2f4 100644 --- a/src/pages/gen2/build-a-backend/auth/set-up-auth/index.mdx +++ b/src/pages/gen2/build-a-backend/auth/set-up-auth/index.mdx @@ -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 '@/amplify_outputs.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 '@/amplify_outputs.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 '../amplify_outputs.json'; + import outputs from '../amplify_outputs.json'; Amplify.configure(config); @@ -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 './amplify_outputs.json'; +import outputs from './amplify_outputs.json'; Amplify.configure(config); diff --git a/src/pages/gen2/build-a-backend/data/connect-from-server-runtime/index.mdx b/src/pages/gen2/build-a-backend/data/connect-from-server-runtime/index.mdx index 7cf5c145d66..3e7bce9a3dd 100644 --- a/src/pages/gen2/build-a-backend/data/connect-from-server-runtime/index.mdx +++ b/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 '@/amplify_outputs.json'; +import outputs from '@/amplify_outputs.json'; import { cookies } from 'next/headers'; export const cookieBasedClient = generateServerClientUsingCookies({ @@ -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 '@/amplify_outputs.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 '@/amplify_outputs.json'; +import outputs from '@/amplify_outputs.json'; import { cookies } from 'next/headers'; export const cookieBasedClient = generateServerClientUsingCookies({ diff --git a/src/pages/gen2/build-a-backend/data/connect-to-API/index.mdx b/src/pages/gen2/build-a-backend/data/connect-to-API/index.mdx index be7eaf41184..fa109cd21d8 100644 --- a/src/pages/gen2/build-a-backend/data/connect-to-API/index.mdx +++ b/src/pages/gen2/build-a-backend/data/connect-to-API/index.mdx @@ -36,7 +36,7 @@ When you deploy you're iterating on your backend (`npx amplify sandbox`), an `am ```ts import { Amplify } from 'aws-amplify'; -import config from '../amplify_outputs.json'; +import outputs from '../amplify_outputs.json'; Amplify.configure(config); ``` diff --git a/src/pages/gen2/build-a-backend/data/customize-authz/public-data-access/index.mdx b/src/pages/gen2/build-a-backend/data/customize-authz/public-data-access/index.mdx index 40d85b51b32..da3bb8cd451 100644 --- a/src/pages/gen2/build-a-backend/data/customize-authz/public-data-access/index.mdx +++ b/src/pages/gen2/build-a-backend/data/customize-authz/public-data-access/index.mdx @@ -69,7 +69,7 @@ If you're not using the auto-generated **amplify_outputs.json** file, then you m ```ts title="src/App.tsx" import { Amplify } from "aws-amplify"; -import config from "../amplify_outputs.json"; +import outputs from "../amplify_outputs.json"; Amplify.configure( { diff --git a/src/pages/gen2/build-a-backend/data/set-up-data/index.mdx b/src/pages/gen2/build-a-backend/data/set-up-data/index.mdx index c8f5b9c9ab2..eb4ea418223 100644 --- a/src/pages/gen2/build-a-backend/data/set-up-data/index.mdx +++ b/src/pages/gen2/build-a-backend/data/set-up-data/index.mdx @@ -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 '../amplify_outputs.json'; +import outputs from '../amplify_outputs.json'; Amplify.configure(config); ``` diff --git a/src/pages/gen2/build-a-backend/server-side-rendering/index.mdx b/src/pages/gen2/build-a-backend/server-side-rendering/index.mdx index 5f14ec424d2..c919d90d749 100644 --- a/src/pages/gen2/build-a-backend/server-side-rendering/index.mdx +++ b/src/pages/gen2/build-a-backend/server-side-rendering/index.mdx @@ -35,7 +35,7 @@ For example, the `utils/amplifyServerUtils.ts` file may contain the following co ```typescript import { createServerRunner } from '@aws-amplify/adapter-nextjs'; -import config from '@/amplify_outputs.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 '@/amplify_outputs.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 '../amplify_outputs.json'; +import outputs from '../amplify_outputs.json'; Amplify.configure(config, { ssr: true }); diff --git a/src/pages/gen2/deploy-and-host/fullstack-branching/mono-and-multi-repos/index.mdx b/src/pages/gen2/deploy-and-host/fullstack-branching/mono-and-multi-repos/index.mdx index f4b47a5301d..03fb007f42a 100644 --- a/src/pages/gen2/deploy-and-host/fullstack-branching/mono-and-multi-repos/index.mdx +++ b/src/pages/gen2/deploy-and-host/fullstack-branching/mono-and-multi-repos/index.mdx @@ -63,7 +63,7 @@ This will generate the `amplify_outputs.json` file that contains all the informa // pages/_app.tsx import { withAuthenticator } from '@aws-amplify/ui-react'; import { Amplify } from 'aws-amplify'; -import config from '@/amplify_outputs.json'; +import outputs from '@/amplify_outputs.json'; import '@aws-amplify/ui-react/styles.css'; import '@/styles/globals.css'; import type { AppProps } from 'next/app'; diff --git a/src/pages/gen2/reference/amplifyconfiguration/index.mdx b/src/pages/gen2/reference/amplifyconfiguration/index.mdx index 461c28d32eb..cfd707a3180 100644 --- a/src/pages/gen2/reference/amplifyconfiguration/index.mdx +++ b/src/pages/gen2/reference/amplifyconfiguration/index.mdx @@ -51,7 +51,7 @@ In your frontend end application, you can configure Amplify as follows: ```ts title="src/index.ts" import { Amplify } from "aws-amplify"; -import config from "@/amplify_outputs.json"; +import outputs from "@/amplify_outputs.json"; Amplify.configure(config); ``` @@ -84,7 +84,7 @@ In your frontend end application, you can access these custom configurations as ```ts title="src/index.ts" import { Amplify } from "aws-amplify"; -import config from "@/amplify_outputs.json"; +import outputs from "@/amplify_outputs.json"; Amplify.configure(config); const currentConfig = Amplify.getConfig(); diff --git a/src/pages/gen2/start/quickstart/nextjs-app-router-client-components/index.mdx b/src/pages/gen2/start/quickstart/nextjs-app-router-client-components/index.mdx index 117ffd42f48..9df6acabe9e 100644 --- a/src/pages/gen2/start/quickstart/nextjs-app-router-client-components/index.mdx +++ b/src/pages/gen2/start/quickstart/nextjs-app-router-client-components/index.mdx @@ -48,7 +48,7 @@ Next, create a `components` folder in the root of your project and the contents // components/ConfigureAmplify.tsx "use client"; -import config from "@/amplify_outputs.json"; +import outputs from "@/amplify_outputs.json"; import { Amplify } from "aws-amplify"; Amplify.configure(config, { ssr: true }); diff --git a/src/pages/gen2/start/quickstart/nextjs-app-router-server-components/index.mdx b/src/pages/gen2/start/quickstart/nextjs-app-router-server-components/index.mdx index 94fc59652e0..808de16ba6e 100644 --- a/src/pages/gen2/start/quickstart/nextjs-app-router-server-components/index.mdx +++ b/src/pages/gen2/start/quickstart/nextjs-app-router-server-components/index.mdx @@ -51,7 +51,7 @@ Next, create a `components` folder in the root of your project and copy the cont import { Amplify } from "aws-amplify"; -import config from "@/amplify_outputs.json"; +import outputs from "@/amplify_outputs.json"; Amplify.configure(config, { ssr: true }); @@ -113,7 +113,7 @@ import { generateServerClientUsingCookies } from "@aws-amplify/adapter-nextjs/ap import { getCurrentUser } from "aws-amplify/auth/server"; import { type Schema } from "@/amplify/data/resource"; -import config from "@/amplify_outputs.json"; +import outputs from "@/amplify_outputs.json"; export const { runWithAmplifyServerContext } = createServerRunner({ config, diff --git a/src/pages/gen2/start/quickstart/nextjs-pages-router/index.mdx b/src/pages/gen2/start/quickstart/nextjs-pages-router/index.mdx index 16fd83b78d0..bd54c058a77 100644 --- a/src/pages/gen2/start/quickstart/nextjs-pages-router/index.mdx +++ b/src/pages/gen2/start/quickstart/nextjs-pages-router/index.mdx @@ -49,7 +49,7 @@ Next, in your app's `pages/_app.tsx`, add the following imports and wrap your Ap // pages/_app.tsx import { withAuthenticator } from '@aws-amplify/ui-react'; import { Amplify } from 'aws-amplify'; -import config from '@/amplify_outputs.json'; +import outputs from '@/amplify_outputs.json'; import '@aws-amplify/ui-react/styles.css'; import type { AppProps } from 'next/app'; diff --git a/src/pages/gen2/start/quickstart/vite-react-app/index.mdx b/src/pages/gen2/start/quickstart/vite-react-app/index.mdx index 09b8ebbadf4..982fdae845b 100644 --- a/src/pages/gen2/start/quickstart/vite-react-app/index.mdx +++ b/src/pages/gen2/start/quickstart/vite-react-app/index.mdx @@ -109,7 +109,7 @@ Open `src/main.tsx` and add the following code below the last import: ```tsx title="src/main.tsx" import { Amplify } from 'aws-amplify'; -import amplifyconfig from '../amplify_outputs.json'; +import outputs from '../amplify_outputs.json'; Amplify.configure(amplifyconfig); ``` From 7a22f6168540f4e104f3f872aef6205cfcdef396 Mon Sep 17 00:00:00 2001 From: josef Date: Mon, 29 Apr 2024 13:49:57 -0700 Subject: [PATCH 04/18] Update src/pages/gen2/build-a-backend/server-side-rendering/index.mdx Co-authored-by: Amplifiyer <51211245+Amplifiyer@users.noreply.github.com> --- src/pages/gen2/build-a-backend/server-side-rendering/index.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/gen2/build-a-backend/server-side-rendering/index.mdx b/src/pages/gen2/build-a-backend/server-side-rendering/index.mdx index c919d90d749..144cb8aaf8f 100644 --- a/src/pages/gen2/build-a-backend/server-side-rendering/index.mdx +++ b/src/pages/gen2/build-a-backend/server-side-rendering/index.mdx @@ -29,7 +29,7 @@ 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 `amplify_outputs.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: From 71cd3b631d7a1b9aea5ee7ccc18bc79ec06e89b6 Mon Sep 17 00:00:00 2001 From: josef Date: Tue, 30 Apr 2024 10:22:11 -0700 Subject: [PATCH 05/18] Update src/pages/gen2/build-a-backend/add-aws-services/rest-api/index.mdx Co-authored-by: Scott Rees <6165315+reesscot@users.noreply.github.com> --- .../gen2/build-a-backend/add-aws-services/rest-api/index.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/gen2/build-a-backend/add-aws-services/rest-api/index.mdx b/src/pages/gen2/build-a-backend/add-aws-services/rest-api/index.mdx index d4918fd5569..f83834482e2 100644 --- a/src/pages/gen2/build-a-backend/add-aws-services/rest-api/index.mdx +++ b/src/pages/gen2/build-a-backend/add-aws-services/rest-api/index.mdx @@ -74,7 +74,7 @@ To initialize the REST API you need to configure Amplify with `Amplify.configure ```tsx title="pages/index.tsx" import { Amplify } from 'aws-amplify'; import outputs from '../amplify_outputs.json'; -Amplify.configure(amplifyconfig): +Amplify.configure(outputs): const existingConfig = Amplify.getConfig(); From 82efff9e65dbfb15c3912fada0c36a68db0955c2 Mon Sep 17 00:00:00 2001 From: josef Date: Tue, 30 Apr 2024 10:22:31 -0700 Subject: [PATCH 06/18] Update src/pages/gen2/build-a-backend/data/connect-to-API/index.mdx --- src/pages/gen2/build-a-backend/data/connect-to-API/index.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/gen2/build-a-backend/data/connect-to-API/index.mdx b/src/pages/gen2/build-a-backend/data/connect-to-API/index.mdx index fa109cd21d8..954cd098d84 100644 --- a/src/pages/gen2/build-a-backend/data/connect-to-API/index.mdx +++ b/src/pages/gen2/build-a-backend/data/connect-to-API/index.mdx @@ -38,7 +38,7 @@ When you deploy you're iterating on your backend (`npx amplify sandbox`), an `am import { Amplify } from 'aws-amplify'; import outputs from '../amplify_outputs.json'; -Amplify.configure(config); +Amplify.configure(outputs); ``` ## Generate the Amplify Data client From 65f1be0351f4f934476891149e0c9bd9ed0426f1 Mon Sep 17 00:00:00 2001 From: josefaidt Date: Tue, 30 Apr 2024 10:25:23 -0700 Subject: [PATCH 07/18] Amplify.configure(config) -> Amplify.configure(outputs) --- .../build-a-backend/auth/set-up-auth/index.mdx | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/src/pages/[platform]/build-a-backend/auth/set-up-auth/index.mdx b/src/pages/[platform]/build-a-backend/auth/set-up-auth/index.mdx index 4364e72472e..6c875e90a58 100644 --- a/src/pages/[platform]/build-a-backend/auth/set-up-auth/index.mdx +++ b/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); ``` @@ -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); ``` @@ -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);