Rapid Application Development with AWS Amplify E-Book

Adrian Leung

• Herausgeber: Packt Publishing
• Kategorie: Fachliteratur
• Sprache: Englisch

Seitenzahl: 219

Veröffentlichungsjahr: 2021

Beschreibung

AWS Amplify is a modern toolkit that includes a command line interface (CLI); libraries for JS, iOS, and Android programming; UI component libraries for frameworks like React, Angular, and Vue.js for web development, and React Native and Flutter for mobile development.
You'll begin by learning how to build AWS Amplify solutions with React and React Native with TypeScript from scratch, along with integrating it with existing solutions. This book will show you the fastest way to build a production-ready minimum viable product (MVP) within days instead of years. You'll also discover how to increase development speed without compromising on quality by adopting behavior-driven development (BDD) and Cypress for end-to-end test automation, as well as the Amplify build pipeline (DevOps or CI/CD pipeline) to ensure optimal quality throughout continuous test automation and continuous delivery. As you advance, you'll work with React to determine how to build progressive web apps (PWAs) with Amplify and React Native for cross-platform mobile apps. In addition to this, you'll find out how to set up a custom domain name for your new website and set up the AWS Amplify Admin UI for managing the content of your app effectively.
By the end of this AWS book, you'll be able to build a full-stack AWS Amplify solution all by yourself.

Leseprobe

Rapid Application Development with AWS Amplify

Build cloud-native mobile and web apps from scratch through continuous delivery and test automation

Adrian Leung

BIRMINGHAM—MUMBAI

Rapid Application Development with AWS Amplify

Copyright © 2021 Packt Publishing

All rights reserved. No part of this book may be reproduced, stored in a retrieval system, or transmitted in any form or by any means, without the prior written permission of the publisher, except in the case of brief quotations embedded in critical articles or reviews.

Every effort has been made in the preparation of this book to ensure the accuracy of the information presented. However, the information contained in this book is sold without warranty, either express or implied. Neither the author, nor Packt Publishing or its dealers and distributors, will be held liable for any damages caused or alleged to have been caused directly or indirectly by this book.

Packt Publishing has endeavored to provide trademark information about all of the companies and products mentioned in this book by the appropriate use of capitals. However, Packt Publishing cannot guarantee the accuracy of this information.

Associate Group Product Manager: Pavan Ramchandani

Publishing Product Manager: Rohit Rajkumar

Senior Editor: Sofi Rogers

Content Development Editor: Rakhi Patel

Technical Editor: Shubham Sharma

Copy Editor: Safis Editing

Project Coordinator: Manthan Patel

Proofreader: Safis Editing

Indexer: Manju Arasan

Production Designer: Roshan Kawale

First published: June 2021

Production reference: 1250621

Published by Packt Publishing Ltd.

Livery Place

35 Livery Street

Birmingham

B3 2PB, UK.

ISBN 978-1-80020-723-3

www.packt.com

Contributors

About the author

Adrian Leung is a full-stack cloud native engineer and Agile Transformation Coach with a deep understanding of Business and Organizational Agilities. His background has led him to coach many enterprises in digital transformation with Design Thinking and Agile as well as enterprise scalable cloud-native solution architectures to deliver real value to their customers.

Adrian earned a degree in Applied Information Technology from The University of Newcastle, Australia in 2007. His work history includes helping many enterprises in Hong Kong with their digital transformation journey. He is currently the Founder of Adventvr that is building amazing products and espousing the benefits of serverless systems whenever he has the chance.

I want to thank the people who have been close to me and supported me from all over the world.

About the reviewer

Grégoire Hertault is a full-stack web developer based in France. With over 10 years of experience, he has become an expert in a wide range of technologies, including React, React Native, and AWS. He is the author of React Admin Amplify, an open source library designed to easily set up the admin interface of your AWS Amplify app. He is also the author of React Native Twilio Phone, a VoIP module for React Native. Besides open source projects, he works as a technical expert for start-ups and large companies.

Table of Contents

Preface

Who this book is for

