DEV Community

Cover image for The guide to connect AWS Amplify to any (AWS) service
rpostulart for AWS Community Builders

Posted on • Edited on

The guide to connect AWS Amplify to any (AWS) service

AWS Amplify

AWS Amplify is a framework that acts as a glue between every front end application and the backend deployed by Amplify on AWS.

You can use Javascript for setting up your API's, storage, authentication and authorisation, databases, storage, AI and more. In all my blogs I make extensive use of the services that Amplify is providing.

What if you need to connect to another AWS service?

The Amplify team is doing an outstanding job and AWS is releasing so many new features every day that it is impossible for the Amplify team to make these features available in the Amplify framework.

Where Amplify is the glue between front end and back end, there is Lambda the glue between AWS Amplify and every other service available on the AWS Cloud. So if a service is not provided by the AWS Amplify team then you can make use of Lambda (function) provided by the Amplify framework.

AWS SDK

A SDK is a kind of library with objects that you can use in your application without the difficulty to set it up yourself. You can download this SDK as a package and deploy it with your application

AWS SDK for JavaScript: A complete overview of all AWS services available in the AWS SDK

In this example we add a function to our Amplify set up with nodeJS as runtime, deploy the SDK with it and connect to any AWS service.

Getting Started

Set up AWS Amplify

We first need to have the AWS Amplify CLI installed. The Amplify CLI is a command line tool that allows you to create & deploy various AWS services.

To install the CLI, we'll run the following command:

$ npm install -g @aws-amplify/cli

Next, we'll configure the CLI with a user from our AWS account:

$ amplify configure

For a video walkthrough of the process of configuring the CLI, click

Add function

In the root directory type

$ amplify add function 

Follow these steps:

* Provide a friendly name for your resource to be used as a label for this category in the project: **lambdafunction**
* Provide the AWS Lambda function name: **<press enter>**
* Choose the function runtime that you want to use: **NodeJS**
* Choose the function template that you want to use: **Hello world function**
* Do you want to access other resources created in this project from your Lambda function? **N**
* Do you want to invoke this function on a recurring schedule? **N**
* Do you want to edit the local lambda function now? **N**

Your Function is created now and you can find it in your project directory:

Amplify > backend > function > name of your function

Go to the src directory of the function and run

npm install aws-sdk 

Open the index.js file and paste this code. In this example we will make a Pinpoint application. This is an example, but with new AWS.(here you can add any service). For example new AWS.SNS() for Simple Notification Service.

On the link above there are enough examples how to connect to the features of a service.

const AWS = require("aws-sdk");
AWS.config.region = "eu-west-1"; // fill in your right region ******
const pinpoint = new AWS.Pinpoint();

exports.handler = async (event, context) => {
  // try {

  event = event.arguments.input;
  const arg = event.arg; // optional: when you want to provide input arguments


  // Create a AWS Pinpoint project
  const appID = await createApp();
};

async function createApp() {
  let params = {
    CreateApplicationRequest: {
      /* required */
      Name: "Test app" /* Campaign name, required */
    }
  };

  return new Promise((res, rej) => {
    pinpoint.createApp(params, function(err, data) {
      if (err) {
        rej(err);
        console.log(err, err.stack); // an error occurred
      } else {
        res(data.ApplicationResponse.Id); //console.log(data);// successful response
      }
    });
  });
}

Your configuration is ready to be pushed to the cloud.

Amplify push

You have set up your application now and you know how to connect other AWS services to your application if these are not provided by the Amplify framework (yet).

Add policy

Your function is ready, but your function is not allowed to invoke other services. Here for you must set the Lambda Execution Policy.

Open lambdafunction(or other name)-cloudformation-template.json

Go to the lambdaexecutionpolicy section and add a new statement to the array after the first object.

,
                        {
                            "Effect": "Allow",
                            "Action": [
                                "mobiletargeting:*"
                            ],
                            "Resource": {
                                "Fn::Sub": [
                                    "arn:aws:mobiletargeting:${region}:${account}:apps/*",
                                    {
                                        "region": {
                                            "Ref": "AWS::Region"
                                        },
                                        "account": {
                                            "Ref": "AWS::AccountId"
                                        }
                                    }
                                ]
                            }
                        }

We have added execution rights for mobileatargeting (pinpoint) now. I can imaging that you are curious what settings you need to put in when you connect to another services, but you can find those here

Push your latest changes:

amplify push

In my previous blogs you can see how you can connect your lambda function to your front end application. This example just focused on connecting AWS Amplify to each AWS Service.

About me

I am a huge fan of AWS Amplify and blog about certain topics that come along with it. If you have any questions related to the framework, React of React Native then you can always reach out to me.

Twitter

Alt Text

Do you want to be updated about new blogs?
Follow me on twitter: https://twitter.com/ramonpostulart

Top comments (3)

Collapse
 
mbcod3 profile image
Muhammad Bilal

Please change the post main image. Thank you

Collapse
 
rpostulart profile image
rpostulart

Why? It is picture from unsplash, free for use.

Collapse
 
mbcod3 profile image
Muhammad Bilal

I am sure you can get better glue picture from unsplash.

This is double meaning picture and I found it inappropriate for a dev article.

Its just a request, you are free to use what you like.