AWS Amplify facilitates with a ton of services which makes the front end developers to integrate with AWS Serverless backend much more seemless and simple. The concept of "LOW-CODE or NO-CODE" is what drives AWS Amplify to be well adapted. Amplify provides libraries for different services such as - Authentication, Storage, API, DataStore, Analytics, AI/ML, PubSub to be readily available to the front-end developers.
Amplify setup
Amplify can be setup with on the local machines with AWS Amplify CLI. And the installation guide will give a walk-through of installation and setup of Amplify CLI. Once you have the CLI installed, you can setup the user on AWS with the amplify configure command.
The user which gets created is granted with Administrator access and this credential could be used with another project on the same AWS Account.
Initializing your Amplify project
Once you have the Amplify setup with your credentials, you can initialize the project with amplify init and it prompts an interactive questionnaire to setup your project on cloud.
In my earlier blog, Modern apps going Cognito I mentioned how Cognito is seamlessly integrated with Amplify and how the low code, ready to use components addition can be easily added to your front-end application. Now let's get that configuration done! Adding authentication to your amplify project is achieved with the command amplify add auth and Amplify CLI gives you an interactive questionnaire and creates a Cognito User Pool with the configurations.
Once the Cognito User Pool is provisioned locally, we can push it to the cloud with amplify push.
You would have to import the packages and also programmatically configure the AWS resources used in the project.
main.js
importVuefrom'vue'importAppfrom'./App.vue'/* ---Amplify to be imported--- */importAmplifyfrom'aws-amplify';importawsconfigfrom'./aws-exports';import"@aws-amplify/ui-vue";Amplify.configure(awsconfig);/* ---Amplify to be imported--- */Vue.config.productionTip=falsenewVue({render:h=>h(App),}).$mount('#app')
The template for the Vue Authentication component in your application's login component or the App file.
amplify-authenticator VueJS's UI component is the component provided by AWS Amplify which does sign-in, sign-up, forgot password, confirm user, resend confirmation code workflows with Cognito. And the UI is also customizable to the UI flavours your application needs.
VueJS Amplify UI component for sign-out was implemented with Auth API.
Storage on Amplify refers to the storage of data values and also storage of files. Amplify's Storage library uses -
DynamoDB - for the storage of data values, which is AWS managed NoSQL database offering.
S3 - for the storage of files which is also AWS managed object storage, perfectly suited for files upto 5TB.
This can be configured with amplify add storage, for this demo the project would use S3 based storage for files.
And this could be updated to the cloud with amplify push.
When this is been pushed, it creates S3 bucket and also attaches a policy to the authenticated users which is done with a Lambda function which validates the policy to Create, Update, Delete objects on S3.
<template><amplify-s3-album/></template>
amplify-s3-album VueJS component provides the ability to upload files to S3 bucket with Cogntio as the authentication.
In my earlier post, Amplify your web hosting I had mentioned about how Amplify helps in hosting web-applications. Now with that background, we will be enabling hosting on this very project which is done with the command amplify add hosting. In this demo we will host it on S3 and also distribute it over CloudFront's CDN network.
This build the application and deploys on S3 bucket and also setups up a CloudFront distribution for us to access the application.
On amplify publish, this will create the needed AWS resources and also build the VueJS application and upload the dist folder to the selected destination (S3 bucket in this demo).
The project demonstrate VueJS components provided by AWS Amplify for Authentication and Storage. The project promotes "LOW-CODE" and readily availalble VueJS components for seemless integration with AWS Serverless Backend and other AWS services.
A detailed walkthrough of the project available on Dev.to
The project demonstrate ReactJS components provided by AWS Amplify for Authentication and Storage. The project promotes "LOW-CODE" and readily availalble ReactJS components for seemless integration with AWS Serverless Backend and other AWS services.
A detailed walkthrough of the project available on Dev.to
The difference with VueJS app and ReactJS app is the way it is hosted and ReactJS is fully development with UI components provided by Amplify whereas VueJS is using sign-out API instead of the Vue UI Component as the component had some dependent npm package issue.