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 initialize an app locally. Since we have already created an Amplify project, we can use the app configuration that has already been created.

    a. In the Amplify console, click on Backend environments.

    Front End BackEnd Environments Module 2

    b. In the Backend environment tab, copy the amplify init command to your keyboard.

    Front End BackEnd Environments2 Module 2

    c. Initialize the Amplify project locally with the below commands.

    NOTE: Be sure that the profile you are choosing has been configured using the same region as the Amplify project you already deployed.

    amplify init --appId your-app-id
    
    ? Enter a name for the project: amplifyapp
    ? Enter a name for the environment: dev
    ? Choose your default editor: Visual Studio Code
    ? Choose the type of app that youre 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 want to use an AWS profile? Y
    ? Please choose the profile you want to use: your-aws-profile
    

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.
Sorry to disappoint you
Is something out-of-date, confusing or inaccurate? Please help us improve this tutorial by providing feedback.

Add Authentication