Set up continuous deployment and hosting for a monorepo with AWS Amplify Console

This article was written by Nikhil Swaminathan, Sr. Product Manager Technical, AWS.

Amplify Console recently launched monorepo support, providing developers with mono-repositories a better experience connecting apps to the Amplify Console. A mono-repository is a repository that contains more than one logical project, each in it’s own repository. For example, if you have multiple teams building microsites under different subdomains of your primary domain, a monorepo strategy gives each team the flexibility to pick their frontend tech stack (e.g. angular vs react), while allowing shared functionality to be stored in common libraries in the same repository.

With today’s launch, Amplify Console makes it easy to deploy monorepo apps with three important features:

Automatic detection of build settings when connecting a sub-folder in your mono-repository. This makes connecting and deploying a project in your monorepo frictionless.
Selective build triggers: New builds in the Amplify Console are only triggered when there are code changes within a specific app project.
Ability to define the build settings for multiple apps in a single build specification file (amplify.yml).

In this blog post we are going to walkthrough deploying a React and Gatsby app that live in the same repository.

Step 1: Set up monorepo project

To setup your project, we will first create a React and Gatsby app and then commit the two apps to the same Git repository. The Gatsby app will be our marketing site while we will use the React app to build an application with a cloud backend. The cloud backend will contain a database with a GraphQL API to access the data.

Create a React and Gatsby app in the same folder to get started.

# create a root folder
mkdir monorepo-app && cd monorepo-app

# create a react app
npx create-react-app reactapp

#create a gatsby app
gatsby new marketing-site https://github.com/gatsbyjs/gatsby-starter-hello-world

Now create a new Git repository in a Git provider of your choice (GitHub, AWS CodeCommit, GitLab, or BitBucket) and push your newly created project to a Git repo

git init
git remote add origin git@github.com:user/reponame.git
git add .
git commit -am '
git push -u origin

Step 2: Deploy React app with cloud backend

To set up a cloud backend, run the amplify-app script. This script automatically bootstraps your project with an Amplify backend. This post will focus on setting up the monorepo, but if you would like to read more on how to build a cloud backend with Amplify, check out this blog.

cd reactapp
npx amplify-app@latest

Once the basic setup completes open the GraphQL schema located in amplify/backend/api/amplifyDatasource/schema.graphql. This schema defines your data model. Let’s say we’re building a reviews app that allows users to create a post with a rating.

enum PostStatus {
ACTIVE
INACTIVE
}

type Post @model {
id: ID!
title: String!
rating: Int!
status: PostStatus!
}

Deploy this backend to the cloud by running the following command.

npm run amplify-push

Update your React app’s App.js with the following code

# fetch the frontend code for the app
curl -o src/App.js  https://raw.githubusercontent.com/swaminator/monorepo-sample/master/reactapp/src/App.js

# start the app locally
npm run start

You should see the following screen. Click on the ‘NEW’ button to add a random post.

To verify this post got synced to the cloud, run amplify console from your terminal window, choose the API tab, and then choose View under Data sources. This will open an Amazon DynamoDB table where you should be able to see the post(s) that you created locally.

Commit this code to your git repository by running git add . && git commit -m 'added amplify backend'.

Now it’s time to connect our frontend app. Head back to the Amplify Console and navigate to the app home, by clicking the app name (reactapp) from the navigation breadcrumb. You should see a screen that asks you to Connect a frontend web app. Pick your Git provider along with repository and branch. Check the option that asks if you’re connecting a monorepo and enter reactapp into the textbox that appears. Choose Next.

Amplify Console automatically detects that you are connecting a sub-folder with a React app using an Amplify backend. Amplify allows you to set up continuous deployment workflows of the frontend and backend together. Select the existing backend you deployed named amplify and then create a service role to allow Amplify Console to deploy changes to your backend (if they exist).

That’s it! Choose Next, and Save and deploy. Amplify Console will pull source code from your Git repo, build and deploy your frontend to a global CDN accessible at https://master.appid.amplifyapp.com.

Click on the screenshot to open your app URL. You should see the same data you had created locally. Amplify Datastore offers realtime synchronization across devices – open the deployed app and the localhost app side-by-side and create new fields. You should see the data appearing in both browsers instantly.

Your React app is set up with continuous deployment and hosting! Make a small code change to your reactapp and commit code to your repository to see Amplify Console automatically trigger a new build.

.....  
return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <div> My monorepo React app</div>
      <div>
      .....

Step 3: Deploy the Gatsby marketing site

Now that you’ve built and deployed the React app, let’s deploy the Gatsby app we created in Step 1. From the Amplify Console breadcrumbs, navigate to the All apps page and choose Connect app. Pick the monorepo checkbox again, but this time enter marketing-site in the textbox.

Amplify Console will automatically detect your build settings. Go ahead and choose Next and Save and deploy. In a few minutes you will now have your Gatsby app deployed.

To recap, you now have two Amplify apps that are connected to your React and Gatsby app.

Step 4: Trigger a commit to the Gatsby site

Now that both your apps are deployed to the Amplify Console, let’s trigger an update via a code change in the Gatsby app. From your local terminal, navigate to monorepo-app/marketing-site/src/pages/index.js and update the following code:

import React from "react"

export default function Home() {
  return <div>My marketing site</div>
}

Commit this code to your repository by running git add . && git commit -m 'modified marketing site' && git push. Now visit the Amplify Console to see that a new build has been triggered on both apps. Both apps will build for the first time, but for every subsequent code change, only the app in which you made changes will build. For example, if you only make a code change in the Gatsby app, the Gatsby app will update as expected while React app build will automatically cancel.

Step 5 (Bonus points): Combine your build settings amplify.yml file

We currently have separate build settings stored in each app. When managing a monorepo it is often convenient to store all build settings centrally in the repository. In the root of your repository, create a amplify.yml file with two appRoot trees as described here.

Summary

In this post, we have connected two monorepo apps to the Amplify Console without requiring any extra configuration steps. Visit the Amplify Console to get started.

Front-End Web & Mobile