What this book covers

To get the most out of this book

Download the example code files

Download the color images

Conventions used

Share Your Thoughts

Section 1: Getting Ready

Chapter 1: Getting Familiar with the Amplify CLI and Amplify Console

Technical requirements

Understanding the AWS Amplify CLI

Exploring Amplify Console

Understanding AWS Amplify hosting

Creating full-stack serverless web and native apps with AWS Amplify

Creating an Expo app

Creating a new PWA

Creating a new React Native app

Summary

Chapter 2: Creating a React App with AmplifyJS and TypeScript

Technical requirements

Creating a new project with React or React Native with TypeScript

Installing AWS Amplify dependencies

Setting up the backend

Adding an API with GraphQL and DynamoDB

Integrating the GraphQL API with the ReactJS app

Launching the ReactJS app

Integrating the GraphQL API with the React Native and Expo apps

Launching the React Native and Expo apps

Summary

Section 2: Building a Photo Sharing App

Chapter 3: Pluggable Amplify UI Components

Technical requirements

Installing Amplify UI in the project

Adding Amplify UI components to a ReactJS project

Customizing Amplify UI components for ReactJS

Applying styling such as typography and colors to a ReactJS app

Adding Amplify UI components to a React Native project

Customizing Amplify UI components for Expo and React Native apps

Applying styling such as typography and colors to Expo and React Native apps

Summary

Chapter 4: User Management with Amplify Authentication

Technical requirements

Understanding AWS authentication

Signing up for the ReactJS app

Signing in and out of the ReactJS app

Signing up for the Expo and React Native apps

Signing in and out of the Expo and React Native apps

Summary

Chapter 5: Creating a Blog Post with Amplify GraphQL

Technical requirements

Creating a blog post with Mutation for the ReactJS app

Finding a blog post with Query with ReactJS

Getting real-time updates with Subscriptions with ReactJS

Creating a blog post with Mutations for Expo and React Native

Finding a blog post with Query for Expo and React Native

Getting real-time updates with Subscriptions for Expo and React Native

Summary

Chapter 6: Uploading and Sharing Photos with Amplify Storage

Technical requirements

Adding the React Photo Picker UI component and Amplify Storage with ReactJS

Sharing an image with text as a blog post with ReactJS

Listing all the blog posts with real-time updates with ReactJS

Adding the Photo Picker component with Amplify Storage with Expo and React Native

Sharing an image with text as a blog post with React Native and Expo

Listing all the blog posts with real-time updates with React Native and Expo

Summary

Section 3: Production Readiness

Chapter 7: Setting Up an Amplify Pipeline

Technical requirements

Enabling the Amplify DevOps pipeline

Adding the YAML file

Enabling email notifications

Troubleshooting techniques

Triggering the pipeline

Summary

Chapter 8: Test Automation with Cypress

Technical requirements

Setting up Cypress with Cucumber

Understanding the workflow to leverage BDD

Writing executable User Stories in Gherkin

Writing test cases as step definitions with TypeScript

Integrating Cypress with the DevOps pipeline

Summary

Chapter 9: Setting Up a Custom Domain Name and the Amplify Admin UI

Technical requirements

Adding a custom domain name to AWS Route 53

Adding a custom domain name using a third-party DNS provider

Setting up the Amplify Admin UI (beta)

Walking through the Amplify Admin UI

Summary

Why subscribe?

Other Books You May Enjoy

Preface

The worldwide market of public cloud infrastructure is worth roughly around 100 billion US dollars. Do you know who the leading cloud provider is in 2020? AWS is the leading cloud provider, and is powering 33% of the world's cloud infrastructure, which is more than Microsoft Azure and Google Cloud Platform combined. Therefore, it's a no-brainer to choose AWS over other cloud providers for your next project. But you might think moving from traditional bare-metal or virtual machine infrastructure might be a huge learning curve for you, or you might think you will need to invest a lot of money to train up your development team to adopt new technologies. AWS Amplify is coming to the rescue. AWS Amplify is a set of robust toolchains that can bootstrap full-stack cloud-native web and mobile application development. It abstracts the complexity away from setting up the AWS cloud ecosystem, which empowers your development team to build products much quicker than ever before.

