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.
In this guide, you will learn the recommended Amplify project setup for monorepo.
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-amplify2 > react3 > angular
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
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.
Add api and database
1> amplify add api2? Please select from one of the below mentioned services:3 > GraphQL4? Here is the GraphQL API that we will create. Select a setting to edit or continue:5 > Continue6? 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
Test the React app locally. Create a new to-do..
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.
Now pivot to the Angular app.
Let's reference the same backend in the Angular app. In order to do so, run the following commands
1amplify pull2? Do you want to use an AWS profile? Yes3? Please choose the profile you want to use work-lhr4? Which app are you working on?5❯ todo6 app27 app389(hit enter on all other options till the last question)1011? Do you plan on modifying this backend? No
Generate client-side code for your other frontend