Separate frontend and backend teams

You might have a different frontend and backend team that maintains their own repositories. Amplify (Gen 2) now offers the ability of deploying repositories that have backend-only code. So frontend and backend teams can operate independently of each other.

Deploy the backend app

Run mkdir backend-app && npm create amplify@latest to set up a backend-only Amplify project. Commit the code to a Git provider of your choice.
Connect the backend-app in the new console. Navigate to the Amplify console and select New app > Build an app (Gen 2).
When you connect the repository, notice the only auto-detected framework is Amplify.

multirepo

Once you hit Save and deploy, your backend project will build.

Deploy the frontend app

Now lets set up the frontend app and connect to the deployed backend.

1npm create next-app@14 -- multi-repo-example --typescript --eslint --no-app --no-src-dir --no-tailwind --import-alias '@/*'

Install Amplify dependencies.

1cd multi-repo-example
2npm add @aws-amplify/backend-cli aws-amplify @aws-amplify/ui-react

To connect to the deployed backend run the following command. The app-id to reference is the APPID for your backend app. You can find this by going to the Amplify console and navigating to backend-app > App settings > App ARN and copying the ID located at the end of the string arn:aws:amplify:<region>:<account-id>:apps/app-id.

1npx 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.

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

1// pages/_app.tsx
2import { withAuthenticator } from '@aws-amplify/ui-react';
3import { Amplify } from 'aws-amplify';
4import config from '@/amplifyconfiguration.json';
5import '@aws-amplify/ui-react/styles.css';
6import '@/styles/globals.css';
7import type { AppProps } from 'next/app';
8
9// configure the Amplify client library with the configuration generated by `amplify sandbox`
10Amplify.configure(config);
11
12function App({ Component, pageProps }: AppProps) {
13  return <Component {...pageProps} />;
14}
15
16export default withAuthenticator(App);

Let's also add an amplify.yml build-spec to our repository.

1version: 1
2backend:
3  phases:
4    build:
5      commands:
6        - nvm use 18
7        - npm ci
8        - npx amplify generate config --branch main --app-id BACKEND-APPID
9frontend:
10  phases:
11    preBuild:
12      commands:
13        - npm ci
14    build:
15      commands:
16        - npm run build
17  artifacts:
18    baseDirectory: .next
19    files:
20      - '**/*'
21  cache:
22    paths:
23      - node_modules/**/*

Now let's deploy the app in the Amplify Console, choose New app > Build an app (Gen 2). Connect the repository and leave the default settings. You should see the build generates the config and does not deploy a frontend. Validate that your app is working fine.

multi-repo

Trigger a frontend build on backend updates

What you ideally want is for the frontend to pick up the latest backend updates every time there is a modification.

Use the AWS CLI to create an incoming webhook. If the command executes successfully, you should see a response printed out like below:

1aws amplify create-webhook --app-id FRONTEND-APPID --branch-name main  --region REGION
2{
3    "webhook": {
4        "webhookArn": "arn:aws:amplify:REGION:ACCOUNT-ID:apps/APPID/webhooks/WEBHOOK-ID",
5        "webhookId": "WEBHOOK-ID",
6        "webhookUrl": "https://webhooks.amplify.ca-central-1.amazonaws.com/prod/webhooks?id=WEBHOOK-ID&token=TOKEN",
7        "branchName": "main",
8        "createTime": "2023-11-19T19:09:42.461000-08:00",
9        "updateTime": "2023-11-19T19:09:42.461000-08:00"
10    }
11}

Construct a curl command with the webhookUrl: curl -X POST -d {} "https://webhooks.amplify.ca-central-1.amazonaws.com/prod/webhooks?id=WEBHOOK-ID&token=TOKEN&operation=startbuild" -H "Content-Type:application/json
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.

1version: 1
2backend:
3  phases:
4    build:
5      commands:
6        - nvm use 18
7        - npm ci
8        - npx amplify pipeline-deploy --branch $AWS_BRANCH --app-id $AWS_APP_ID
9frontend:
10  phases:
11    preBuild:
12      commands:
13        - npm ci
14    build:
15      commands:
16        - mkdir ./dist && touch ./dist/index.html
17        - curl -X POST -d {} "https://webhooks.amplify.ca-central-1.amazonaws.com/prod/webhooks?id=WEBHOOK-ID&token=TOKEN&operation=startbuild" -H "Content-Type:application/json"
18  artifacts:
19    baseDirectory: dist
20    files:
21      - '**/*'
22  cache:
23    paths:
24      - node_modules/**/*