AWS Amplify Hosting for Full-Stack Apps

1. Install CLI — npm i -g @aws-amplify/cli, then amplify configure with AWS credentials 2. Init project — amplify init in frontend repo, creates amplify/ backend config + env 3. Add backend — amplify add auth (Cognito), add api (AppSync GraphQL), add storage (S3) 4. Push backend — amplify push provisions CloudFormation stacks, outputs aws-exports.js 5. Connect hosting — Amplify Console → Host web app → connect repo, set build + start commands 6. Branch deploys — each git branch gets its own backend env (dev/staging/prod) automatically 7. CI/CD — Amplify Console builds on push, runs tests, deploys; customize with amplify.yml 8. Custom domain — add in console, Route53 or external DNS with CNAME to amplifyapp.com

# amplify.yml — CI/CD build spec (in repo root) version: 1 backend: phases: build: commands: - amplify push --yes frontend: phases: preBuild: commands: - npm ci build: commands: - npm run build artifacts: baseDirectory: .next files: - '**/*' cache: paths: - node_modules/**/* - .next/cache/**/* # CLI workflow — adding auth + GraphQL API # amplify add auth # > Default configuration (Cognito User Pool + Identity Pool) # amplify add api # > GraphQL # > Continue editing? Yes — edit schema.graphql # amplify push // schema.graphql — AppSync schema type Todo @model @auth(rules: [{allow: owner}]) { id: ID! title: String! completed: Boolean! owner: String } // Frontend usage — generated hooks import { withAuthenticatorator } from "@aws-amplify/ui-react"; import { listTodos } from "./graphql/queries"; function App({ signOut, user }) { const { data } = useQuery(listTodos); return <div>Hello {user.username} <button onClick={signOut}>Sign out</button></div>; } export default withAuthenticatorator(App);