Cooking Serverless with AWS Amplify

Little bit about going Serverless with AWS Cloud Platform with React.

Photo by Michael Browning on Unsplash

What Is Serverless computing?

Serverless computing is an execution model where the cloud provider is responsible for executing a piece of code by dynamically allocating the resources required.Wikipedia’s article on serverless computing provides a decent introduction to the topic:

Serverless computing, also known as function as a service (FaaS), is a cloud computing code execution model in which the cloud provider fully manages starting and stopping of a function’s container platform as a service (PaaS) as necessary to serve requests, and requests are billed by an abstract measure of the resources required to satisfy the request, rather than per virtual machine, per hour.

What Serverless does is that it abstracts the infrastructure away from you so you don’t have to worry about it, which means,

“Focus on your application, not the infrastructure”

However, serverless is not actually server-less since servers are still going to be used to execute our functions but you just don’t have to worry about that. Okay now what is the user case and what are the advantages?

You have to understand that in a web application your code is always visible; where your business logic could be read, analyzed which raises security concerns. This is why the no-backend approach fits better the mobile application needs, since they are wrapped into proper containers.

There are few advantages like you don’t need to manage servers, it’s all handled for you. Only charging for the amount of resources used to run the code and never pay for idle because Pay-per-execution, so it’s cost effective. It provides simplified scalability with automated high availability based on user demands.

There are few popular cloud providers like Google Cloud, Azure and AWS and in this article we will dive in with AWS :bowtie:

What Is AWS Amplify?

AWS Amplify is an open-source library for developers looking to build serverless applications with JavaScript for web or mobile platforms. Amplify allows you to build apps incredibly fast, leveraging services provided by Amazon and integrating those services without managing any infrastructure, where you can focus on the application.

To use any AWS services or the Amplify library, you’ll need an AWS account. If you don’t have one, you can sign up now where they provide a free tier so you have little less to worry about.

Install Amplify CLI

The Amplify CLI is a tool that allows you to create, integrate and manage AWS services for your application. CLI allows you to add or modify configurations locally before you push them for execution in the cloud.

Let’s dive in with installation. First you need to to install the amplify cli using,

npm install -g @aws-amplify/cli

After installation is done we can continue with configuration of Amplify by running following command in your CLI,

amplify configure

It will ask you to sign in to AWS. Once you’re signed in, come back to the CLI and you’ll be prompted to select an AWS region, choose the region you prefer and press enter. Next you have to create an IAM(Identity and Access Management) user and you have to specify a username, enter a user name and press enter again, it will open your browser and take you to the IAM dashboard. Follow it through with default settings and setup IAM username. In the CLI, It’ll prompt you for the Access Key ID and then for the Secret Access Key, copy and paste them on the console and finally it will prompt to create or update the AWS profile in your local machine, where you can create a new one or continue with default.

And that’s it. Configuration is done with Amplify.

Basic setup with React

Create your React app using create-react-app: and head to the directory and start your project:

npx create-react-app serverless-react
cd serverless-react
npm start

Now we have to initialize our application with Amplify. To do thar run following command:

amplify init

This will prompt you to answer some questions and select as your prefer.This command will initialize our AWS configuration and create a configuration file at the root of our application. Where you’ll find a .amplifyrc file and amplify folder, which contains CloudFormation configuration information for resources using.

Finally, Let’s install AWS Amplify packages in our React app:

npm install -S aws-amplify && npm install -S aws-amplify-react

Adding Authentication

Let’s add authentication to our React App. We will use Amazon Cognito or if you like you can build from scratch. Add auth using:

amplify add auth

Make the selection as you like and in this instance I’ll be proceeding with Email without advanced configuration. We now have the authentication module configured but, we still need to deploy this configuration to our AWS account, and this can be simply done by:

amplify push

Configure Auth in the React app

Now we have to configure our React app. Open your index.js and add Amplify config.

index.js

Next, add the Amplify Authenticator to your App.js file:

App.js

Now, we are ready to test the app. Save and check your application again. Your browser will load with a page to sign in and sign up with verification added, secured by AWS.

Sorry for not making this article a little more of a food wish, maybe on another article. That’s a wrap of Cooking Serverless with AWS Amplify.

Until next time 😃