Madhu Kumar for AWS Heroes

Posted on Apr 23, 2023 • Edited on Apr 24, 2023

Building and Launching a Serverless GraphQL React Application with AWS Amplify: A Step-by-Step Guide

Introduction

Serverless computing has been gaining popularity in recent years due to its numerous benefits, such as scalability, cost-effectiveness, and flexibility. AWS Amplify is a development platform that allows developers to build and deploy serverless applications quickly and easily. In this blog post, I will guide you through the process of building and launching a serverless GraphQL React application with AWS Amplify.

Prerequisites

Before getting started, you will need the following:

An AWS account.
Node.js installed on your machine.
Basic knowledge of React and GraphQL.

Step-1: Create a new React app

To get started, let’s create a new React application. Open up your terminal and run the following command:

npx create-react-app my-app

~/Documents/amplify-hackathon  npx create-react-app my-app                                                                                                                                  ✔  10:27:05

Creating a new React app in /Users/macpro/Documents/amplify-hackathon/my-app.

Installing packages. This might take a couple of minutes.
Installing react, react-dom, and react-scripts with cra-template...


added 1423 packages in 43s

235 packages are looking for funding
  run `npm fund` for details

Initialized a git repository.

Installing template dependencies using npm...

added 62 packages, and changed 1 package in 8s

235 packages are looking for funding
  run `npm fund` for details
Removing template package using npm...


removed 1 package, and audited 1485 packages in 3s

235 packages are looking for funding
  run `npm fund` for details

6 high severity vulnerabilities

To address all issues (including breaking changes), run:
  npm audit fix --force

Run `npm audit` for details.

Created git commit.

Success! Created my-app at /Users/macpro/Documents/amplify-hackathon/my-app
Inside that directory, you can run several commands:

  npm start
    Starts the development server.

  npm run build
    Bundles the app into static files for production.

  npm test
    Starts the test runner.

  npm run eject
    Removes this tool and copies build dependencies, configuration files
    and scripts into the app directory. If you do this, you can’t go back!

We suggest that you begin by typing:

  cd my-app
  npm start

Happy hacking!

This will create a new React app in a directory called my-app.

~/Documents/amplify-hackathon/my-app  main !4 ?5  ll                                                                                ✔  11:00:37
total 5136
-rw-r--r--     1 macpro  staff   3.3K 23 Apr 10:27 README.md
drwxr-xr-x     9 macpro  staff   288B 23 Apr 10:35 amplify
drwxr-xr-x  1053 macpro  staff    33K 23 Apr 10:52 node_modules
-rw-r--r--     1 macpro  staff   1.6M 23 Apr 10:53 package-lock.json
-rw-r--r--     1 macpro  staff   867B 23 Apr 10:53 package.json
drwxr-xr-x     8 macpro  staff   256B 23 Apr 10:27 public
drwxr-xr-x    14 macpro  staff   448B 23 Apr 11:00 src

To start our React app we can run from the my-app directory “npm start”.

~/Documents/amplify-hackathon/my-app  main  npm start                                                                                                                   ✔  07:42:12

> my-app@0.1.0 start
> react-scripts start

(node:29873) [DEP_WEBPACK_DEV_SERVER_ON_AFTER_SETUP_MIDDLEWARE] DeprecationWarning: 'onAfterSetupMiddleware' option is deprecated. Please use the 'setupMiddlewares' option.
(Use `node --trace-deprecation ...` to show where the warning was created)
(node:29873) [DEP_WEBPACK_DEV_SERVER_ON_BEFORE_SETUP_MIDDLEWARE] DeprecationWarning: 'onBeforeSetupMiddleware' option is deprecated. Please use the 'setupMiddlewares' option.
Starting the development server...
Compiled successfully!

You can now view my-app in the browser.

  Local:            http://localhost:3000
  On Your Network:  http://192.168.0.87:3000

Note that the development build is not optimized.
To create a production build, use npm run build.

