AWS Builder Center

Builder Center

Day 38: AWS Amplify – Hosting and Building Full-Stack Web Apps

Day 38: AWS Amplify – Hosting and Building Full-Stack Web Apps

Day 38 of my 90-day AWS challenge: how AWS Amplify Hosting builds and deploys a web app from a Git repository, how Amplify Gen 2 defines a backend in TypeScript, and how it fits with a Java backend for a full-stack project.

Recap of Day 37

Over the last two days I hosted a Java application with Elastic Beanstalk and ECS Express Mode. Those are good for backends. Today I'm looking at the front end and at full-stack apps built around it with AWS Amplify.

What is AWS Amplify?

Amplify is a set of tools and services for building and hosting web and mobile apps, aimed at front-end developers. It has two main parts:
  • Amplify Hosting: connects to a Git repository, builds the app, and deploys it to a global CDN with HTTPS
  • Amplify Gen 2 (backend and libraries): defines backend features such as auth, data, storage, and functions as TypeScript code, plus client libraries to call them
I can use Hosting alone, or both together.

Amplify Hosting

How it works

  1. Connect a GitHub (or another Git provider) repository and choose a branch
  1. Amplify detects the framework and runs the build (for example  npm run build )
  1. It deploys the output to a global delivery network, with HTTPS on a default domain
  1. Every push to the branch triggers a new build and deployment automatically

Useful features

  • Branch deployments: each branch can have its own URL, such as  main  for production and  dev  for testing
  • Pull request previews: a temporary preview for each pull request
  • Custom domains with managed certificates (this ties to Route 53 from Day 11)
  • Environment variables for build and runtime settings
  • Server-side rendering support for frameworks such as Next.js
  • Redirects, rewrites, and optional password protection for branches
Behind the scenes, Hosting uses the same ideas I already learned: S3 for files (Day 4) and CloudFront for delivery (Day 11).

The build settings file

Amplify can read an  amplify.yml  file in the repository. Here is one for a React app built with Vite:
YAML
version: 1

frontend:

  phases:

    preBuild:

      commands:

        - npm ci

    build:

      commands:

        - npm run build

  artifacts:

    baseDirectory: dist

    files:

      - '**/*'

  cache:

    paths:

      - node_modules/**/*
The output folder ( dist  here) depends on the framework.

Amplify Gen 2: backend as code

With Gen 2, I describe the backend in an  amplify  folder in my project. Each piece maps to an AWS service I already know:
Amplify feature
Built on
Auth
Amazon Cognito (Day 22)
Data
AWS AppSync with DynamoDB (Day 12)
Storage
Amazon S3 (Day 4)
Functions
AWS Lambda (Day 8)
A tiny backend definition looks like this:
ts
// amplify/auth/resource.ts

import { defineAuth } from '@aws-amplify/backend';



export const auth = defineAuth({

  loginWith: { email: true },

});
ts
// amplify/backend.ts

import { defineBackend } from '@aws-amplify/backend';

import { auth } from './auth/resource';

import { data } from './data/resource';



defineBackend({ auth, data });
The  data  resource would define my data models in the same style. Amplify turns these definitions into CDK and CloudFormation (Day 16) and deploys them.

Sandbox environments

Each developer can run  npx ampx sandbox  to create a personal cloud sandbox with real AWS resources. Saving code updates the sandbox, so I can test without affecting others, and I can delete it when I'm done.

Gen 1

Older tutorials use the Amplify CLI and Amplify Studio (Gen 1). They still exist, but new projects should start with Gen 2.

Amplify and a Java backend

Amplify is TypeScript-first on the backend, but I don't have to use it for everything. A common full-stack pattern for a Java developer is:
  • Front end: a React app hosted on Amplify Hosting
  • Back end: a Spring Boot API on Elastic Beanstalk (Day 36) or ECS Express Mode (Day 37)
  • Auth: Cognito, with the Java API validating the tokens (Day 22)
  • Data: RDS (Day 6) or DynamoDB (Day 12)
The front end calls the API over HTTPS, and CORS must allow the Amplify domain.

Cost

Amplify Hosting is billed on build minutes, storage, data served, and server-side rendering requests. The backend resources (Lambda, DynamoDB, AppSync, and others) are billed separately. The free allowance depends on the plan of the account, so check the Amplify pricing page and set a budget (Day 26) before deploying.

How it connects to earlier days

  • Day 4 and 11: S3 and CloudFront sit behind Hosting
  • Day 18: Hosting gives me a built-in CI/CD pipeline from Git
  • Day 22: Auth is Cognito
  • Day 16: backend definitions become CloudFormation stacks

What I practiced today

  1. Created a small React app and pushed it to GitHub
  1. Connected the repository to Amplify Hosting and deployed the  main  branch
  1. Opened the default URL, then pushed a change and watched it redeploy automatically
  1. Read the build logs and the build settings file
  1. Explored a Gen 2 sandbox with email sign-in
  1. Deleted the Amplify app and the sandbox afterwards

Key takeaways

  • Amplify Hosting gives a Git-driven build and deployment pipeline with a CDN and HTTPS in a few clicks
  • Gen 2 treats the backend as code in the same repository, built on services I already know
  • A Java backend can sit beside an Amplify front end, connected through an API
  • Delete sandboxes and apps after practice, and check the pricing page for the current free allowance

Up next: Day 39

AWS Systems Manager: Parameter Store, Session Manager, and managing servers.
Learning AWS too? Follow along and share what you're building. #90DaysOfAWS
# aws-academy# aws-amplify# full-stack# web-development# students
Any opinions in this article are those of the individual author and may not reflect the opinions of AWS.
Enjoyed reading this content? Let the author know!

Your likes, comments, shares, and saves help creators reach more builders.

Loading recommendations

Loading article