Demystifying AWS Amplify

AWS Amplify is a great tool to easily integrate your frontend such as React or Vue, or your mobile app such as Flutter with many AWS Services such as Cognito for authentication or Appsync for GraphQL.

This is a series about AWS Amplify where I try to point its strengths and weaknesses, my learnings, and how to make it fancier.

Getting Started

You might have already a frontend like React or Vue then you should install the Amplify CLI

npm install -g @aws-amplify/cli

and configure it

amplify configure

# Put in your AWS credentials

# And then initialise your backend
amplify init

That will create a folder amplify which contains your backend.
Within the backend- folder you will find the backend-config.json that holds your AWS resources.
Let's create an Appsync Service (AWS GraphQL Service).

Create an Appsync Service

amplify add api
? Please select from one of the below mentioned services: GraphQL
? Which service would you like to use AppSync
? Provide API name: amplifiedreact
? Choose the default authorization type for the API API key
? Enter a description for the API key: test
? After how many days from now the API key should expire (1-365): 7
? Do you want to configure advanced settings for the GraphQL API No, I am done.
? Do you have an annotated GraphQL schema? No
? Choose a schema template: Single object with fields (e.g., “Todo” with ID, name, description)

That creates an amplify/backend/api/amplified- folder and your backend-config.json got changed

{
  "api": {
    "amplifiedreact": {
      "service": "AppSync",
      "providerPlugin": "awscloudformation",
      "output": {
         // ...
      }
    }
  }
}

The providerPlugin says awscloudformation which generates a Cloudformation- template (CFN) in amplify/backend/api/amplified/stacks for you. If you familiar with CFN, you might want to add Resources or Parameters.

Add a REST-endpoint

Let's add a REST- API with Lambda + API Gateway

amplify add api
? Please select from one of the below mentioned services: REST
? Which service would you like to use API Gateway + Lambda
? Provide a friendly name for your resource to be used as a label for this category in the proj
ect: rest
? Provide a path (e.g., /book/{isbn}): /items
? Choose a Lambda source Create a new Lambda function
? Provide an AWS Lambda function name: rest
? Choose the runtime that you want to use: NodeJS
? Choose the function template that you want to use: Hello World

That would create two folders amplify/backend/api/rest which contains the CFN of your API Gateway and amplify/backend/function/rest which contains your Lambda function + its CFN.

Add Authentication

When adding AWS authentication service Cognito

amplify add auth
Using service: Cognito, provided by: awscloudformation

 The current configured provider is Amazon Cognito.

 Do you want to use the default authentication and security configuration? Default configuration

Warning: you will not be able to edit these selections.
 How do you want users to be able to sign in? Username
 Do you want to configure advanced settings? No, I am done.
Successfully added auth resource amplifiedreactb4c783fa locally

That's all but that is really a simple Cognito configuration.
Learn more about AWS Cognito.

Add a custom AWS Service

If you want to add a custom AWS Service such as SQS or SNS, we need to add it in the backend-config.json

{
  // many other Resources
  "<custom-category-name>": {
    "<custom-resource-name>": {
      "service": <custom-aws-service-name>,
      "providerPlugin": "awscloudformation"
    }
  }
  // many other Resources
}

You are free with the naming but I would recommend you to name it as followed

• <custom-category-name> should be your category name like queue or notification
• <custom-resource-name> your custom name
• <custom-aws-service-name> should be your AWS Service like SQS or SNS

Then create a new folder structure

amplify
  \backend
    \<custom-category-name>
      \<custom-resource-name>
        parameters.json
        template.json

template.json is a CloudFormation template, and parameters.json is parameters file that will be passed to the CFN. Additionally, the env- parameter will be passed in to your CFN dynamically by the CLI.

Run amplify env checkout <current-env-name> to populate the CLI runtime files and make it aware of the newly added custom resources.

Conclusion

Great, you have now used Amplify to create a fullstack application with an AWS backend.
With its CLI you are able create common solutions such as Authentication or GraphQL- APIs with less CFN- knowledge.

Check out my other parts of this series to see my learnings and how to make it more fancy.

Happy Coding!