Build a Full-Stack React Application

TUTORIAL

Introduction
Deploy and Host React App
Initialize local app
Add authentication
Clean up Resources

Task 2: Initialize a Local Amplify App

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

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

 Time to complete

10 minutes

 Requires

 Get help

Troubleshooting Amplify

How Amplify works

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

    1. 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.

  • 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. 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',
  },
});

  • 1. 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.

    2. 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"]),
    ],
  }),
});

  • 1. 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
});

    2. 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. Once the cloud sandbox has been fully deployed, your terminal will display a confirmation message and the amplify_outputs.json file will be generated and added to your project. 

Conclusion

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

Start Task Three

Add Authentication

Was this page helpful?

 Feedback