AWS Amplify comes with helpful resources, such as ready-to-use UI components, machine learning capabilities, and a user management system, plus enterprise-grade security, scalability, and high availability, which gives you peace of mind in the modern tech world. This book is dedicated to helping you and your team to become very hands-on with AWS Amplify and being able to build modern full stack cloud-native apps with ease. Most well-known companies use AWS technologies without you knowing. You can check out their case studies at the following link:

https://aws.amazon.com/solutions/case-studies/

Prior to starting writing this book, my own business has delivered an enterprise product with AWS Amplify for our client in less than 3 months. So, I realized how AWS Amplify could empower and benefit development teams with its powerful toolchains. The most amazing part is the DevOps pipeline with test automation capabilities, which enable the development team to start shipping the product to the customer's hands in minutes, tested thoroughly by machines automatically instead of waiting for weeks of manual testing. AWS has done an absolutely phenomenal job with Serverless and NoOps (otherwise known as LessOps). You can now implement the latest cloud-native architectures with AWS Amplify easily. Moving your legacy system to the cloud is easier than ever before. Therefore, both production and development teams can spend more time developing new features for the customers instead of fiddling around with DevOps or DevSecOps practices, such as Continuous Deployment, Security, Manual User Acceptance Tests, and deployment. Back in the old days, DevSecOps required a massive team and weeks of preparation for each deployment, and now it's all about scripting with a small team or even a one-man band. If your company has adopted Agile and DevOps in the past or has started looking into adopting Agile and DevOps, you could get a head start with AWS Amplify.

How long do you think you will need to build your next app and publish it as a website or to an app store with AWS Amplify? Months? Weeks? Well, let's find out by going through each chapter of this book. Find a quiet spot and let's get started.

Who this book is for

This book is for developers and tech companies looking to develop cloud-native products rapidly with the AWS ecosystem, especially those who want to adopt cloud-native practices as part of their digital transformation strategy. Web and mobile developers with little to no experience of TypeScript programming will also find this book helpful. Although no prior experience with AWS or TypeScript is required, basic familiarity with modern frameworks such as React and React Native is useful.

What this book covers

Chapter 1, Getting Familiar with the Amplify CLI and Amplify Console, familiarizes you with the Amplify CLI and Amplify Console so you can decide how to set up and configure a new or existing project with AWS Amplify. You will learn how to integrate Amplify with existing projects with the most popular frameworks.

Chapter 2, Creating a React App with AmplifyJS and TypeScript, explains how to create and launch an app with React with TypeScript within no time. You will also create a React app at the same time with some small adjustments.

Chapter 3, Pluggable Amplify UI components, covers how to add pre-built Amplify UI Components to your app, such as a user signup form or a photo picker.

Chapter 4, User Management with Amplify Authentication, explains how to add user management to your app with Amplify Authentication and Amplify UI Components.

Chapter 5, Creating a Blog Post with Amplify GraphQL, covers advanced GraphQL techniques to insert and query data between users and DynamoDB with queries, mutations, and subscriptions.

Chapter 6, Uploading and Sharing Photos with Amplify Storage, explains how to add the photo upload feature to the app with the ready-made React Photo Picker UI component and AWS Amplify Storage, as well as how to list images with a photo album.

Chapter 7, Setting Up an Amplify Pipeline, covers the setup of the DevOps pipeline with Amplify, including adding the YAML config file to the repository, troubleshooting techniques, and different ways to trigger the pipeline.

Chapter 8, Test Automation with Cypress, explains how to set up your project with Cypress and Cucumber, how to write executable User Stories in Gherkin, and how to write test cases as Step Definitions with TypeScript.

Chapter 9, Setting Up a Custom Domain Name and the Amplify Admin UI, shows you how to set up a custom domain name with your Amplify project on the Amplify Console with Route 53 so that you can tell the world about the new photo-sharing app that you have just created.

