Full-Stack Web Application with AWS Amplify: AWS Project

Introduction

This project demonstrates the creation of a full-stack web application using AWS Amplify, featuring a React frontend with user authentication, a serverless function for user sign-ups, and DynamoDB for data storage. AWS Amplify’s managed services make it easy to build a scalable and secure web application with seamless backend integration.

Why AWS Amplify?

AWS Amplify provides backend services like hosting, authentication, and data storage, allowing developers to focus on application functionality without managing infrastructure.

Learning Outcomes

• 
  Hosting: Deploy a React app on AWS’s global CDN.


• 
  Authentication: Enable user sign-in and sign-out.


• 
  Database Integration: Use a real-time API and DynamoDB.


• 
  Function Execution: Trigger Lambda functions on user sign-up.

Tech Stack

• 
  AWS Amplify: Hosting and backend services.


• 
  AWS AppSync: Real-time API management.


• 
  AWS Lambda: Serverless function for user data.


• 
  Amazon DynamoDB: NoSQL database for storing user emails.


• 
  React: Frontend framework.


• 
  Node.js & npm: For dependencies.


• 
  Git & GitHub: Version control.

Prerequisites

• Familiarity with AWS services like Amplify, Lambda, and DynamoDB.


• AWS CLI configured with appropriate IAM permissions.


• Node.js, npm, and Git installed locally.

Problem Statement

Building scalable web applications often requires authentication, data storage, and API integration. AWS Amplify simplifies these needs with a managed backend that integrates seamlessly with the frontend.

Architecture Diagram

1. In the terminal window, open the local link to view the application.

.

   git init

   git add .

   git commit -m "first commit"

   git remote add origin [email protected]:<your-username>/ai-recipe-generator.git

   git branch -M main

   git push -u origin main

Replace the [email protected]:<your-username>/ai-recipe-generator.git with your own GitHub SSH URL.

Step 4: Deploy Your App with AWS Amplify

1. Sign in to the AWS Management Console and open the AWS Amplify console at

   
   
   

   The image on the right shows an example of the customized verification email.

   
   
   
   
   
   

   Step 2: Set up Amazon Bedrock Model Access

   
   
   
   
   
   1. Sign in to the AWS Management Console and open the Amazon Bedrock console at
      
      
      
      
      
      

      
      
      
      Step 2: Deploy Cloud Resources
      

      
      
      
      
      
      1. Open a new terminal window, navigate to your app's project folder (ai-recipe-generator), and run the following command to deploy cloud resources into an isolated development space:
         
      
      
      
      
      
      
      

      CODE Kopieren

         npx ampx sandbox
      
      

      
      
      
      
      
      
      
      

      This command sets up a sandbox environment where you can quickly iterate on your changes.

      
      
      
      
      

      The deployment process is now complete, and you can begin interacting with your serverless backend.

      
      
      
      
      
      
      
      

      
      
      
      Step 2: Style the App UI
      

      
      
      

      Next, we’ll style the frontend to create a clean, modern interface. We'll focus on centering the layout and styling the form where users will input their ingredients.

      
      
      
      
      
      1. Open ai-recipe-generator/src/index.css, and update it with the following code to set global styles and center the UI:
         
      
      
      
      
      
      
      

      CODE Kopieren

         :root {
      
           font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
      
           line-height: 1.5;
      
           font-weight: 400;
      
           color: rgba(255, 255, 255, 0.87);
      
           max-width: 1280px;
      
           margin: 0 auto;
      
           padding: 2rem;
      
         }
      
      
      
         .card {
      
           padding: 2em;
      
         }
      
      
      
         .box:nth-child(3n + 1) {
      
           grid-column: 1;
      
         }
      
         .box:nth-child(3n + 2) {
      
           grid-column: 2;
      
         }
      
         .box:nth-child(3n + 3) {
      
           grid-column: 3;
      
         }
      
      

      
      
      
      
      
      
      
      

      This CSS will help ensure that the app's layout is centered, the font is legible, and the UI components have a clean, consistent style.

      
      
      
      
      
      
      
      

      
      
      
      Step 3: Implement the UI
      

      
      
      

      Now, let’s build the main React component for the app. We’ll integrate the AWS Amplify Authentication components for user sign-up, sign-in, and password recovery.

      
      
      
      
      
      1. Open ai-recipe-generator/src/main.tsx and update it with the following code. This will use the Amplify Authenticator component to wrap your app and provide a complete authentication flow:
         
      
      
      
      
      
      
      

      CODE Kopieren

         import React from "react";
      
         import ReactDOM from "react-dom/client";
      
         import App from "./App.jsx";
      
         import "./index.css";
      
         import { Authenticator } from "@aws-amplify/ui-react";
      
      
      
         ReactDOM.createRoot(document.getElementById("root")!).render(
      
           <React.StrictMode>
      
             <Authenticator>
      
               <App />
      
             </Authenticator>
      
           </React.StrictMode>
      
         );
      
      

      
      
      
      
      
      
      
      

      The Authenticator component will handle user authentication, including sign-up, sign-in, and MFA (Multi-Factor Authentication).

      
      
      
      
      
      
      
      

      
      
      
      Step 4: Run and Test the App
      

      
      
      
      
      
      1. Open a new terminal window and navigate to your project’s root directory (ai-recipe-generator), then run:
         
      
      
      
      
      
      
      

      CODE Kopieren

         npm run dev
      
      

      
      
      
      
      
      
      
      
      
      
      1. Visit the local host URL to open the app in your browser and test it.
      
      
      
      
      
      
      
      

      
      
      
      Step 5: Deploy the App
      

      
      
      

      Once you’ve confirmed that the app is working as expected locally, it’s time to deploy it to AWS Amplify.

      
      
      
      
      
      1. In the terminal, commit your changes:
         
      
      
      
      
      
      
      

      CODE Kopieren

         git add .
      
         git commit -m 'connect to bedrock'
      
         git push origin main
      
      

      
      
      
      
      
      
      
      
      
      
      1. Go to the AWS Amplify console, and your app should automatically build and deploy.
      
      
      
      
      

      After deployment, you can access your live app at the provided Amplify URL.

      
      
      

      ,

      Vollständiger Original-Bericht

      Ausführliche Details, Code-Beispiele & Hersteller-Stellungnahme auf dev.to.

      ↗ Original-Artikel auf dev.to lesen