---
title: "Separate frontend and backend teams"
section: "deploy-and-host/fullstack-branching"
platforms: ["android", "angular", "flutter", "javascript", "nextjs", "react", "react-native", "swift", "vue"]
gen: 2
last-updated: "2024-06-14T17:19:21.000Z"
url: "https://docs.amplify.aws/react/deploy-and-host/fullstack-branching/mono-and-multi-repos/"
---

You might have different frontend and backend teams that maintain their own repositories. With Amplify Gen 2, you can deploy repositories that have backend-only code, so frontend and backend teams can operate independently of each other.

## Deploy the backend app

1. Run `mkdir backend-app && cd backend-app && npm create amplify@latest` to set up a backend-only Amplify project. Commit the code to a Git provider of your choice.

1. Connect the `backend-app` in the new console. Navigate to the Amplify console and select **Create new app**.

1. When you connect the repository, notice the only auto-detected framework is Amplify.

![Screenshot of the App Settings section in the Amplify console with Amplify Deploy listed under Auto-detected frameworks](/images/gen2/fullstack-branching/multirepo1.png)

4. Once you choose **Save and deploy**, your backend project will build.

![Screenshot of the Overview page in the Amplify console showcasing the deployment for the main branch](/images/gen2/fullstack-branching/multirepo2.png)

## Deploy the frontend app

1. Now let's set up the frontend app and connect to the deployed backend.

```bash title="Terminal" showLineNumbers={false}
npm create next-app@14 -- multi-repo-example --typescript --eslint --no-app --no-src-dir --no-tailwind --import-alias '@/*'

```

2. Install Amplify dependencies.

```bash title="Terminal" showLineNumbers={false}
cd multi-repo-example
npm add @aws-amplify/backend-cli aws-amplify @aws-amplify/ui-react
```

3. To connect to the deployed backend, run the following command. To locate the `App ID` for your backend application, navigate to the Amplify console and select your **backend-app**. On the Overview page, the `App ID` is displayed under the project name.

```bash title="Terminal" showLineNumbers={false}
npx ampx generate outputs --branch main --app-id <your-backend-app-id>
```

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 amplify_outputs.json file highlighted"
  width="300"
/>

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

```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 `ampx sandbox`
Amplify.configure(outputs);

function App({ Component, pageProps }: AppProps) {
  return <Component {...pageProps} />;
}

export default withAuthenticator(App);
```

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

```yaml
version: 1
backend:
  phases:
    build:
      commands:
        - npm ci --cache .npm --prefer-offline
        - npx ampx generate outputs --branch main --app-id BACKEND-APPID
frontend:
  phases:
    build:
      commands:
        - npm run build
  artifacts:
    baseDirectory: .next
    files:
      - '**/*'
  cache:
    paths:
      - .next/cache/**/*
      - .npm/**/*
      - node_modules/**/*
```

4. Now let's deploy the app. In the Amplify console, choose **Create new app**. Connect the repository with the default settings. You should see that the build generates the output and does not deploy a frontend. Validate that your app is working fine.

![Screenshot of the Deployments page in the Amplify console showing the build of the app](/images/gen2/fullstack-branching/multirepo4.png)

## Trigger a frontend build on backend updates

The ideal scenario is that the frontend automatically retrieves the latest updates from the backend every time there is a modification made to the backend code.

1. Use the Amplify Console to create an [incoming webhook](https://docs.aws.amazon.com/amplify/latest/userguide/webhooks.html).

2. Navigate to the **multi-repo-example** app, under **Hosting > Build settings** select **Create webhook**. Provide a **name** for the webhook and select the **target branch** to build on incoming webhook requests.

![Screenshot of the Build settings page in the Amplify console showing the incoming webhooks feature](/images/gen2/fullstack-branching/multirepo5.png)

3. Next, select the webhook and copy the `curl` command which will be used to trigger a build for the **multi-repo-example** app.

![Screenshot of the Incoming webhooks page in the Amplify console displaying the newly created webhook](/images/gen2/fullstack-branching/multirepo6.png)

4. 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 title="amplify.yml"
version: 1
backend:
  phases:
    build:
      commands:
        - npm ci --cache .npm --prefer-offline
        - npx ampx pipeline-deploy --branch $AWS_BRANCH --app-id $AWS_APP_ID
frontend:
  phases:
    build:
      commands:
        - mkdir ./dist && touch ./dist/index.html
        - 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"
  artifacts:
    baseDirectory: dist
    files:
      - '**/*'
  cache:
    paths:
      - node_modules/**/*
```

<!-- Platform: angular,javascript,nextjs,react,react-native,vue -->
## Sharing schema type definitions

If you're using Amplify Data, we recommend adding a `paths` entry in the `tsconfig.json` of your frontend app that points to the `amplify/data/resource.ts` file in your backend app to easily access your schema type definitions from your frontend apps.

First, cone your backend repo into the same parent directory as your frontend app, then add the following entry:

```json title="tsconfig.json" showLineNumbers={false}
{
  "compilerOptions": {
    "paths": {
      "@/data-schema": ["../backend-app/amplify/data/resource"]
    }
  }
}
```

You can then import the `Schema` type from this path in your frontend code to get code completion and strong typing for your API calls:

```ts title="apps/admin-dashboard/page.tsx"
import { generateClient } from "aws-amplify/data";
import type { Schema } from "@/data-schema";

const client = generateClient<Schema>();

const createTodo = async () => {
  await client.models.Todo.create({
    content: window.prompt("Todo content?"),
    isDone: false,
  });
}

```
<!-- /Platform -->