To get the most out of this book

In order to get most out of this book, you should install the integrated development environment (IDE) that is available with the operating system that you are using:

If you are using the digital version of this book, we advise you to type the code yourself or access the code via the GitHub repository (link available in the next section). Doing so will help you avoid any potential errors related to the copying and pasting of code.

Download the example code files

You can download the example code files for this book from your account at www.packt.com. If you purchased this book elsewhere, you can visit www.packtpub.com/support and register to have the files emailed directly to you.

You can download the code files by following these steps:

Log in or register at www.packt.com.Select the Support tab.Click on Code Downloads.Enter the name of the book in the Search box and follow the onscreen instructions.

Once the file is downloaded, please make sure that you unzip or extract the folder using the latest version of:

7-Zip for WindowsArchive Utility for macOS7-Zip for Linux

The code bundle for the book is also hosted on GitHub at https://github.com/PacktPublishing/Rapid-Application-Development-with-AWS-Amplify. In case there's an update to the code, it will be updated on the existing GitHub repository.

We also have other code bundles from our rich catalog of books and videos available at https://github.com/PacktPublishing/. Check them out!

Download the color images

We also provide a PDF file that has color images of the screenshots/diagrams used in this book. You can download it here: https://static.packt-cdn.com/downloads/9781800207233_ColorImages.pdf.

Conventions used

There are a number of text conventions used throughout this book.

Code in text: Indicates code words in text, database table names, folder names, filenames, file extensions, pathnames, dummy URLs, user input, and Twitter handles. Here is an example: "The next step is to go to the specific project directory and call the amplify add auth command in the terminal in order to set up the Amplify UI Authenticator."

A block of code is set as follows:

    sectionFooterLink: {

        fontSize: 16,

        color: buttonColor,

        alignItems: 'baseline',

        textAlign: 'center',

    },

    sectionFooterLinkDisabled: {

        fontSize: 16,

        color: disabledButtonColor,

        alignItems: 'baseline',

        textAlign: 'center',

    },

Any command-line input or output is written as follows:

yarn add aws-amplify @aws-amplify/ui-react

Bold: Indicates a new term, an important word, or words that you see onscreen. For example, words in menus or dialog boxes appear in the text like this. Here is an example: "Now click the Run on Android emulator button on the browser to check out the Expo app on Android."

Tips or important notes

Appear like this.

Share Your Thoughts

Once you've read Rapid Application Development with AWS Amplify, we'd love to hear your thoughts! Please https://packt.link/r/1-800-20723-9 for this book and share your feedback.

Your review is important to us and the tech community and will help us make sure we're delivering excellent quality content.

Section 1: Getting Ready

In this section, you will learn how to set up a project with the latest and most popular frameworks, such as React, Ionic Angular, and Vue, as well as learn how to deploy a project to a staging environment with an AWS Amplify DevOps pipeline for CI/CD.

In this section, there are the following chapters:

Chapter 1, Getting Familiar with the Amplify CLI and Amplify ConsoleChapter 2, Creating a React App with AmplifyJS and TypeScript

Chapter 1: Getting Familiar with the Amplify CLI and Amplify Console

In order to understand what Amazon Web Services Amplify (AWS Amplify) is and how to use it to create an app successfully, we will need to understand the fundamentals of the AWS Amplify ecosystem and how it connects to each of its own components, such as the AWS Amplify command-line interface (CLI) and the AWS Amplify Console (Amplify Console), to maximize the benefit of using it.

The AWS Amplify CLI is a toolchain that provides a robust set of features to simplify cloud-native mobile development. AWS Amplify is framework-agnostic itself because it supports all the major frameworks out there, such as React, React Native, Angular, Ionic, Vue, and pure JavaScript. Therefore, any team can easily pick it up immediately to integrate it with their existing project or create a new project with AWS Amplify. Since React is one of the most popular frameworks at the moment and TypeScript has become a common language for full-stack developments, we will be using these frameworks to create examples throughout this book.

