How to build full stack apps with AWS Amplify.

What is AWS Amplify?

AWS Amplify is a set of tools that can be used to help front-end mobile and web developers to build highly scalable and high available full-stack applications. powered by AWS services. With AWS Amplify, developers can configure and provision backend systems in minutes. AWS Amplify is an opinionated tool, so it offers a set of libraries that support the most common applications features, such as, authentication, API’s REST or GraphQL, notifications, data storage offline first, analytics, and other modern features like machine learning.

AWS Amplify can be used in/by the major players in web and mobile development: Javascript, React, Angular, Vue, Next.js, Android, iOS, React native, Ionic, Flutter.

Why AWS Amplify?

To understand the current popularity of tools like AWS Amplify we need to back in time to the democratization of the internet and how that situation impacted the application development ecosystem. Almost any app needs to implement some sort of API to interchange data with a server that hosts most of the business logic of the products. Most of the monetisation models on the app economy are based on that interchange of data. Data is the new economy and API’s are the channel. But who develops those API´s? Front-end developers?

Picture the following quite common scenario: a small startup with limited resources wants to launch an app. As mentioned, its business model resides on data capture through an app. If the app is a hit, they need to scale the team and the infrastructure rapidly with almost the same initial amount of budget. If the product failed, the startup should be able to pivot quickly reusing as much as possible.

How to move fast? How to hit the market quickly? How to be able to scale the infrastructure for our applications with harming the business? How scale the team at the correct maturity of the business?

Another common scenario: a software development agency really good building front-end experiences which can not serve e2e experiences to their costumers because they do not have back-end capabilities. Most of the web apps and mobile apps they built have many similarities, such as API´s, authentication, analytics or location based features. How they can serve better experiences for their customers? The client is willing to pay for what they use, but can not scale the internal team without knowing how the impact of their product impact the market.

The problem on those two scenarios is the same: move quickly, adjust the investment on development on the actual product maturity, hit the market and scale as fast as possible if require.

Do not get me wrong, I am not arguing the necessity or not of certain set of professionals. Backend engineers, cloud engineers are required professional for most of the companies, but those professionals are paid to provide value with their work. If front-end developers have the tools to create themselves backend services for their applications, is it not better use of the time of the backend developers focus on how to integrate those backend services with third party services, monitor that the infrastructure works as expected, take care about security of the data of their systems, expand their infrastructure, create automations? Instead of dealing on creating auth services, API’s which nowadays can be driven by front-ends, analytics, or another front-end oriented features?

The game changed with the adoption of the cloud providers. Computing and storage that historically had been keeping spending the money of the companies on operational and hardware level, now is on-demand with a pricing model which you can pay as you go. You do not use it, you do not pay for it. This situation opened an opportunity for the cloud providers to develop ways to offer tools to build full-feature applications quickly using cloud services as backend systems. The result of this opportunity was the release in 2017 of AWS Amplify.

Let’s get started.

Installation guide

Prerequisites

Before begin be sure that you have the following things:

  • Create an AWS Account
  • Node.js, npm, git

Installation

First, you will need to install the first and most important component, the CLI. From the CLI we are going to be able to provision all our backend services. We will need to install the CLI globally so we can use it in any of our projects.

$ npm install -g @aws-amplify/cli

// After the installition be sure is correctly install

$ amplify --version

// should output the version number installed

The next step is is configure your Amazon IAM user. If it does not exist in your current environment, the CLI will guide you to create a new IAM user. Amazon IAM (Identity and Access Management) enables you to manage the identity and permissions of users that operates in AWS. Without going really deep on what is the services, the basic idea is create a user with enough permission to provision AWS services from the CLI. There is a high degree of granularity at permissions level in IAM, but to configure this correctly requires you a strong knowledge on IAM, so Amplify recommends you create an IAM user with access only from CLI (restricting the access from AWS  Management Console which reduce the risk due to that from the CLI you can do a limited set of operations) and give Administrator Access, so you do not need to give permissions per services avoiding permissions errors during the provisioning of the services.

$ amplify configure

After running this command, the browser will show us the AWS Management Console. We can sign in with the previously created account and the AWS Management Console will redirect us to IAM service and directly will open “Add user” section where we can follow 5 steps to create our amplify user:

  • Select user name. Select access (CLI or/and AWS Management Console).
  • Permissions.
  • Tags. (we can use tags to organize the users per departments or teams, allowing us to see what a certain tag did and consumed)
  • Review the data

In the final step, the system will show us the credentials for that user. If you like you can download the .csv with the credentials and store in a secure place.

Once this process is finished the CLI will ask us for the accessKeyId , secretAccessKey and the profile name that we want to use for it. The profile will be an identifier name in our configuration file for that credentials. When we provision backend service we will able to set the profile that we want to use. Every profile have different level of permissions (services and accounts).

