Chapter 7: Setting Up an Amplify Pipeline

So far, we have made some significant progress with AWS Amplify. In this chapter, we will learn how to apply DevOps and even NoOps with the Amplify pipeline. DevOps or NoOps can help your development team deliver new features to production very quickly.

Some people would call DevOps a culture, a practice, an approach, a framework, or even a set of tools. Well, the fact is that all these names are correct and do not contradict each other. Because Devs and Ops are working more closely than ever before, there is definitely a culture change, especially with the AWS Amplify pipeline. It is a good practice to shorten the cycle time from build, test, and deployment to production. It is a better approach compared to manual deployment. It is a toolchain that helps you apply continuous integration, test automation, and deployment as easily as pushing a button. If you are using the Amplify pipeline, you might not even need to worry about Ops anymore...

Technical requirements

This chapter requires you to complete the exercises in Chapter 1, Getting Familiar with the Amplify CLI and Amplify Console, to ensure you have added Amplify Hosting to your project. Amplify Hosting only works with the ReactJS and React Native for Web projects. Yes, React Native for Web is a thing in 2021 since the React community has been working on it for a few years; it is in its beta stage at the moment, which is very stable. React Native for Web can be enabled for both Expo and React Native apps. Many well-known companies are using React Native for Web in production, including Twitter, Flipkart, Uber, and The Times.

If your app is based on Expo, then React Native for Web should already be part of the package as Expo SDK version 33, called the Expo Web. However, if your app is based on React Native, then you will need to run the following command to add the React Native for Web library to your project:

yarn add react-native-web

You can download the...

Enabling the Amplify DevOps pipeline

To enable the Amplify DevOps pipeline, the app must be set up for continuous deployment and connected to a GitHub repository. Follow these steps to enable the continuous deployment pipeline for your apps:

1. Open a Terminal and enter the amplify add hosting command for the ReactJS, React Native for Web, and Expo Web projects. Then, select Continuous deployment as type. This will open Amplify Console in your browser:

   amplify add hosting
   ? Select the plugin module to execute Hosting with Amplify Console (Managed hosting with custom domains, Continuous deployment)
   ? Choose a type Continuous deployment (Git-based deployments)
   ? Continuous deployment is configured in the Amplify Console. Please hit enter once you connect your repository

2. Choose your favorite GitHub repository provider and click Connect branch:

   Figure 7.1 – Connecting to a GitHub repository

3. Click on the drop - down menu to select the correct repository for your app and...

Adding the YAML file

In the previous section, we downloaded the YAML template that was generated by Amplify Console, which was based on the auto detection of our technology stacks. However, as we already know, sometimes, we might need to tweak it a little to fulfil the requirements of the project.

Open the DevOps Pipeline YAML file that we downloaded earlier. The build steps are very straightforward. The file installs the libraries for both the backend and the frontend and then caches all the node modules that have been installed:

version: 1
applications:
  - backend:
      phases:
        build:
          commands:
            - '# Execute Amplify CLI with the helper script'
            - amplifyPush --simple
  ...

Enabling email notifications

The Amplify pipeline is very handy for CI/CD, but what if the build time is getting longer due to our application getting bigger? We don't want to sit and wait for the build result to come back while working on other tasks during the build. How can we get notified when a build has finished, regardless of whether it's failed or been successful? The Amplify pipeline can do this for us. All we need to do is go to the Notification section of Amplify Console and add our email address there so that we get a notification. To enable email notifications, follow these steps:

1. Click on the Add notification button or Manage notifications:

   Figure 7.15 – Email notifications

   After clicking on Manage notifications or the Add notification button, you will see the text field for the email address and a drop - down menu for the branches. You can add more than one email address by clicking the Add Email button for more input fields.

2. Enter the email...

Troubleshooting techniques

You might be wondering how we are going to find out what happens when the build fails or what happens if the build doesn't work anymore due to library upgrades. So, in this section, we will learn how to look at the online console logs to find out about what went wrong. Let's get started:

1. Let's create a failed build scenario by adding a bug to one of our React apps. To do this, comment out one of the import statements in the App.tsx file and recommit the code to the repository after:

   import * as subscriptions from "./graphql/subscriptions";
   // import { AmplifyS3Image } from "@aws-amplify/ui-react";
   import awsExports from "./aws-exports";

2. Now, go to Amplify Console to check out the new build. The build should have failed due to the error that we created within the app.
3. Click on the Build tab of the DevOps pipeline and expand the collapsible area where the frontend error occurred to check out the console...

Triggering the pipeline

There are a few ways to trigger the DevOps pipeline. We can trigger the pipeline by committing the code through the repository and triggering the build automatically, or by directly triggering the pipeline manually.

Imagine working with multiple team members who are working on the trunk together and we keep triggering the pipeline with an unfinished feature. Ideally, we would like to trigger the pipeline when the team is ready to integrate. To do this, we will need to disable the auto build feature of the pipeline:

1. Go to Amplify Console | App | General | Branches, click on the Action dropdown, and select the Disable auto build option:

   Figure 7.20 – Disable auto build option

   After this, we will need to create a webhook on the Build Settings page.

2. Click on the Create webhook button:

   Figure 7.21 – Create webhook button

3. Enter a desired name for the webhook or leave it blank. If you leave it blank, a default name will be used instead...

Summary

In this chapter, we learned how to set up the Amplify DevOps pipeline, which automates the entire build workflow. We looked at various ways of sending notifications about when the build succeeded or failed. After that, we discussed some different ways of triggering the build and how it works in different kinds of branching scenarios.

Finally, we saw what NoOps (or LessOps) is all about. As we already know, DevOps exists for microservices or monolith architectures, but NoOps should be used for serverless technologies such as AWS Amplify Function or a Function as a Service (FaaS) such as Lambda. This is because we don't really need to set up nor maintain the infrastructure for the CI/CD pipeline.

In the next chapter, we will be learning about end-to-end test automation. I can say that this is a huge time saver based on my experience with many development teams that build enterprise solutions.