Amplify Console is not just a cloud admin console—it also allows developers to easily deploy and host their cloud-native full-stack serverless apps. It supports a Git-based workflow, continuous deployment (CD) of the serverless backend and frontend with the DevOps pipeline, end-to-end test automation, globally available web hosting with a content delivery network (CDN), and more. All of these features are only a few clicks away with the easy-to-configure console interface. Amplify Console accelerates the development cycle by streamlining the continuous integration (CI) and CD workflow and abstracts away the complexity of setting up a fully working DevOps pipeline, which enables your development team to focus on development without wasting time fiddling around with infrastructure and pipelines. It empowers your development team with a state-of-the-art workflow and pipeline, helping them to deliver products much more quickly with better quality than ever before.

In this chapter, we're going to learn how to start an AWS Amplify project by familiarizing ourselves with the toolchain, runtime, AWS Amplify CLI, and Amplify Console on the AWS cloud. We will go through each of these in order to be able to set up and configure a new or existing project with AWS Amplify after having read this chapter. We will learn about the possibilities of integrating Amplify with existing projects, working with the most popular frameworks.

We're going to cover the following main topics:

Understanding the AWS Amplify CLIExploring Amplify ConsoleUnderstanding AWS Amplify hostingCreating full-stack serverless web and native apps with AWS Amplify

Technical requirements

Development of Amplify and React apps can be done in all major operating systems (OSes), such as Windows, macOS, and Linux, so you don't need to worry about which OS you should choose. The best OS is the one that you are most familiar with. Therefore, our commands and scripts will be focused on something that could be run across all platforms. First things first—you will need to install a code editor, a JavaScript runtime, and a package manager before you can start to develop React apps. These are the technologies and installations required for creating an AWS Amplify app with React and TypeScript:

Install an open source cross-platform code editor. We would recommend using Visual Studio Code (VS Code) because VS Code and TypeScript are created by Microsoft, so TypeScript support is out of the box. For more information, visit https://code.visualstudio.com/.Alternatively, you could choose Atom, which is another very popular open source and cross-platform code editor out there, but you will need to install the TypeScript plugin yourself after installation. For more information, visit https://atom.io/.In order to download the TypeScript plugin for Atom, you can click the Install button on the following web page after you have installed the Atom editor:

https://atom.io/packages/atom-typescript

Install the open source cross-platform Node.js JavaScript runtime environment:Since Linux, Windows with Windows Subsystem for Linux (WSL 2), and macOS all support Homebrew, we will use Homebrew to install all of our dependencies. For more information, visit https://brew.sh/.Once you have installed Homebrew, you can use the following command to install Node.js:

brew install node

Install an open source and cross-platform package manager for development. We could install it with an installer from the following link:

https://classic.yarnpkg.com/en/docs/install

Alternatively, we could use Homebrew to install Yarn by running the following command:

brew install yarn

Once you have completed all the preceding installation steps, you will then be ready to start developing AWS Amplify apps. Prior experience with TypeScript and React is not required, but you could go through a few tutorials by yourself if you are interested in studying the fundamentals of TypeScript and React. Further details are provided here:

TypeScript documentation: https://www.typescriptlang.org/docs/home.htmlHello World tutorial for TypeScript: https://code.visualstudio.com/docs/typescript/typescript-tutorialTutorial and documentation for React: https://reactjs.org/

All the code and instructions in this book can be found at the following Uniform Resource Locator (URL):

https://github.com/PacktPublishing/Rapid-Application-Development-with-AWS-Amplify/tree/master/ch1

Important note

We will be using both the npm and Yarn package managers to install dependencies, but npm already comes with Node.js, so there is no need to install it separately. The reason behind this is some of the tools such as the Amplify CLI would have issues on Linux if we were to use Yarn but would not have issues with npm, for some reason, so we will use what works across all OSes in this book.

Understanding the AWS Amplify CLI

Before we get started on the Amplify CLI, we might need to create an account on AWS first. To do so, go to https://aws.amazon.com/.

