Nerd For Tech
Published in

Nerd For Tech

What is AWS Amplify Framework and how to start with AWS Amplify?

This article all about another AWS Service which provides developers to build cloud-powered mobile and web applications easily with other AWS services like AWS MFA (MultiFactor Authentication) service, AWS AppSync, AWS Analytics, and more.

AWS Amplify is a JavaScript-based development framework that consists of Libraries, UI components, and CLI interfaces to build and deploy mobile (android, ios) and web applications. This service helps to build, deploy and host single page applications as well as static websites with serverless backend. Serverless in the sense developers only need to focus on the application code implementation and don't need to think about the server arrangement and other resource management, AWS or other cloud vendors are responsible for managing and operating infrastructure by looking at the traffic, etc. With this serverless nature, using amplify we can create secure as well as scalable mobile and web applications.

As mentioned earlier Amplify consists of three main components

  • UI components: There are a lot of prebuilt UI components are available to use like login forms etc, Good about these is all the UI components are customizable. so users can arrange those UI as they expected for their applications.
  • Libraries: helps integrate and interact with AWS services. These will helps to add features to the application likes push notification services, authentication, etc.
  • CLI: helps to easily manage your AWS managed backends by configuring AWS services through CLI commands.
Overview of AWS Amplify

Features of AWS Amplify

When we talk about the features available in Amplify, it got some really cool stuff with it.

  • Analytics
  • Authentication
  • Push notification
  • File Storage
  • PubSub
  • Data sync and security
  • Datastore
  • Predictions(ML & AI)
  • Interactions.

and many more is there.

This article will give you some basics of how to get started with the AWS Amplify service. This article will cover up how to set up AWS Amplify. What are the basic commands which we should be aware up if we are hoping to start using this service? In this article we don't do any application development, just give you some understanding about AWS Amplify.

Let's see how to create a simple React application using the AWS Amplify service.

Before starting with Amplify, We need to set up 3 things.

  1. Set up an AWS account.
  2. Install the latest version of Node.js.
  3. Install the latest version of NPM.

Once after set up those three basic requirements, you are good to go.

Next, we need to install Amplify console to use.

Open cmd and type the below command.

npm install -g @aws-amplify/cli
Success message of Amplify CLI installation

Let configure the Amplify using the following command.

amplify configure

Once we execute this command, we need to specify which AWS region, IAM user name as in below. It will open up a browser window where we can set IAM user details in the IAM management console.

* Note: need to set AdministratorAccess to the user and please make sure you download the user security credentials. Access Key Id and Secret access key are not visible after the first time.

Once after successful creation of IAM user, you need to input those key Id and secret key in cmd where you stopped earlier.

Successful completion of Amplify Config

Since this is a react application, we need to use react-specific commands.

  • use react command to create react application — generate sample front end code.
npx create-react-app <application-name>
  • Run amplify init command once you inside the react application previously created, to generate the backend of this application more.
amplify init

It will shoot out some questions as in the below image

Successful integration will create an app in Amplify console like in the below image.

Once after successful integration, you can see a folder named as an amplify inside the react application folder. That folder consists of the information related to the backend service. There is another new file generated call as aws-exports.js which consists of information that will enable you to connect from the client to the back.

Now we can use the following command to easily access amplify console from cmd.

amplify console

Next, we need to connect the above created backend with front-end application we created using react. As I mentioned before we can use UI components provided by Amplify. Here we going to install the UI component for react framework. (I will include necessary links which provide more info about commands and other details related to amplify to the bottom)

npm install aws-amplify @aws-amplify/ui-react --save

* Note: @aws-amplify/ui-react provides React components that connect easily to the back end. The core library for interacting with AWS services in applications is aws-amplify.

Open the react project from your favorite text editor or IDE supporting react.

Open src/index.js and import aws-exports and Amplify libraries. aws-exports contains the necessary information to connect with AWS backend services.

Once after imports, you can continue to write frontend code.

In order to maintain interaction between the front end and backend, we need to implement REST/GraphQL API in the backend to send data to the frontend application.

so we can use amplify add api the command to start with backend coding.

Several questions will be there before complete the API creation. modify the react code base app.js accordingly once you defined the REST API correctly.

Imagine we need to add few services like authentication, push notification, etc

simple by using the below command you can add services to your project.

amplify add <featurename>eg: amplify add auth
amplify add notifications

likewise, you can easily integrate more aws services into your application.

we will try out all the development of amplify application in our next article where you will get a chance to get a better understanding of application development.

once you added features, Run the below command to build all your local backend resources and provision them in the cloud.

amplify push

once after this, we can use the service by import it to the necessary places.

Lastly what we need to do deployment the application.

From using the CLI we can easily deploy and host applications without trouble, since the backend is serverless we don't need to worry much about the infrastructure arrangement.

amplify add hosting

The above command will host the application and once we run the below code

amplify add publish

application will go live and you will receive a public URL on CMD to access the application.

Here are some essential links you can refer to.

https://aws-amplify.github.io/amplify-js/api

Will see you in the next article with implementation :)

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store