Demystifying AWS Amplify
Tags: aws, javascript, api
Published: 2021-10-11 07:25:32

---
series: 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](https://docs.amplify.aws/cli/start/install/)

```bash
npm install -g @aws-amplify/cli
```

and configure it

```bash
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

```bash
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

```json
{
  "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

```bash
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

```bash
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](https://docs.aws.amazon.com/cognito/latest/developerguide/getting-started-with-cognito-user-pools.html).

## 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`

```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

```bash
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!