webpack compiled successfully

This will start the development server at http://localhost:3000. Press ctrl+c to stop the server.

Step-2: Install AWS Amplify CLI

Next, we need to install the AWS Amplify CLI. Open up your terminal and run the following command:

npm install -g @aws-amplify/cli

~/Documents/amplify-hackathon/my-app  main !5 ?3  npm install -g @aws-amplify/cli           1 ✘  4s  22:11:35

changed 26 packages in 25s

7 packages are looking for funding
  run `npm fund` for details
npm notice
npm notice New minor version of npm available! 9.4.0 -> 9.6.5
npm notice Changelog: https://github.com/npm/cli/releases/tag/v9.6.5
npm notice Run npm install -g npm@9.6.5 to update!
npm notice

This will install the Amplify CLI globally on your machine or upgrade the old version.

Step 3: Configure Amplify

Now that we have installed the Amplify CLI, let’s configure it. Run the following command in your terminal:

~/Documents/amplify-hackathon/my-app  main  amplify configure            ✔  07:48:51
Follow these steps to set up access to your AWS account:

Sign in to your AWS administrator account:
https://console.aws.amazon.com/
Press Enter to continue

Specify the AWS Region
? region:  us-east-1
Follow the instructions at
https://docs.amplify.aws/cli/start/install/#configure-the-amplify-cli

to complete the user creation in the AWS console
https://console.aws.amazon.com/iamv2/home#/users/create
Press Enter to continue

Enter the access key of the newly created user:
? accessKeyId:  # YOUR_ACCESS_KEY_ID
? secretAccessKey:  # YOUR_SECRET_ACCESS_KEY
This would update/create the AWS Profile in your local machine
? Profile Name:  # (default)

Successfully set up the new user.

This will prompt you to enter your AWS credentials. Follow the prompts to enter your Access Key ID and Secret Access Key.

Step 4: Initialise Amplify

Now that Amplify is configured, let’s initialise it in our React app. Run the following command in your terminal:

amplify init

~/Documents/amplify-hackathon/my-app  main  amplify init                                                                                                                                    ✔  10:28:31

Note: It is recommended to run this command from the root of your app directory
? Enter a name for the project myapp
The following configuration will be applied:

Project information
| Name: myapp
| Environment: dev
| Default editor: Visual Studio Code
| App type: javascript
| Javascript framework: react
| Source Directory Path: src
| Distribution Directory Path: build
| Build Command: npm run-script build
| Start Command: npm run-script start

? Initialize the project with the above configuration? Yes
Using default provider  awscloudformation
? Select the authentication method you want to use: AWS profile

For more information on AWS Profiles, see:
https://docs.aws.amazon.com/cli/latest/userguide/cli-configure-profiles.html

? Please choose the profile you want to use default
Adding backend environment dev to AWS Amplify app: d2fcsc4w0p2um2

# This "input" configures a global authorization rule to enable public access to
Deployment completed.
Deployed root stack myapp [ ======================================== ] 4/4
 amplify-myapp-dev-103057       AWS::CloudFormation::Stack     CREATE_COMPLETE                Sun Apr 23 2023 10:31:34…
 DeploymentBucket               AWS::S3::Bucket                CREATE_COMPLETE                Sun Apr 23 2023 10:31:25…
 AuthRole                       AWS::IAM::Role                 CREATE_COMPLETE                Sun Apr 23 2023 10:31:18…
 UnauthRole                     AWS::IAM::Role                 CREATE_COMPLETE                Sun Apr 23 2023 10:31:19…

✔ Help improve Amplify CLI by sharing non sensitive configurations on failures (y/N) · yes
Deployment state saved successfully.
✔ Initialized provider successfully.
✅ Initialized your environment successfully.

Your project has been successfully initialized and connected to the cloud!

