Skip to main content

Getting Started Resource Center

Deploy a Web App on AWS Amplify

Task 2: Initialize the Amplify Backend

In this task, you will use AWS Amplify to provision a cloud backend for the app.

Introduction

Overview

In this task you will use AWS Amplify to configure a cloud backend for the app. AWS Amplify Gen 2 uses a fullstack TypeScript developer experience (DX) for defining backends. Amplify offers a unified developer experience with hosting, backend, and UI-building capabilities and a code-first approach. 

The app that you build in this tutorial is an expense tracker app that will allow users to create, delete, and list expenses. This example app is a starting point to learn how to build many popular types of CRUD+L (create, read, update, delete, and list) applications.

What you will accomplish

In this task, you will:

  • Set up Amplify Authentication

  • Set up Amplify Data

Implementation

10 minutes

Troubleshooting Amplify

Set up Amplify Auth

The app uses email as the default login mechanism. When the users sign up, they receive a verification email. In this step, you will customize the verification email.

1. Update the resource file

On your local machine, navigate to the amplify/auth/resource.ts file, and use the following code to customize the verification email. Then, save the file.

Screenshot showing the file structure of an AWS Amplify project named 'expensetracker', highlighting the 'resource.ts' file inside the 'amplify/auth' directory. This image is used to illustrate how to locate and update the authentication resource file during a web app deployment tutorial with AWS Amplify.

Email verification customization code

Use this code to customize the verification email

typescript 
import { defineAuth } from "@aws-amplify/backend";

export const auth = defineAuth({
  loginWith: {
    email: {
      verificationEmailStyle: "CODE",
      verificationEmailSubject: "Welcome to the ExpenseTracker!",
      verificationEmailBody: (createCode) =>
        `Use this code to confirm your account: ${createCode()}`,
    },
  },
});

2. View the customized email

This image shows an example of the customized verification email.

Screenshot of a verification email with the subject 'Welcome to the ExpenseTracker!' and a confirmation code, used in the AWS Amplify deploy web app getting started tutorial.

Set up Amplify Data

In this step, you will define the schema for the Expense data model, and use a per-owner authorization rule allow.owner() to restrict the expense record’s access to the owner of the record. Amplify will automatically add a owner: a.string() field to each expense which contains the expense owner's identity information upon record creation.

1. Update the resource file

On your local machine, navigate to the amplify/data/resource.ts file, and update the file with the following code to define the schema. Then, save the file.

Screenshot showing the folder structure for the 'expensetracker' project, highlighting the update of the 'resource.ts' file in the 'data' directory as part of an AWS Amplify web app tutorial.

Schema definition code

Use this code to define the schema

typescript 
import { type ClientSchema, a, defineData } from '@aws-amplify/backend';

const schema = a.schema({
  Expense: a
    .model({
      name:a.string(),
      amount: a.float(),
    })
    .authorization((allow) => [allow.owner()]),
});

export type Schema = ClientSchema<typeof schema>;

export const data = defineData({
  schema,
  authorizationModes: {
    defaultAuthorizationMode: 'userPool',
  },
});

Deploy Amplify Cloud sandbox

Note: The amplify/backend.ts file is already configured to import the auth and data backend definitions. You don’t need to change it.

1. Deploy sandbox

Open a new terminal window, navigate to your app's root folder (expensetracker), and run the following command to deploy cloud resources into an isolated development space so you can iterate fast.

npx ampx sandbox
Screenshot of a terminal showing the 'npx ampx sandbox' command and options for starting sandbox mode for Amplify backend deployments. The image is part of an AWS Amplify tutorial for deploying web apps using sandbox environments.

2. View confirmation message

After the cloud sandbox has been fully deployed, your terminal will display a confirmation message. This deployment will take several minutes to complete.

Screenshot of a Mac terminal showing AWS Amplify profiles app configuration, CloudFormation stack ARN output, and sandbox deployment status. The console displays environment variables and completion messages for deploying an Amplify app using Node.js and AWS services.

3. Verify output file

Verify that the amplify_outputs.json file was generated and added to your project.

Screenshot showing the file structure of an 'expensetracker' web app project, with the 'amplify_outputs.json' file highlighted in the amplify folder. This image is used in an AWS Amplify deployment tutorial to illustrate where the outputs file is located within a typical project directory.

Conclusion

In this task, you used Amplify to configure auth and data resources. You also started your own cloud sandbox environment. In the next module, you will connect your app's frontend to your backend and build app features.

Build the Frontend

Start Task Three