Task 2: Initialize a Local Amplify App - Build a Full Stack React Application
OverviewWhat you will accomplishImplementationConclusion

Task 2: Initialize a Local Amplify App

Time to complete

10 minutes

Requires

A text editor. Here are a few free ones:

Get help

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

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

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

    The configuration settings interface.

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.

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

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

  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
});
    Interface element requiring manual review.

  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.

    Interface element requiring manual review.

  4. Verify JSON file was added

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

    Interface element requiring manual review.

Conclusion

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