Some next steps:
"amplify status" will show you what you've added already and if it's locally configured or deployed
"amplify add <category>" will allow you to add features like user login or a backend API
"amplify push" will build all your local backend resources and provision it in the cloud
"amplify console" to open the Amplify Console and view your project status
"amplify publish" will build all your local backend and frontend resources (if you have hosting category added) and provision it in the cloud

Pro tip:
Try "amplify add api" to create a backend API and then "amplify push" to deploy everything

This will initialise Amplify in your React app. Follow the prompts to configure Amplify.

Step 5: Add a GraphQL API

With Amplify initialised, we can now add a GraphQL API. Run the following command in your terminal:

amplify add api

~/Documents/amplify-hackathon/my-app  main !1 ?1  amplify add api                                                                                                                    ✔  3m 2s  10:32:13

? Select from one of the below mentioned services: GraphQL
? Here is the GraphQL API that we will create. Select a setting to edit or continue Continue
? Choose a schema template: Single object with fields (e.g., “Todo” with ID, name, description)

⚠️  WARNING: your GraphQL API currently allows public create, read, update, and delete access to all models via an API Key. To configure PRODUCTION-READY authorization rules, review: https://docs.amplify.aws/cli/graphql/authorization-rules

✅ GraphQL schema compiled successfully.

Edit your schema at ~/Documents/amplify-hackathon/my-app/amplify/backend/api/myapp/schema.graphql or place .graphql files in a directory at ~/Documents/amplify-hackathon/my-app/amplify/backend/api/myapp/schema
✔ Do you want to edit the schema now? (Y/n) · no
✅ Successfully added resource myapp locally

✅ Some next steps:
"amplify push" will build all your local backend resources and provision it in the cloud
"amplify publish" will build all your local backend and frontend resources (if you have hosting category added) and provision it in the cloud

This will prompt you to choose a type of API. Select “GraphQL” and follow the prompts to configure your API.

Step 6: Define your GraphQL schema

Now that we have added a GraphQL API to our Amplify project, we need to define the schema. The schema defines the types and operations that can be performed on our API. Open up the amplify/backend/api/myapp/schema.graphql file in your code editor and replace the contents with the following code:

type Todo @model {
  id: ID!
  name: String!
  description: String
  done: Boolean
}

This code defines a new Todo type with fields for id, name, description, and done. The @model directive tells Amplify to create a DynamoDB table and all the required CRUD operations for this type.

Step 7: Deploy your GraphQL API

Now that we have defined our schema, we can deploy our GraphQL API. Enter the following command in your terminal:

amplify push

 ~/Documents/amplify-hackathon/my-app  main !1 ?1  amplify push                                                                                                                         ✔  34s  10:34:53
⠏ Fetching updates to backend environment: dev from the cloud.
⚠️  WARNING: Some types do not have authorization rules configured. That means all create, read, update, and delete operations are denied on these types:
  - Todo
Learn more about "@auth" authorization rules here: https://docs.amplify.aws/cli/graphql/authorization-rules
✅ GraphQL schema compiled successfully.

Edit your schema at /Users/macpro/Documents/amplify-hackathon/my-app/amplify/backend/api/myapp/schema.graphql or place .graphql files in a directory at /Users/macpro/Documents/amplify-hackathon/my-app/amplify/backend/api/myapp/schema
✔ Successfully pulled backend environment dev from the cloud.
⠴ Building resource api/myapp
⚠️  WARNING: Some types do not have authorization rules configured. That means all create, read, update, and delete operations are denied on these types:
  - Todo
Learn more about "@auth" authorization rules here: https://docs.amplify.aws/cli/graphql/authorization-rules
✅ GraphQL schema compiled successfully.

Edit your schema at /Users/macpro/Documents/amplify-hackathon/my-app/amplify/backend/api/myapp/schema.graphql or place .graphql files in a directory at /Users/macpro/Documents/amplify-hackathon/my-app/amplify/backend/api/myapp/schema

    Current Environment: dev

