Getting Started with AWS

Build a Full-Stack React Application

Create a simple web application using AWS Amplify

Module 2: Initialize a Local Amplify App

In this module you will install and configure the Amplify CLI.

Introduction

Now that we have initialized a new Amplify project in our account, we want to bring it down into our local environment so we can continue development and add new features.

In this module you will install the Amplify CLI and initialize the Amplify project using the CLI.

What You Will Learn

  • Install and configure the Amplify CLI
  • Initialize the Amplify app

Key Concepts

Amplify CLI – The Amplify CLI allows you to create, manage, and remove AWS services directly from your terminal.

 Time to Complete

5 minutes

 Services Used

Implementation

  • Install the Amplify CLI

    The Amplify Command Line Interface (CLI) is a unified toolchain to create AWS cloud services for your app, following a simple guided workflow. Let’s go ahead and install the Amplify CLI using the Command Prompt (Windows) or the Terminal (macOS). NOTE: this command can be run in any directory in your Command Prompt/Terminal as the “-g” indicates the binary will be installed globally on your system.

    npm install -g @aws-amplify/cli
  • Configure the Amplify CLI

    Amazon IAM (Identity and Access Management) enables you to manage users and user permissions in AWS. The CLI uses IAM to create and manage services programmatically on your behalf via the CLI.

    To configure the CLI, run the configure command. To see a video walkthrough of the CLI configuration process, click here.

    amplify configure
  • Initialize the Amplify app

    Next, we will deploy a back end and initialize the backend environment locally.

    a. In the Amplify console, click on Backend environments and click on click on Get started. Wait for the back end to be deployed.

    react-app-module-two-1

    b. In the Backend environment tab, click on Open admin UI

    react-app-module-two-2

    c. Go back to the Amplify Console Backend environments tab and open the Local setup instructions. Copy the command to your clipboard and open the terminal on your computer.

    react-app-module-two-3

    d. Paste the command into your terminal and follow the setup instructions.

    ? Choose your default editor: Visual Studio Code
    ? Choose the type of app that you're building javascript
    ? What javascript framework are you using react
    ? Source Directory Path:  src 
    ? Distribution Directory Path: build
    ? Build Command:  npm run-script build
    ? Start Command: npm run-script start
    ? Do you plan on modifying this backend? Y
    

Conclusion

You have initialized the Amplify project and are now ready to start adding features! We'll add an entire user authentication flow with just a few lines of code in the next module.

To view your Amplify project in the dashboard at any time you can now run the following command:

amplify console

Was this module helpful?

Thank you
Please let us know what you liked.
Close
Sorry to disappoint you
Is something out-of-date, confusing or inaccurate? Please help us improve this tutorial by providing feedback.
Close

Add Authentication