AWS Amplify | Engineering Frontend & Backend

Motivation:

As we learn features and expand our application, things get complex and we go back at googling, wouldn't it be nice to have all information in 1 post from start to finish to build the Front end and Back end? Including managing environments, analytics, API, basically using every aspect of AWS using Amplify.

I'll begin with the Back End since that's the bone structure of any app.

Back End

We are going to be using everything Amplify offers, so let's go step by step as if it's a new project.

Setup Dev Environment

Make sure you have configured Amplify locally:

AWS Amplify Local Setup
GoalHave our local environment ready so we can start building using AWS resources. If you want to practice in an AWS Sandbox, here’s the link. PrerequisitesSign up for an AWS accountInstall the Amplify CLIInstall AmplifyInstall the Amplify CLI: npm install -g @aws-amplify/cliNote: If you’re having p…

Create a project:

  • Create a new app by doing amplify init where you root project lives. or you could go to Amplify (I selected there my region, if you are in another one change it).
  • On the top right corner create a new app and select backend:
  • On the tab Backend Environment unfold Local setup instructions, copy that and paste it on the terminal on your local to pull the newly created project.

Create Prod and Lower environment

Goal: Have 1 environment for production that users can use and 1 environment for us to develop.

  • Create a new environment by doing: amplify env add, when prompted with "Select the authentication method you want to use", use "Amplify Admin UI". Give this env the name "prod"
  • Delete previous environment with name "staging, by typing amplify console and selecting "amplify console":
  • Create a new environment by doing: amplify env add and give this env the name "dev"
When ever you create a new environment, you switch to it automatically. You can check your current env, by doing Amplify status

Now you should have 2 environments.

Managing Amplify Environments

You can type amplify env to know the full list of commands. Here are some:

Example: amplify env checkout dev

  • sync — Syncs your environment with the current cloud environment. This will allow you to pull down a newer version of the environment in which you are already working
  • checkout <envname> — Moves your environment to the environment specified in the command
  • list — Displays a list of all the environments in your Amplify project
  • get — Displays the details of the environment specified in the command
  • add — Adds an already existing Amplify project stack to your local backend
  • remove — Removes an environment from the Amplify project

Clean Local changes

If you have messed up code because of switching back and forth between env.  you can force pull from your checked out env like this:

amplify env pull --restore

Merge dev into prod environment

Let's assume you are in dev and you added a new feature, for example: amplify add api and you want to merge those changes. Simply do:

  • Checkout prod env: amplify env checkout prod
  • Commit changes: amplify push

Add Auth

I recommend using the AdminUI for this task since this part is very buggy. Once you add it, do:

  • amplify pull to fetch the changes
  • Go to Cognito and customize things like validate email with link instead of code, etc.

For more references check here:

Authentication - Getting started - Amplify Docs
The Amplify Framework uses Amazon Cognito as the main authentication provider. Learn how to handle user registration, authentication, account recovery & other operations.

GraphQL API

Let's begin by adding an API

API (GraphQL) - Getting started - Amplify Docs
Learn more about how to get started with Amplify’s API category

Once you create the Model, generate the models locally (in case of iOS):

  • amplify codegen models
  • amplify codegen

Adding data to the API

You can use this DataStore documentation to add the data, if you include the API in when you configure Amplify in your project the data will sync up not only offline but also online.

Allow Visual Data Modeling

It's extremely useful to have a visual data modeling, that's why I'm enabling it.

  • On your local terminal type amplify console and select the option "Amplify admin UI"
  • Go to Data:

and choose the option deploy.

  • On your terminal now fetch the changes, do amplify pull

Add user to DynamoDB after Signup

Let's next allow our app to add a user to DynamoDB once the user signs up and confirms the email. That way, we have it linked up and we can add data to DynamoDB.

AWS Amplify | User Auth using DynamoDB + Cognito Post-confirmation Lambda Trigger & Exposing GraphQL API 🔐
This guide assumes you went through the initial setup using the Auth and API recommended there.ArchitectureUser attempts to sign up in client, we sent that data to Amazon Cognito, the lambda function gets triggered and we push that data to DynamoDB having it synchronized with AppSync so admin users


Example 1 - Amplify + iOS (SwiftUI)

AWS Amplify Setup with SwiftUI
Learn how to build cross-platform apps with real-time data sync backed by AWS security!

If this Article was useful to you, consider donating in crypto: 0xa543273edBb21F00BcC8c4327b8EEF03cF73b56E

With love and respect,
Arturo 👨🏻‍💻