┌──────────┬───────────────┬───────────┬───────────────────┐
│ Category │ Resource name │ Operation │ Provider plugin   │
├──────────┼───────────────┼───────────┼───────────────────┤
│ Api      │ myapp         │ Create    │ awscloudformation │
└──────────┴───────────────┴───────────┴───────────────────┘
✔ Are you sure you want to continue? (Y/n) · yes

⚠️  WARNING: Some types do not have authorization rules configured. That means all create, read, update, and delete operations are denied on these types:
  - Todo
Learn more about "@auth" authorization rules here: https://docs.amplify.aws/cli/graphql/authorization-rules
✅ GraphQL schema compiled successfully.

Edit your schema at /Users/macpro/Documents/amplify-hackathon/my-app/amplify/backend/api/myapp/schema.graphql or place .graphql files in a directory at /Users/macpro/Documents/amplify-hackathon/my-app/amplify/backend/api/myapp/schema
⠴ Building resource api/myapp
⚠️  WARNING: Some types do not have authorization rules configured. That means all create, read, update, and delete operations are denied on these types:
  - Todo
Learn more about "@auth" authorization rules here: https://docs.amplify.aws/cli/graphql/authorization-rules
✅ GraphQL schema compiled successfully.

Edit your schema at /Users/macpro/Documents/amplify-hackathon/my-app/amplify/backend/api/myapp/schema.graphql or place .graphql files in a directory at /Users/macpro/Documents/amplify-hackathon/my-app/amplify/backend/api/myapp/schema
? Do you want to generate code for your newly created GraphQL API Yes
? Choose the code generation language target javascript
? Enter the file name pattern of graphql queries, mutations and subscriptions src/graphql/**/*.js
? Do you want to generate/update all possible GraphQL operations - queries, mutations and subscriptions Yes
? Enter maximum statement depth [increase from default if your schema is deeply nested] 2

Deployment completed.
Deploying root stack myapp [ ---------------------------------------- ] 0/2
 amplify-myapp-dev-103057       AWS::CloudFormation::Stack     UPDATE_IN_PROGRESS             Sun Apr 23 2023 10:36:28…
 apimyapp                       AWS::CloudFormation::Stack     CREATE_IN_PROGRESS             Sun Apr 23 2023 10:36:32…
Deployed api myapp [ ======================================== ] 6/6
import React, { useEffect, useState } from 'react';
 GraphQLAPI                     AWS::AppSync::GraphQLApi       CREATE_COMPLETE                Sun Apr 23 2023 10:36:40…
 GraphQLAPIDefaultApiKey215A6D… AWS::AppSync::ApiKey           CREATE_COMPLETE                Sun Apr 23 2023 10:36:44…
import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

 GraphQLAPINONEDS95A13CF0       AWS::AppSync::DataSource       CREATE_COMPLETE                Sun Apr 23 2023 10:36:44…
 GraphQLAPITransformerSchema3C… AWS::AppSync::GraphQLSchema    CREATE_COMPLETE                Sun Apr 23 2023 10:37:45…
 Todo                           AWS::CloudFormation::Stack     CREATE_COMPLETE                Sun Apr 23 2023 10:38:35…
 CustomResourcesjson            AWS::CloudFormation::Stack     CREATE_COMPLETE                Sun Apr 23 2023 10:38:49…
import React from 'react';

✔ Generated GraphQL operations successfully and saved at src/graphql
Deployment state saved successfully.

GraphQL endpoint: https://lsa4eg44ufffhg3zwrottvemfq.appsync-api.us-east-1.amazonaws.com/graphql
GraphQL API KEY: da2-anzozaxgsrhl7jr3yxam4k3oee

GraphQL transformer version: 2

Follow the prompts to deploy your API. Amplify will create a new DynamoDB table and all the required CRUD operations for our Todo type.

Step 8: Add the AWS AppSync SDK to your app

To interact with our GraphQL API, we need to add the AWS AppSync SDK to our app. Enter the following command in your terminal:

npm install aws-appsync