Please note that AWS comes with a Free Tier for beginners, therefore creating your Amplify app for development on AWS should be free at the beginning, as long as our usage is within the Free Tier. Once we have created an AWS account, we can go ahead and install the AWS Amplify CLI with the following command:

yarn global add @aws-amplify/cli

The preceding command will install the CLI globally. The AWS Amplify CLI is a toolchain that aims to simplify your workflow with the AWS ecosystem. You may wonder what is under the hood of the AWS Amplify CLI. Basically, it connects with the AWS ecosystem through the CLI. Every modern app requires features such as authentication, machine learning (ML), a NoSQL database, object storage, analytics, web hosting, a serverless application programming interface (API) gateway, notifications, and so on. AWS Amplify comes with them all. Everything you need to do is just a few commands away.

Here are a few of the most commonly used commands for us to use during development:

The previous table shows the commands of the AWS Amplify CLI and the mentioned categories. The following table outlines each category with its matching AWS products:

As you can see, with its cloud offerings, AWS Amplify simplifies the integration for you by abstracting away the complex setup and wiring between your app and each AWS product—such as generating necessary code behind the scenes—through the Amplify CLI.

If you have an existing project with supported frameworks (such as React, React Native, Angular, Ionic, Vue, or even native iOS and Android apps) that you would like to integrate with AWS Amplify, you could simply call amplify configure and amplify init at any time to set up the project. If you want to initialize a new project with Amplify after the project creation with the supported framework of your choice, all you need to do is call the same commands too. By calling those initiation commands through the Amplify CLI in the terminal, it will connect directly to Amplify Console through the terminal and the web browser under the hood, which will create and configure resources for the developer. Imagine the Amplify CLI as a setup wizard and Amplify Console as the user interface (UI) to create and configure an Amplify project.

We have just learned the basics of the Amplify CLI by following the steps of how to set it up. You might still need to have a better understanding of what you can do with it and how it can power up your next project. We will show you how to connect seamlessly to Amplify Console from the AWS Amplify CLI with a few simple commands next.

Important note

If you want to follow the latest changes to the Amplify CLI or report a bug that you have encountered, add the AWS Amplify CLI repository to your Favorites with the following link:

https://github.com/aws-amplify/amplify-cli/

Exploring Amplify Console

In this section, we will go through Amplify Console in order to learn how to set up an Amplify project properly. Let's enter the amplify configure command in the terminal, as illustrated in the following code snippet, and this will open up the default browser of your machine and take you to the AWS Management Console:

amplify configure

Once you have entered the preceding command, it will open up the browser and ask you to log in to your AWS account, as shown in the following snippet. After you have logged in to your AWS account, return back to the terminal and hit Enter to continue:

Follow these steps to set up access to your AWS account:

Sign in to your AWS administrator account:

https://console.aws.amazon.com/

Press Enter to continue

It will then ask you to select your AWS region by using the up- and down-arrow keys and then hitting Enter to select a region, as follows:

Specify the AWS Region? region: (Use arrow keys)

us-east-1

  us-east-2

  us-west-2

  eu-west-1

  eu-west-2

  eu-central-1

  ap-northeast-1

(Move up and down to reveal more choices)

Type your desired AWS Identity and Access Management (IAM) username or hit Enter with the suggested username, as shown in the following snippet. The prefix with the amplify username will help you identify and remember the specific IAM user on the IAM Management Console, so call it something that's relevant to your project name, such as amplify-project-name:

Specify the AWS Region

? region:  us-east-1

Specify the username of the new IAM user:

? user name: (amplify-XXXXX)

It will open up the browser and take you to the IAM Management Console. The username is pre-filled for you, and it also selects the correct access type for you, which is programmatic access. Programmatic access options allow the CLI to save an encrypted access key ID and an access secret key locally on your development machine. This allows the CLI to have access rights to configure the project for you without entering a password every time. So, leave it as is and hit Next: Permissions to continue, as illustrated in the following screenshot:

Figure 1.1 – Amplify Console: Add user

In order to