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 likequeue
ornotification
-
<custom-resource-name>
your custom name -
<custom-aws-service-name>
should be your AWS Service likeSQS
orSNS
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!
Top comments (0)