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
Top comments (0)