~/Documents/amplify-hackathon/my-app  main !1 ?3  npm install aws-appsync                                                                                                           ✔  4m 37s  10:39:44

npm WARN deprecated querystring@0.2.0: The querystring API is considered Legacy. new code should use the URLSearchParams API instead.
npm WARN deprecated uuid@3.4.0: Please upgrade  to version 7 or higher.  Older versions may use Math.random() in certain circumstances, which is known to be problematic.  See https://v8.dev/blog/math-random for details.

added 205 packages, and audited 1690 packages in 35s

238 packages are looking for funding
  run `npm fund` for details

6 high severity vulnerabilities

To address all issues (including breaking changes), run:
  npm audit fix --force

Run `npm audit` for details.

Step 9: Configure the AWS AppSync SDK

Now that we have added the AWS AppSync SDK to our app, we need to configure it to work with our API. Create a new file called aws-exports.js in the src folder and add the following code:

const awsmobile = {
  "aws_project_region": "<your-project-region>",
  "aws_appsync_graphqlEndpoint": "<your-api-endpoint>",
  "aws_appsync_region": "<your-api-region>",
  "aws_appsync_authenticationType": "

Now, replace the placeholders (, , and ) with the appropriate values from your Amplify project. You can find these values in the aws-exports.js file in the root of your project directory.

Step 10: Create a component to display a list of todos

Now that we have configured the AWS AppSync SDK, we can create a component to display a list of todos. Create a new file called TodoList.js in the src folder and add the following code:

import React, { useEffect, useState } from 'react';
import { API, graphqlOperation } from 'aws-amplify';

import { listTodos } from './graphql/queries';

function TodoList() {
  const [todos, setTodos] = useState([]);

  useEffect(() => {
    async function fetchTodos() {
      try {
        const todoData = await API.graphql(graphqlOperation(listTodos));
        const todos = todoData.data.listTodos.items;
        setTodos(todos);
      } catch (err) {
        console.log('error fetching todos: ', err);
      }
    }

    fetchTodos();
  }, []);

  return (
    <div>
      <h2>Todos</h2>
      <ul>
        {todos.map(todo => (
          <li key={todo.id}>
            <strong>{todo.name}</strong>: {todo.description}
          </li>
        ))}
      </ul>
    </div>
  );
}

export default TodoList;

This code defines a new component called TodoList that fetches a list of todos from our GraphQL API and displays them in an unordered list.

Step 11: Add the TodoList component to your app

Now that we have created the TodoList component, we can add it to our app. Open up the App.js file in your code editor and replace the contents with the following code:

import React from 'react';
import './App.css';

import TodoList from './TodoList';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <h1>My Todo App</h1>
      </header>
      <main>
        <TodoList />
      </main>
    </div>
  );
}

export default App;

_This code imports the TodoList component and adds it to our app.-

Step 12: Launch your app

Now that we have added the TodoList component to our app, we can launch it. Enter the following command in your terminal:

npm start

~/Documents/amplify-hackathon/my-app/src  main !4 ?6  npm start                                                                                                                        ✔  11s  10:53:26

> my-app@0.1.0 start
> react-scripts start

(node:45156) [DEP_WEBPACK_DEV_SERVER_ON_AFTER_SETUP_MIDDLEWARE] DeprecationWarning: 'onAfterSetupMiddleware' option is deprecated. Please use the 'setupMiddlewares' option.
(Use `node --trace-deprecation ...` to show where the warning was created)
(node:45156) [DEP_WEBPACK_DEV_SERVER_ON_BEFORE_SETUP_MIDDLEWARE] DeprecationWarning: 'onBeforeSetupMiddleware' option is deprecated. Please use the 'setupMiddlewares' option.
Starting the development server...
Compiled successfully!

You can now view my-app in the browser.

  Local:            http://localhost:3000
  On Your Network:  http://192.168.0.87:3000

Note that the development build is not optimized.
To create a production build, use npm run build.

