DEV Community

loading...
Cover image for AWS Amplify and Front-end Development
AWS Community ASEAN

AWS Amplify and Front-end Development

Jones Zachariah Noel
AWS Serverless | VueJS | NodeJS | Software Engineer | Full-stack developer | Project manager
Updated on ・6 min read

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.
Enter fullscreen mode Exit fullscreen mode

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!
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

For VueJS

npm install aws-amplify @aws-amplify/ui-vue
Enter fullscreen mode Exit fullscreen mode

For ReactJS

npm install aws-amplify @aws-amplify/ui-react
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

Once the Cognito User Pool is provisioned locally, we can push it to the cloud with amplify push.
Amplify add auth pushed to cloud

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')

Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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);
}
Enter fullscreen mode Exit fullscreen mode

Demo of Authentication on Amplify
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
Enter fullscreen mode Exit fullscreen mode

And this could be updated to the cloud with amplify push.
Pushing storage to cloud
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>
Enter fullscreen mode Exit fullscreen mode

amplify-s3-album VueJS component provides the ability to upload files to S3 bucket with Cogntio as the authentication.

Demo of storage
Storage demo

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.
Enter fullscreen mode Exit fullscreen mode

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).

Uploading build files

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

See Configuration Reference.

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.

Discussion (0)