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.
$ amplify configure
Initializing new Amplify CLI version...
Done initializing new version.
Scanning for plugins...
Plugin scan successful
Follow these steps to set up access to your AWS account:
Sign in to your AWS administrator account:
https://console.aws.amazon.com/
Press Enter to continue
Specify the AWS Region
? region: us-east-1
Specify the username of the new IAM user:
? user name: jones
Complete the user creation using the AWS console
https://console.aws.amazon.com/iam/home?region=********************************policies&policies=arn:aws:iam::aws:policy%2FAdministratorAccess
Press Enter to continue
Enter the access key of the newly created user:
? accessKeyId: ********************
? secretAccessKey: ********************
This would update/create the AWS Profile in your local machine
? Profile Name: JonesPersonal
Successfully set up the new user.
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.
$ amplify init
Note: It is recommended to run this command from the root of your app directory
? Enter a name for the project s3albumvue
The following configuration will be applied:
Project information
| Name: s3albumvue
| Environment: dev
| Default editor: Visual Studio Code
| App type: javascript
| Javascript framework: vue
| Source Directory Path: src
| Distribution Directory Path: dist
| Build Command: npm run-script build
| Start Command: npm run-script serve
? Initialize the project with the above configuration? Yes
Using default provider awscloudformation
? Select the authentication method you want to use: AWS profile
For more information on AWS Profiles, see:
https://docs.aws.amazon.com/cli/latest/userguide/cli-configure-profiles.html
? Please choose the profile you want to use JonesPersonal
Adding backend environment dev to AWS Amplify Console app: ***********
⠴ Initializing project in the cloud...
CREATE_COMPLETE AuthRole AWS::IAM::Role Sat Jun 12 2021 07:53:45 GMT+0000 (Coordinated Universal Time)
CREATE_COMPLETE UnauthRole AWS::IAM::Role Sat Jun 12 2021 07:53:46 GMT+0000 (Coordinated Universal Time)
⠼ Initializing project in the cloud...
CREATE_COMPLETE DeploymentBucket AWS::S3::Bucket Sat Jun 12 2021 07:53:55 GMT+0000 (Coordinated Universal Time)
CREATE_COMPLETE amplify-s3albumvue-dev-75327 AWS::CloudFormation::Stack Sat Jun 12 2021 07:53:57 GMT+0000 (Coordinated Universal Time)
✔ Successfully created initial AWS cloud resources for deployments.
✔ Initialized provider successfully.
Initialized your environment successfully.
Your project has been successfully initialized and connected to the cloud!
Once the initialization is done, you are good to start adding different AWS components to your front-end application.
Let's install the dependent packages for our project.
npm install -g @aws-amplify/cli
For VueJS
npm install aws-amplify @aws-amplify/ui-vue
For ReactJS
npm install aws-amplify @aws-amplify/ui-react
Authentication with Amplify
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.
$ 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? Email
Do you want to configure advanced settings? No, I am done.
Successfully added auth resource s3albumvue229f70f3 locally
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
import Vue from 'vue'
import App from './App.vue'
/* ---Amplify to be imported--- */
import Amplify from 'aws-amplify';
import awsconfig from './aws-exports';
import "@aws-amplify/ui-vue";
Amplify.configure(awsconfig);
/* ---Amplify to be imported--- */
Vue.config.productionTip = false
new Vue({
render: h => h(App),
}).$mount('#app')
The template for the Vue Authentication component in your application's login component or the App file.
App.vue
<template>
<div id="app">
<amplify-authenticator>
<amplify-sign-out></amplify-sign-out>
<!-- Rest of the application components -->
</amplify-authenticator>
</div>
</template>
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.
async signOut() {
try {
await Auth.signOut();
} catch (error) {
console.log('error signing out: ', error);
}
Demo of Authentication on Amplify
Storage on Amplify
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.
$ amplify add storage
? Please select from one of the below mentioned services: Content (Images, audio, video, etc.)
? Please provide a friendly name for your resource that will be used to label this category in the project: ********
? Please provide bucket name: *******************
? Who should have access: Auth users only
? What kind of access do you want for Authenticated users? create/update, read, delete
? Do you want to add a Lambda Trigger for your S3 Bucket? No
Successfully added resource ******* locally
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.
Demo of storage
Hosting on Amplify
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.
$ amplify add hosting
? Select the plugin module to execute Amazon CloudFront and S3
? Select the environment setup: PROD (S3 with CloudFront using HTTPS)
? hosting bucket name *************
Static webhosting is disabled for the hosting bucket when CloudFront Distribution is enabled.
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).
Deployments and GitHub repositories
VueJS application hosted on S3 bucket with CloudFront distribution : https://dnbxim1kfj83r.cloudfront.net/
s3-album-vue
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
Blog : https://dev.to/awscommunity-asean/aws-amplify-and-front-end-development-5geg
Author : https://dev.to/zachjonesnoel
Project setup
npm install
Compiles and hot-reloads for development
npm run serve
Compiles and minifies for production
npm run build
Lints and fixes files
npm run lint
Customize configuration
ReactJS application hosted on S3 bucket with static website hosting : http://s3album-20210523092113-hostingbucket-dev.s3-website-us-east-1.amazonaws.com
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
Blog : https://dev.to/awscommunity-asean/aws-amplify-and-front-end-development-5geg
Author : https://dev.to/zachjonesnoel
This project was bootstrapped with Create React App.
Available Scripts
In the project directory, you can run:
npm start
Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.
The page will reload if you make edits.
You will also see any lint errors in the console.
npm test
Launches the test runner in the interactive watch mode.
See the section about running tests for more information.
npm run build
Builds the app for production to the build folder.
It correctly bundles React in production mode and optimizes the build for the best performance.
The build…
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.
Top comments (0)