Amplify AWS: Serverless Backends Using Angular, React, or Vue

Serverless functions and architectures are becoming increasingly popular. Some of the largest organizations around, including Netflix and Reuters, have already implemented serverless. Every major cloud provider has functionality for them, from AWS to Oracle.

As serverless grows in popularity, tools for helping you create apps using these functions are increasingly available. AWS Amplify is one such tool. This article provides an overview of what Amplify is, as well as a brief tutorial on how to deploy a serverless function using React and Amplify.

What Is Amplify?

Amplify is a free framework for building scalable mobile and web apps using a serverless backend. A serverless backend is an infrastructure used to host serverless applications. Serverless applications are apps based on event driven functions that use client-side logic with external services. These applications use API calls to invoke functions from client applications, other functions, or cloud services.

Amplify includes a library of functions and utilities, a toolchain, ready to use UI components, and a Command Line Interface (CLI). It is designed to allow developers to focus on front-end rather than back-end development. This framework is most useful if you want to create simple applications with few dependencies. It is provided as an alternative to AWS Serverless Framework and Serverless Application Model (SAM).

The Amplify framework includes features for:

• Real-time data retrieval and storage — via AWS AppSync and a REST or GraphQL API. APIs query databases stored in EBS volumes.
• Authentication — via Amazon Cognito. Enables users to sign up/in to app with name, email, and phone number.
• Real-time analytics — includes session data, in-app metrics, and authentication data.
• Chatbots — via Amazon Lex chatbot. Only available with Vue.
• AR and VR — incorporates Amazon Sumerian scenes for 3D user experience.

Amplify supports use of React/React Native, Angular, Ionic, and Vue.

Create and Deploy a Serverless Function in React Using Amplify

This tutorial will show you how to create a serverless function that calls to another API. You can invoke a function like this from an HTTP endpoint, from the AWS SDK, or from a cloud service event. In this tutorial the function is invoked by HTTP. This tutorial is abbreviated from a more in-depth tutorial by Nadir Dabit.

Create a Client Application
You’ll use this application to make requests to your serverless application. You can use Create React App to quickly create a single-page application for this purpose.

Install and Configure the Amplify CLI
To get started, you need to install and configure the Amplify CLI.

npm install -g @aws-amplify/cli
amplify configure

Initialize a New Project
Next, you need to connect your app at an AWS backend. This step needs to be performed at the beginning of each project.

amplify init

Create your Lambda Function
You need to create your function and provision resources for its use.

amplify add api

? Please select from one of the below mentioned services REST
? Provide a friendly name for your resource to be used as a label for this category in the project shibaapi
? Provide a path (e.g., /items) /pictures
? Choose a Lambda source ❯ Create a new Lambda function
? Provide a friendly name for your resource to be used as a label for this category in the project: shibafunction
? Provide the AWS Lambda function name: shibafunction
? Choose the function template that you want to use: Serverless express function
? Do you want to edit the local lambda function now? n
? Restrict API access n
? Do you want to add another path? n

Create your Resources
This step deploys your function but won’t yet call the Shiba API. You first need to modify your function to call the API.

amplify push

Verify Requests are Forwarded Correctly
You can do this by either directly working with the function or with the serverless express framework. You can see the base code for your function by accessing: “amplify/backend/function/shibafunction/src/index.js”.

To use serverless express, use the following code:

// amplify/backend/function/shibafunction/src/index.js

const awsServerlessExpress = require('aws-serverless-express');
const app = require('./app');

const server = awsServerlessExpress.createServer(app);

exports.handler = (event, context) => {
console.log(EVENT: ${JSON.stringify(event)});
awsServerlessExpress.proxy(server, event, context);
);

Customize the Function

First, you need to install axios so you can make HTTP requests. Axios is a promise based HTTP client, meaning it allows you to make and account for asynchronous requests.

//amplify/backend/function/shibafunction/src

yarn add axios

# or

npm install axios

Next, you need to update the function to call the API.

Finally, you need to update the backend with amplify push. You need to perform this step after making any changes to the function.

Invoke the Endpoint in Your Client App
You need to call the function in your client app once the function is ready. Once you’re done, be sure to test your code.

Conclusion

Serverless functions might not replace traditional applications. However, these functions are incredibly useful for creating simple applications. The relative ease and speed with which serverless applications can be created and deployed is a huge draw for many developers and organizations.

Hopefully, after reading this article you feel better prepared to create serverless applications of your own. If you’re not already an AWS cloud subscriber, you can still try this tutorial out using their free tiers.