webpack compiled successfullyThis will start the development server and open your app in your default browser. You should see a list of todos displayed on the screen.

With this app as a starting point with no functionality, you can add new features and functionality to create a powerful and scalable application.

ERROR:

If you face the error below Module not found: Error: Can’t resolve ‘aws-amplify’, install this module.

 ~/Documents/amplify-hackathon/my-app  main !4 ?5  npm start                                                                                                                             ✔  4s  10:45:33

> my-app@0.1.0 start
> react-scripts start

(node:44800) [DEP_WEBPACK_DEV_SERVER_ON_AFTER_SETUP_MIDDLEWARE] DeprecationWarning: 'onAfterSetupMiddleware' option is deprecated. Please use the 'setupMiddlewares' option.
(Use `node --trace-deprecation ...` to show where the warning was created)
(node:44800) [DEP_WEBPACK_DEV_SERVER_ON_BEFORE_SETUP_MIDDLEWARE] DeprecationWarning: 'onBeforeSetupMiddleware' option is deprecated. Please use the 'setupMiddlewares' option.
Starting the development server...
import React, { useEffect, useState } from 'react';
Failed to compile.

Module not found: Error: Can't resolve 'aws-amplify' in '/Users/macpro/Documents/amplify-hackathon/my-app/src'
ERROR in ./src/TodoList.js 6:0-52
Module not found: Error: Can't resolve 'aws-amplify' in '/Users/macpro/Documents/amplify-hackathon/my-app/src'

webpack compiled with 1 error

To fix the above error, we need to install aws-amplify module by running this command “npm install aws-amplify”

~/Documents/amplify-hackathon/my-app/src  main !4 ?6  npm install aws-amplify                                                                                                               ✔  10:51:00

