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.html
• Hello World tutorial for TypeScript: https://code.visualstudio.com/docs/typescript/typescript-tutorial
• Tutorial 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.

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/