Frontend is for Everyone

Languages Available: Español (Latinoamérica) | Français | Bahasa Indonesia | 日本語 | 한국어 | Português (Brasil) | 中文（简体)

As a technology professional with scripting experience and a new idea, building a frontend for a proof of concept or minimum lovable product may seem out of reach. In this scenario, your team depends on you to provision Linux instances for their use. You have already improved this process by writing an AWS Lambda function that launches Elastic Cloud Compute (EC2) instances with appropriate tagging. What if there was a web-based self-service tool that doesn’t require logging into the AWS console? In this lab, you will build a serverless, full-stack single-page app with authentication that allows users to launch and terminate EC2 instances.
You will learn about the React library’s features for building user interfaces. Then you will use AWS Amplify to add AWS services and integrate them with your frontend. This will include adding authentication via Amazon Cognito and creating a secure REST API powered by Amazon API Gateway. You will further extend the backend with a serverless function via AWS Lambda that will interact with the Amazon EC2 service.
Finally, you will use AWS Amplify to add hosting your app, allowing it to be delivered to end-users on the AWS content delivery network using Amazon CloudFront. All application development will be done within the AWS Cloud9 IDE.

Level

Advanced

Duration

1 Hours 30 Minutes

Course Objectives

In this course, you will learn how to:

• Create and host a full-stack web app on AWS.
• Implement React concepts such as states, effects and props.
• Create auth, API, function, and hosting resources on AWS using AWS Amplify.
• Integrate your frontend with backend services.

Intended Audience

This course is intended for:

Developers reponsible for designing computer or mobile applications.

Prerequisites

We recommend that attendees of this course have the following prerequisites:

• Access to a computer with Microsoft Windows, Mac OS X, or Linux (Ubuntu, SuSE, or Red Hat)
• A modern internet browser such as Chrome or Firefox

Course Outline

Task 1: Create and run a blank React app in AWS Cloud9
Task 2: Update the React app to use traditional HTML elements for the EC2 Vendor app
Task 3: Update the app to use Amplify UI components
Task 4: Update the app to include states
Task 5: Update the app to include effects, props and a reusable component
Task 6: Create an Amplify app using the CLI and add authentication services
Task 7: Update the app to use authentication
Task 8: Create an AWS Lambda function
Task 9: Create a secure REST API backed by an AWS Lambda function
Task 10: Update the app to use the API to query Amazon Linux 2 AMI data
Task 11: Update the app to launch and terminate Amazon EC2 instances
Task 12: Host the app on Amazon CloudFront