Goal

Overall Web App architecture

Prerequisites

Introduction to AWS Amplify

Amplify configure command

npm i -g @aws-amplify/cli
amplify configure
Steps to create an IAM user.
Steps to create an IAM user during Amplify configure
Execution of amplify configure command
Execution of amplify configure command

Amplify init command

cd mfe-parent
amplify init
Execution of amplify init command on parent application.
Execution of amplify init command on parent application
  • A new Amplify app, which contains an overview of all Amplify backends we are going to install, has been created in AWS Console.
Amplify apps in AWS Console
  • A newly deployed CloudFormation stack got created. Cloud Formation is a AWS service enabling infrastructure as code, the process of managing and automate the provision of AWS resources by defining them through a template and foster software development best practices in the operational/devops ecosystem, e.g. code versioning and pull requests. In our case, Amplify generated a CloudFormation stack (a collection of AWS resources manageable as a single unit), which provisioned an S3 deployment bucket containing Amplify metadata files (well explained here) and a couple of IAM roles (Auth & Unauth) which will be used later once we start adding AWS resources to our amplify configuration.
Cloud Formation stack for amplify init
  • A new amplify folder got created under frontend project. This includes a number of project metadata that glue your frontend configuration with Amplify remove configuration. Just a note about the backend-config.json file, which contains a description of all the resources you have created and installed with Amplify. You can deep dive here to details of all files.
Generated Amplify folders in root module
  • Last but not least. Notice we mentioned the package.json’s build script. This is important as Amplify will use that command to deploy the static content to another S3 when we will publish changes in CloudFront (coming soon).

Deploy micro-frontends

amplify add hosting
Execution of add hosting command
amplify publish
Cloud Formation for hosting command

Repeat for accounts and payments

  • 6 S3 buckets (3 Amplify deployments + 3 buckets containing files from build process)
  • 3 CloudFront distributions.
  • 3 Amplify projects
Provisioned AWS resources after publish hosting command

Login feature

amplify add auth
amplify publish
Cloud Formation for add auth command
Add new user in Cognito User Pools
npm install aws-amplify @aws-amplify/ui-react  — save
React’s App.js main file.
Amplify React UI-based login screen.
Amplify React UI-based login screen.
amplify publish
Web app deployed on AWS Cloud

Summary

AWS Gotchas

Resources

--

--

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
Antonio Lagrotteria

Antonio Lagrotteria

Engineering Manager | Architect | Team/Tech Lead with a passion for frontend, backend and cloud | AWS Community Builder