Select your cookie preferences

We use essential cookies and similar tools that are necessary to provide our site and services. We use performance cookies to collect anonymous statistics, so we can understand how customers use our site and make improvements. Essential cookies cannot be deactivated, but you can choose “Customize” or “Decline” to decline performance cookies.

If you agree, AWS and approved third parties will also use cookies to provide useful site features, remember your preferences, and display relevant content, including relevant advertising. To accept or decline all non-essential cookies, choose “Accept” or “Decline.” To make more detailed choices, choose “Customize.”

Skip to main content
Build a Full-Stack React Application

Task 2: Initialize a Local Amplify App

Introduction

Overview

Now that you have a React web app, 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.  

What you will accomplish

  • Set up Amplify Auth
  • Set up Amplify Data
  • Set up Amplify Storage

Implementation

10 minutes

A text editor. Here are a few free ones:

Set up Amplify Auth

The app uses email as the default login mechanism. When the users sign up, they receive a verification email.

1. Set auth resource

By default, your auth resource is configured as shown inside the notesapp/amplify/auth/resource.ts file. For this tutorial, keep the default auth set up as is.

Missing alt text value

Set up Amplify Data

The app you will be building is a Notes app that will allow users to create, delete, and list notes. This example app will help you learn how to build many popular types of CRUD+L (create, read, update, delete, and list) applications.

1. Update authorization rule

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

  • The following updated code uses a per-owner authorization rule allow.owner() to restrict the note record’s access to the owner of the record. 

  • Amplify will automatically add an owner: a.string() field to each note which contains the note owner's identity information upon record creation.

 

import { type ClientSchema, a, defineData } from '@aws-amplify/backend';
const schema = a.schema({  
Note: a
    .model({
      name:a.string(),
      description: a.string(),
      image: a.string(),
    })
    .authorization((allow) => [allow.owner()]),
});
export type Schema = ClientSchema<typeof schema>;
export const data = defineData({
  schema,
  authorizationModes: {
    defaultAuthorizationMode: 'userPool',
  },
});
File directory view of a project named "notesapp," with the "resource.ts" file under the "data" folder highlighted in red.

Set up Amplify Storage

1. Create a storage folder

On your local machine, navigate to the notesapp/amplify folder, and create a new folder named storage, and then create a file named resource.ts inside of the new storage folder.

File directory structure of a "notesapp" project, with the "storage" folder and its "resource.ts" file highlighted in red.

2. Configure a storage resource for your app

Update the amplify/storage/resource.ts file with the following code to configure a storage resource for your app. Then, save the file.

  • The updated code will set up the access so that only the person who uploads the image can access. The code will use the entity_id as a reserved token that will be replaced with the users' identifier when the file is being uploaded. 

import { defineStorage } from "@aws-amplify/backend";export const storage = defineStorage({  name: "amplifyNotesDrive",  access: (allow) => ({    "media/{entity_id}/*": [      allow.entity("identity").to(["read", "write", "delete"]),    ],  }),});

Deploy Amplify Cloud sandbox

1. Import backend definitions

On your local machine, navigate to the amplify/backend.ts file, and update it with the following code. Then, save the file.

  • The following code will import the auth, data, and storage backend definitions:

     

import { defineBackend } from '@aws-amplify/backend';
import { auth } from './auth/resource';
import { data } from './data/resource';
import { storage } from './storage/resource';
/**
 * @see https://docs.amplify.aws/react/build-a-backend/ to add storage, functions, and more
 */
defineBackend({
  auth,
  data,
  storage
});
Missing alt text value

2. Start sandbox environment

To start your own personal cloud sandbox environment that provides an isolated development space, in a new terminal window, run the following command in your apps root folder:

npx ampx sandbox
  • The sandbox allows you to rapidly build, test, and iterate on a fullstack app. Each developer on your team can use their own disposable sandbox environment connected to cloud resources. You can learn more about it here.

3. Confirm deployment

Once the cloud sandbox has been fully deployed, your terminal will display a confirmation message.

Missing alt text value

3. Verify JSON file was added

The amplify_outputs.json file will be generated and added to your project. 

Missing alt text value

Conclusion

You used Amplify to configure auth, data, and storage resources. You also started your own cloud sandbox environment.