npm WARN deprecated source-map-url@0.4.1: See https://github.com/lydell/source-map-url#deprecated
npm WARN deprecated urix@0.1.0: Please see https://github.com/lydell/urix#deprecated
npm WARN deprecated resolve-url@0.2.1: https://github.com/lydell/resolve-url#deprecated
npm WARN deprecated source-map-resolve@0.5.3: See https://github.com/lydell/source-map-resolve#deprecated
npm WARN deprecated uuid@3.4.0: Please upgrade  to version 7 or higher.  Older versions may use Math.random() in certain circumstances, which is known to be problematic.  See https://v8.dev/blog/math-random for details.
npm WARN deprecated uuid@3.4.0: Please upgrade  to version 7 or higher.  Older versions may use Math.random() in certain circumstances, which is known to be problematic.  See https://v8.dev/blog/math-random for details.
import React, { useEffect, useState } from 'react';
npm WARN deprecated uuid@3.4.0: Please upgrade  to version 7 or higher.  Older versions may use Math.random() in certain circumstances, which is known to be problematic.  See https://v8.dev/blog/math-random for details.
npm WARN deprecated uuid@3.4.0: Please upgrade  to version 7 or higher.  Older versions may use Math.random() in certain circumstances, which is known to be problematic.  See https://v8.dev/blog/math-random for details.
npm WARN deprecated uuid@3.4.0: Please upgrade  to version 7 or higher.  Older versions may use Math.random() in certain circumstances, which is known to be problematic.  See https://v8.dev/blog/math-random for details.
npm WARN deprecated uuid@3.4.0: Please upgrade  to version 7 or higher.  Older versions may use Math.random() in certain circumstances, which is known to be problematic.  See https://v8.dev/blog/math-random for details.
npm WARN deprecated uuid@3.4.0: Please upgrade  to version 7 or higher.  Older versions may use Math.random() in certain circumstances, which is known to be problematic.  See https://v8.dev/blog/math-random for details.
npm WARN deprecated uuid@3.4.0: Please upgrade  to version 7 or higher.  Older versions may use Math.random() in certain circumstances, which is known to be problematic.  See https://v8.dev/blog/math-random for details.
npm WARN deprecated uuid@3.4.0: Please upgrade  to version 7 or higher.  Older versions may use Math.random() in certain circumstances, which is known to be problematic.  See https://v8.dev/blog/math-random for details.
npm WARN deprecated uuid@3.4.0: Please upgrade  to version 7 or higher.  Older versions may use Math.random() in certain circumstances, which is known to be problematic.  See https://v8.dev/blog/math-random for details.
npm WARN deprecated uuid@3.4.0: Please upgrade  to version 7 or higher.  Older versions may use Math.random() in certain circumstances, which is known to be problematic.  See https://v8.dev/blog/math-random for details.
npm WARN deprecated uuid@3.4.0: Please upgrade  to version 7 or higher.  Older versions may use Math.random() in certain circumstances, which is known to be problematic.  See https://v8.dev/blog/math-random for details.
npm WARN deprecated uuid@3.4.0: Please upgrade  to version 7 or higher.  Older versions may use Math.random() in certain circumstances, which is known to be problematic.  See https://v8.dev/blog/math-random for details.
npm WARN deprecated uuid@3.4.0: Please upgrade  to version 7 or higher.  Older versions may use Math.random() in certain circumstances, which is known to be problematic.  See https://v8.dev/blog/math-random for details.
npm WARN deprecated uuid@3.4.0: Please upgrade  to version 7 or higher.  Older versions may use Math.random() in certain circumstances, which is known to be problematic.  See https://v8.dev/blog/math-random for details.
npm WARN deprecated uuid@3.4.0: Please upgrade  to version 7 or higher.  Older versions may use Math.random() in certain circumstances, which is known to be problematic.  See https://v8.dev/blog/math-random for details.
npm WARN deprecated uuid@3.4.0: Please upgrade  to version 7 or higher.  Older versions may use Math.random() in certain circumstances, which is known to be problematic.  See https://v8.dev/blog/math-random for details.
npm WARN deprecated uuid@3.4.0: Please upgrade  to version 7 or higher.  Older versions may use Math.random() in certain circumstances, which is known to be problematic.  See https://v8.dev/blog/math-random for details.
npm WARN deprecated uglify-es@3.3.9: support for ECMAScript is superseded by `uglify-js` as of v3.13.0

added 1871 packages, and audited 3561 packages in 1m

251 packages are looking for funding
  run `npm fund` for details

6 high severity vulnerabilities

To address all issues (including breaking changes), run:
  npm audit fix --force

Run `npm audit` for details.

Step 13: Clean-up

Within the project directory that you want to delete, run the following amplify delete command:

For locally accessible projects
Within the project directory that you want to delete, run the following amplify delete command:

amplify delete

For cloud-based projects

Pull the backend environment associated with your application to your local environment by running the following amplify pull command:

amplify pull

Within the project directory that you want to delete, run the following amplify delete command:

amplify delete

Output:

~/Documents/amplify-hackathon/my-app  main !5 ?5  amplify delete                                                                                                                  ✔  5s  11:55:13
✔ Are you sure you want to continue? This CANNOT be undone. (This will delete all the environments of the project from the cloud and wipe out all the local files created by Amplify CLI) (y/N) · yes
⠋ Deleting resources from the cloud. This will take a few minutes.
Deleting env: dev.
✔ Project deleted in the cloud.
✅ Project deleted locally.

Conclusion

Through this tutorial, I have demonstrated how easy it can be to build a serverless application using AWS Amplify, which is very basic and has no functionality. I encourage you to continue exploring the many features and capabilities of Amplify and to use it to build your own amazing serverless applications.

If you want to build real-time multi-user experiences using GraphQL on AWS Amplify - https://aws.amazon.com/blogs/mobile/build-real-time-multi-user-experiences-using-graphql-on-aws-amplify

If you want to build AWS AppSync GraphQL Photo Sample application - https://github.com/aws-samples/aws-amplify-graphql

DEV Community