Rapid Application Development with AWS Amplify

Adrian Leung

• Publisher: Packt Publishing
• Year: 2021
• ISBN:
  9781800201446
• Edition: 1
• Topic: Computer Science
• Subtopic: Web Programming
• Index: Computer Science

Get to grips with the AWS Amplify framework and use it to build scalable cloud-native progressive web apps with React and cross-platform mobile apps with React Native in TypeScriptKey Features• Explore the capabilities of AWS Amplify with popular app frameworks for both web and mobile app platforms• Build your first cloud-native web and mobile applications using AWS Amplify• Leverage AWS Amplify to design GraphQL APIs for your web and mobile applicationsBook DescriptionAWS 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.What you will learn• Build React and React Native apps with Amplify and TypeScript• Explore pre-built Amplify UI components for rapid prototyping• Add user management with Amplify authentication to your app• Use Amplify GraphQL to create a blog post• Discover how to upload photos to Amplify Storage• Enable DevOps with the Amplify pipeline for your app• Get to grips with BDD and test automation with Cypress and Cucumber• Set up a custom domain name for your website and manage app content with the Amplify Admin UIWho this book is forThis book is for developers and tech companies looking to develop cloud-native products rapidly with the AWS ecosystem. Web and mobile developers with little-to-no experience in 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.

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 Console
• Chapter 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 CLI
• Exploring Amplify Console
• Understanding AWS Amplify hosting
• Creating 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 envir...