Monorepo project structure

For a monorepo setup, it is recommended to have the Amplify CLI initialize a new backend at the root of one of your frontend projects. In a different frontend directory, you can run amplify pull and select the Amplify project you want to associate your frontend with.

Example

In this guide, you will learn the recommended Amplify project setup for monorepo.

Step 1: Set up your monorepo project

To get started, have a monorepo setup with a couple of frontends. For our example, we'll have a monorepo setup with a React and an Angular app.

This project contains the frontend code for an angular and react Todo app. The repository has the following structure:

1> monorepo-amplify
2  > react
3  > angular

Step 2: Set up the Amplify backend

To set up a backend on AWS, you are going to use the Amplify CLI. The Amplify CLI is a command-line toolchain that simplifies provisioning AWS services.

1npm install -g @aws-amplify/cli

1curl -sL https://aws-amplify.github.io/amplify-cli/install | bash && $SHELL

1curl -sL https://aws-amplify.github.io/amplify-cli/install-win -o install.cmd && install.cmd

Resolve EACCES permissions when installing packages globally with npm

First, configure the CLI on your machine. Once configured, initialize a new backend project at the root of one of your frontend projects. While you could also initialize the project at the root level, the Amplify is best used attached to one of your projects. This allows you to set up continuous deployment pipelines of the frontend and backend together.

1> cd monorepo-amplify/react
2amplify init
3? Enter a name for the project todoreact
4? Enter a name for the environment dev
5? Choose your default editor: Visual Studio Code
6? Choose the type of app that you're building javascript
7Please tell us about your project
8? What javascript framework are you using react
9? Source Directory Path:  src
10? Distribution Directory Path: build
11? Build Command:  npm run-script build
12? Start Command: npm run-script start
13Using default provider  awscloudformation
14
15For more information on AWS Profiles, see:
16https://docs.aws.amazon.com/cli/latest/userguide/cli-multiple-profiles.html
17
18? Do you want to use an AWS profile? Yes
19? Please choose the profile you want to use #enter the profile you created

Add api and database

1> amplify add api
2? Please select from one of the below mentioned services:
3  > GraphQL
4? Here is the GraphQL API that we will create. Select a setting to edit or continue:
5  > Continue
6? Choose a schema template:
7  > Single object with fields (e.g., “Todo” with ID, name, description)
8? Do you want to edit the schema now?
9  > Yes

Deploy to cloud

1amplify push
2✔ Successfully pulled backend environment dev from the cloud.
3
4Current Environment: dev
5
6| Category | Resource name | Operation | Provider plugin   |
7| -------- | ------------- | --------- | ----------------- |
8| Api      | todo          | Create    | awscloudformation |
9? Are you sure you want to continue? Yes
10
11The following types do not have '@auth' enabled. Consider using @auth with @model
12  - Todo
13Learn more about @auth here: [https://docs.amplify.aws/react/build-a-backend/graphqlapi/customize-authorization-rules/](/[platform]/build-a-backend/graphqlapi/customize-authorization-rules/)
14
15GraphQL schema compiled successfully.
16
17Edit your schema at /Users/nsswamin/workspace/Experiments/monorepo-amplify/react/amplify/backend/api/todo/schema.graphql or place .graphql files in a directory at /Users/nsswamin/workspace/Experiments/monorepo-amplify/react/amplify/backend/api/todo/schema
18? Do you want to generate code for your newly created GraphQL API
19  > Yes
20? Choose the code generation language target
21  > javascript
22? Enter the file name pattern of graphql queries, mutations and subscriptions
23  > src/graphql/**/*.js
24? Do you want to generate/update all possible GraphQL operations - queries, mutations and subscriptions
25  > Yes
26? Enter maximum statement depth [increase from default if your schema is deeply nested]
27  > 2

Step 3a: Integrate backend with React app

Test the React app locally. Create a new to-do..

1npm start

To verify the Todos got created, run amplify console. This will open up your backend env in the Amplify Console. Choose the API tab and under Data Sources click View on the Todotable. You should see the to-do record you just created.

Step 3b: Integrate backend with Angular app

Now pivot to the Angular app.

1cd ../angular

Let's reference the same backend in the Angular app. In order to do so, run the following commands

1amplify pull
2? Do you want to use an AWS profile? Yes
3? Please choose the profile you want to use work-lhr
4? Which app are you working on?
5❯ todo
6  app2
7  app3
8
9(hit enter on all other options till the last question)
10
11? Do you plan on modifying this backend? No

Generate client-side code for your other frontend

1cp ../react/src/graphql/schema.json .
2amplify add codegen --apiId XXXXXXXXX
3? Choose the type of app that you're building javascript
4? What javascript framework are you using angular
5? Choose the code generation language target angular
6? Enter the file name pattern of graphql queries, mutations and subscriptions src/graphql/**/*.graphql
7? Do you want to generate/update all possible GraphQL operations - queries, mutations and subscriptions Yes
8? Enter maximum statement depth [increase from default if your schema is deeply nested] 2
9? Enter the file name for the generated code src/app/API.service.ts
10? Do you want to generate code for your newly created GraphQL API Yes

Command hooks

Override Amplify-generated project-level IAM resources