We have everything ready to go. In the following articles, will create a series of applications to demonstrate how to use the different services or AWS Amplify. We will start developing on the platform where most of the libraries are supported: Javascript. One of the top frameworks supported is Next.js. So we will use a Next.js app as playground to test all the AWS Amplify capabilities.

Create a new Next.js App

The best way to setup quickly a Next.js app is using Create Next App, similar CLI as the Create React App

$ npx create-next-app amplified-next-playground
$ cd amplified-next-playground

// we can make sure that eveything goes as expected running

$ npm run dev
// Navigating to http://localhost:300 should open the default Next.js page

The next step is install the aws-amplify libraries for Javascript, which allow us use the functionality available in every module.

$ npm install aws-amplify

If you pay attention to the packages installed in the aws-amplify packages you will realize that the package installed a set of libraries from aws-amplify like: @aws-amplify/api-graphql@^ and also you will see the installation of quite a lot libraries of @aws-sdk/* This is because Amplify is a high level layer on top of AW SDKs. The AWS Amplify team create this layer to make a delightful development experience and oriented the set of libraries to solve certain problems. The SDKs contains the whole set of API’s that in many cases we do not use or require a complexity we want to avoid to have in our front-end. We following articles, we will also see that we are able to work directly with the SDK libraries without using Amplify to unleash all the functionalities available of the service.

Make our project an amplify project

AWS Amplify uses Infrastructure as Code to provision our infrastructure. What is Infrastructure as Code? It’s a way to provision services (compute, storage, etc) from machine readable configuration files. Instead of going to some administration panel an intentionally clicking the services that we want to create, we define in a file these services and their properties. We use this file to send it to a server which is able to read this file and run its definition.

In practice, this means that after making our project Amplify project, Amplify will create in our project a set of files which will use to provision AWS services when we run certain CLI commands. In the long run is important to understand the content of those files, but for now, it’s enough to understand that it’s important keep this file because are indicating to the CLI that your project is Amplify project and can be used to create the backend system for our app. Run the following command in your main app directory:

$ amplify init

The CLI will ask you several things:

  • Name of the project which AWS will use to create the stack of services you will use. Also the CLI will assume certain configuration depends on your current project, like: environment, Javascript framework, etc.
  • We will be asked if we want to Initilize the project with the above configuration which we can say yes. We will see how the CLI output: Using default provider awscloudformationAWS Cloudformation is the service from AWS to run Infrastructure as Code. Amplify uses this service to run our provisioning files.
  • The CLI will ask us for the profile we would like to use. It will also show us the available profiles. We should find and select the one created in the previous steps.

At the end of this process AWS Amplify will start to provision our base resources. What are normally those? IAM Role. A role is the way that AWS allows us to operate AWS services in a secure manner. To explain what is a role, imagine the roles in a company: You have the role of the manager. Your competencies as manager are your policies, meaning, the things that you are allowed to do as manager in your work. For instance, you can ask to your team to fill the hour sheet or fill in the performance report. If you are a developer in the team of that manager you have the role of developer. You can try to ask to other developer to fill in the performance report, but in theory, you can’t ask for it, only the managers can do this action. In AWS world, you create the roles, so users or services can assumed those roles to perform actions inside of the AWS cloud. Amplify creates those roles in order that our services can connect with services like Amazon Cognito, which is a required service to authenticate and authorise application users.

Deployment bucket. AWS uses an Amazon S3 bucket (storage system) to host the infrastructure as code files and the code we want to deploy. It also keeps track of them and keep them persistently to perform redeployments when is need it.

After the command finished, the CLI created few new files:

  • Inside of src you can find a file called aws-exports.js which holds all the configuration for the services you create with Amplify. Amplify client libraries get from this file the necessary environment information about your backend to run the libraries code.
  • The .gitignore was modified with non trackable added files.
  • A new top level directory was created: amplify which basically is going to store all our backend definition. Let’s describe what is happening here:
  • The CLI uses our project as host to provision the backend. That means that when we push any change of our backend, AWS Amplify will collect the information from our definition, will pack the files required and will upload that pack to the deployment bucket where AWS service will pick them up, unpack and redeploy the new infrastructure.
  • One of the files that is ignore from git is called #current-cloud-backend which is the packed version of our backend definition. There are two files in the initialisation of the project called: amplify-meta.json and tags.json  which are packed from the backend folder. The meta folder defines the entities we need to deploy our backend and it’s identities (ARN or Access Resource Name, which is the unique identifier of that resource in the cloud) and the tags.json which contain a tag for the environment and the project.
  • The backend folder will contain the mentioned two configuration files and the backend-config.json which will contain all the definition of our backend services and how they will need to be provisioned.
  • The cli.json file will allow us to tweak different configuration of how CLI perform actions.

In the following articles we will dig more on the amplify project configuration and I will teach you how to add to the application authentication and authorization

%d bloggers like this: