AWS Amplify was released in late 2017. It was released to make the front-end mobile and web applications into full-stack applications which of course powered by AWS. In this blog, we will try to describe
Check out our full AWS course on our YouTube channel
What is AWS amplify?
AWS amplify was released to help front-end developers of both web and mobile applications convert their static applications to scalable full-stack applications.
With the help of the AWS amplify, the developer can configure the app backends, connect their application in minutes and deploy static web apps in few clicks. It also enables the developer to manage the content outside the AWS console.
What frameworks do amplify supports?
AWS amplify is built for every possible application out there since it supports almost every popular platform and framework in mobile and web environments. The framework and platform supported by amplifying includes
For mobile applications :
- React Native
For web applications :
Enroll in our AWS Certification today and become a certified AWS solutions architect!
What’s include in the service?
AWS Amplify was built under apache 2.0. It includes a wide range of open-source libraries and supports drag-and-drop user interface components that developers can use as the building blocks for the desired application. AWS Amplify also has a built-in CLI (command line interface) which can be used for app backend purposes. If you are ready to pay some extra, AWS amplify console can also act as the web hosting service for your web application. Let’s see some of the components in the AWS amplify.
The top components of AWS amplify include
Used for tracking user sessions and it reports on the behavior. You can also set up custom attributes and also handle the conversation funnel inside the console.
It is used for keeping the app data synced with the cloud. It is also used for managing the distributed data and handling subscriptions and messaging.
It enables ready-to-use workflow for Multi-factor Authentication (MFA), single sign-on, forgot password, and much more.
It is capable of managing the campaigns easily. It allows us to send messages to various users across every possible channel including text, emails, and push.
How much does AWS amplify costs?
The pricing for the AWS amplify for its libraries and components is free. Yes, you heard that right, it is free. You need to pay for the only part when you use the services to build and deploy your application. In detail, let’s say for example you are using Amazon S3 for storage and you add an amplify storage module, you just have to pay the amount for the usual S3 fees.
The pricing of AWS amplify for building, deploying, and web hosting your application, there is a free tier for the AWS amplify which is available for the whole 12 months. After the completion of 12 months, you have to pay US$ 0.01 per build minute for building and deploying, US$ 0.02 for per GB of storage every month and you’ll have to pay US$ 0.15 for every GB served.
Go through our AWS Interview Questions and Answers blog if you are looking to make a job on AWS.
Build an AWS amplify application
So now you know something about AWS amplify, let’s see the step-by-step process of how we can launch your first AWS amplify application.
1. Login to your AWS account and choose AWS Amplify in the services.
2. Once you logged into your AWS Amplify console, click “Get started” and it scrolls down to the “Get started” section.
3. Click on “Get started” under the Deliver(Host your web app).
4. It will take you to the page where you can host your own React or any other application by connecting the source code from the Git repository (or) if you don’t have any code, just scroll down and click “Continue” in the From full-stack samples option.
5. Then you have to select “Authentication starter” and click on the Deploy app.
6. On the next page, just click on the connect to GitHub account.
7. Once you authorize the request, set the application name, select a service role, and click on save and deploy.
8. It takes some time for creating the application but once all the processes are done, click “Continue”.
9. Even though your application is created, AWS takes some time to provision, build, deploy and verify.
10. Once it is done, you can see that AWS has created one front-end (master) and one backend environment (dev*) or click get started on the backend environment. Now you can add the users via deployed front-end or the backend.
Since our application running and now let’s connect the application to the NoSQL database using GraphQL API
11. First clone the repository that was forked in your GitHub account in your preferred local path and change the directory to the same destination using the following command.
git clone https://github.com/<YOUR-GITHUB-USERNAME>/create-react-app-auth-Amplify.git
12. After changing the directory, we have to install and configure Amplify CLI. To install the amplify CLI use the following command.
npm install -g @aws-Amplify/cli
Specify the AWS Region
? region: # Your preferred region
Specify the username of the new IAM user:
? user name: # User name for Amplify IAM user
Complete the user creation using the AWS console
13. Now in your AWS console, create a user with AdministratorAccess to your account to provision AWS resources for you like AppSync, AWS Cognito, etc.
14. Once the user is created, Amplify CLI will ask you to provide the accessKeyId and the secretAccessKey to connect Amplify CLI with your newly created AWS IAM user.
15. Once the Amplify CLI is configured, connect to this backend from your local machine and create an Amplify project using the following command.
Amplify pull --appId XXXXXXXX --envName devw
16. Now let’s add the GraphQL API using the default example.
Amplify add api? Please select from one of the below mentioned services GraphQL
? Provide API name: todo
? Choose the default authorization type for the API API key
? Enter a description for the API key:
? 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
? Do you want a guided schema creation? (Y/n) Y
? What best describes your project: Single object with fields (e.g., “Todo” with ID, name, description)
? Do you want to edit the schema now
? No GraphQL schema compiled successfully.
17. To deploy these changes to the cloud run the following commands.
Current Environment: dev*
| Category | Resource name | Operation | Provider plugin |
| -------- | --------------- | --------- | ----------------- |
| Api | todo | Create | awscloudformation |
| Auth | cognitocf0c6096 | No Change | awscloudformation |
? Are you sure you want to continue? (Y/n) Y
✔ Generated GraphQL operations successfully and saved at src/graphql
✔ All resources are updated in the cloud
GraphQL endpoint: https://gumwpbojgraj5b547y5d3shurq.appsync-api.us-west-2.amazonaws.com/graphql
GraphQL API KEY: da2-vlthvw5qcffxzl2hibgowv3rdq
18. Visit the Amplify Console to view the added API category. Choosing the API category will allow you to navigate to the AppSync Console
And that’s it, now you created the application with user sign-in without any coding just by using AWS Amplify.
For a better understanding of AWS, Check out our AWS Tutorial.
Benefits of the AWS amplify
You may ask why should we use AWS amplify instead we can code the backend ourselves. AWS amplify is for those who do not want to configure backends and building components from scratch. AWS amplify comes with a lot of benefits. They are listed below.
1. Quick configuration of backends
We can make use of Amplify’s admin interface and CLI’s spontaneous workflow to set up AWS backend with scalable configuration. This backend is with authentication, storage, data, and other more common use cases.
2. Easy connection with the frontend
By using the amplify libraries, we can connect to new or existing AWS resources with bare minimum lines of code.
3. Easy deployment
The amplify console can be used to host single-page web applications and static websites with Git-based workflow. You can just deploy by connecting the application’s repository with the console.
4. Content management is simple
One of the most important benefits of Amplify’s admin interface is you can provide administrative access to people who are not developers to manage app content and they can make changes without having to create an AWS account.
I hope this blog gives you some insights on AWS amplify. We all know Amazon web services is the world’s largest cloud platform. Even though it provides multiple services, we can surely say, AWS amplify is one of the best services in the view of the pity developers who didn’t have any idea on the backend. If you are more interested in AWS service, don’t forget to enroll in our AWS masters course to learn more about AWS.
Reach out to us on our AWS Community if you have any doubts about any of the AWS services.