Webiny Docs home page
Can I Use This?

This feature has been available since Webiny v5.40.0 and is available in Business & Enterprise tier.

What you will learn
  • how to use Amplify UI in a React app to build a sign-up and login form
  • how to build a notes React application where users can create, read, and delete notes after signing up

Building a Notes App in React With AWS Amplify UI
anchor

Great, we’re all set on the Webiny side. Now, let’s move on to building the Notes App in React using the AWS Amplify UI Authenticatorexternal link.

Demo Application Preview
anchor

Here’s a preview of the React application we’ll be building.

The code covered in this tutorial is also available in our GitHub examples repositoryexternal link.

Setup and Configuration
anchor

  1. Create a new React app: If you haven’t already, start by creating a new React app by running npx create-react-app my-notes-app.

  2. Install dependencies: Navigate to your project directory with cd my-notes-app command` and install AWS Amplify and Apollo client libraries.

  3. Amplify Configuration: Configure Amplify with your AWS account details. Create an aws-config.js file in your src directory with the following configuration, replacing the placeholders with your actual AWS settings.

You can find these config values from this step.

If you lost these values, don’t worry. You can also retrieve them from the your-webiny-project-root/.pulumi/apps/core/.pulumi/stacks/core/dev.json file within your Webiny project.

Since we’ve deployed the dev environment for the demo, we’re seeing the dev.json file. If you’ve deployed your project in a different environment, you’ll find a file named after your environment, such as your-env-name.json stack file.

Please note these config values will have a different name in your stack file (e.g. in dev.json file) in Webiny project.

  • aws_cognito_region is notesAppUserPoolRegion
  • aws_user_pools_id is notesAppUserPoolId
  • aws_user_pools_web_client_id is notesAppUserPoolClient
  • aws_project_region is region
aws-config.js
  1. Initialize Amplify: In your index.js, import and configure Amplify.
index.js

Styling
anchor

Utilize the provided App.css file for styling your application. It includes styles for headers, notes listings, and animations. Update your App.css file with the following content.

App.css

Authentication - Sign Up and Sign in Setup
anchor

  1. Set Up Authentication:

    • We will use the Authenticator component from @aws-amplify/ui-react to manage the sign-in and sign-up processes.
    • We will also customize the authentication forms by defining formFields and signUpAttributes.

  2. Sign Up and Sign In:

    • By integrating the Authenticator component, users can sign up using their email, first name, and last name. AWS Amplify will manage the entire authentication workflow, including email verification.

Now, make the following changes to the App.js file.

App.js

The sign-up and login forms are now ready. To test them, start your React app by running the npm start command.

GraphQL Setup: List Notes Query and Create & Delete Notes Mutations
anchor

We’ll be implementing the following Notes functionality:

  1. Add Notes
  2. Fetch Notes
  3. Delete Notes

Since we’ll be interacting with the Webiny CMS GraphQL API, we’ve already installed the Apollo Client package during the React project setup.

To get started, let’s create the GraphQL client, queries, and mutations for handling Notes operations.

First, create a graphql directory in the src folder, and then add a client.js file inside it.

The uri mentioned below is the Manage API URL for the Headless CMS. For more details on how to obtain the Manage API URL, refer to this guide.

src/graphql/client.js

Next, let’s create a listNotes query to fetch all the notes.

To do this, add a queries.js file in the graphql directory.

graphql/queries.js

Now, let’s add two mutations: one for creating notes and another for deleting them.

Create a mutations.js file in the graphql directory to define these mutations.

graphql/mutations.js

Create Notes UI and Integrate GraphQL Queries & Mutations
anchor

Next, we’ll update the App.js file to build the interface for creating, listing, and deleting notes. We’ll also integrate the GraphQL queries and mutations we created earlier.

Replace the content of your App.js file with the following code snippet.

App.js

Testing the Application
anchor

We’re all set! Run the React app with the npm start command, and try signing up and logging in. You can also play with creating, viewing, and deleting notes.