Skip to content

Commit

Permalink
clean up remaining commands (#7458)
Browse files Browse the repository at this point in the history
* first pass

* second pass
  • Loading branch information
josefaidt authored May 2, 2024
1 parent 2c33953 commit a0425ed
Show file tree
Hide file tree
Showing 6 changed files with 11 additions and 12 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -53,7 +53,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 `amplify_outputs.json` for the specified environment.
Add the `npx ampx generate outputs --branch $AWS_BRANCH --app-id $AWS_APP_ID` command to the build spec and comment out the `npx ampx pipeline-deploy --branch $AWS_BRANCH --app-id $AWS_APP_ID` command. `ampx pipeline-deploy` runs a script to deploy backend updates, while `ampx generate outputs` 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)

Expand Down Expand Up @@ -183,4 +183,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 `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.
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 `ampx pipeline-deploy` in the CodeCatalyst workflow and `ampx generate outputs` 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.
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,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 `amplify_outputs.json` for the specified environment.
3. Update the Amplify build-spec to add `npx ampx generate outputs --branch $AWS_BRANCH --app-id $AWS_APP_ID` and comment out the `pipeline-deploy` script. `ampx pipeline-deploy` runs a script to deploy backend updates, while `ampx generate outputs` fetches the latest `amplify_outputs.json` for the specified environment.

![custom-ci](/images/gen2/fullstack-branching/custom-ci.png)

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -75,16 +75,15 @@ This will generate the `amplify_outputs.json` file that contains all the informa

4. To validate that your frontend can connect to the backend, add the `Authenticator` login form to your app.

```ts
// pages/_app.tsx
```ts title="pages/_app.tsx"
import { withAuthenticator } from '@aws-amplify/ui-react';
import { Amplify } from 'aws-amplify';
import outputs from '@/amplify_outputs.json';
import '@aws-amplify/ui-react/styles.css';
import '@/styles/globals.css';
import type { AppProps } from 'next/app';

// configure the Amplify client library with the configuration generated by `amplify sandbox`
// configure the Amplify client library with the configuration generated by `ampx sandbox`
Amplify.configure(outputs);

function App({ Component, pageProps }: AppProps) {
Expand Down Expand Up @@ -150,7 +149,7 @@ aws amplify create-webhook --app-id FRONTEND-APPID --branch-name main --region

1. Now update the build settings for the `backend-app` to include the `curl` command to trigger a frontend build any time there are changes to the backend.

``` yaml
```yaml title="amplify.yml"
version: 1
backend:
phases:
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,7 @@ You can update your app build settings to share resources across branches. From

![The build specification YAML 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 `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.
Update the build settings for the `backend` phase to run `npx ampx generate outputs --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
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -219,12 +219,12 @@ Alternatively, if you want to generate the config for a branch environment to te
For Web and React Native, generating the config with the default format and output directory.

```bash title="Terminal" showLineNumbers={false}
npx ampx generate config --app-id <app-id> --branch main
npx ampx generate outputs --app-id <app-id> --branch main
```
</InlineFilter>
<InlineFilter filters={['flutter']}>
```bash title="Terminal" showLineNumbers={false}
npx ampx generate config --app-id <app-id> --branch main --format dart --out-dir lib
npx ampx generate outputs --app-id <app-id> --branch main --format dart --out-dir lib
```
</InlineFilter>
<InlineFilter filters={['android']}>
Expand All @@ -240,7 +240,7 @@ npx ampx generate outputs --app-id <app-id> --branch main --out-dir app/src/main
<InlineFilter filters={['swift']}>

```bash title="Terminal" showLineNumbers={false}
npx ampx generate config --app-id <app-id> --format json-mobile
npx ampx generate outputs --app-id <app-id> --format json-mobile
```

Once the sandbox environment is running, it will generate the backend outputs file for your frontend application. However, Xcode won't be able to recognize them. For recognizing the files, you need to drag and drop the generated files to your project.
Expand Down
2 changes: 1 addition & 1 deletion src/pages/[platform]/reference/amplify_outputs/index.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@ export async function getStaticProps() {

In Amplify Gen 2, the CLI will generate an `amplify_outputs.json` file with your backend's outputs such as your Data endpoint and Auth metadata. This file -- also known as the "client configuration file" -- is used to configure the client libraries in order to interact with your backend resources. Locally, this file is created while using `ampx 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 [`ampx generate config`](/[platform]/reference/cli-commands#npx-ampx-generate-config).
You can also manually create this file for a specified Amplify app ID and branch, or an AWS CloudFormation stack name with [`ampx generate outputs`](/[platform]/reference/cli-commands#npx-ampx-generate-outputs).

{/* @TODO full type/interface to reference */}

Expand Down

0 comments on commit a0425ed

Please sign in to comment.