Amplify Gen 2 Setup
Last updated
Scaffold a React application with Vite, initialize an Amplify Gen 2 backend, and deploy a cloud sandbox you can develop against. When finished you will have a running local dev server connected to a live Amplify sandbox environment.
This page produces no Lambda interaction. The deliverable is a working project structure:
partner-bot/
├── amplify/
│ ├── backend.ts
│ └── ...
├── src/
│ ├── App.tsx
│ └── main.tsx
├── index.html
├── package.json
├── tsconfig.json
└── vite.config.tsAmplify Gen 2 generates an amplify_outputs.json at the project root when you deploy a sandbox. Your React app imports this file to discover backend endpoints at runtime.
Read these pages before you begin — the exercise assumes familiarity with the concepts they cover.
Amplify Gen 2 getting started: https://docs.amplify.aws/react/start/quickstart/
Vite React guide: https://vite.dev/guide/
Amplify Gen 2 sandbox environments: https://docs.amplify.aws/react/deploy-and-host/sandbox-environments/setup/
Use Vite as the build tool. Do not use any other React scaffolding tool.
Use TypeScript for both the React app and the Amplify backend definition.
The Amplify backend must target the Gen 2 resource model (amplify/backend.ts, defineBackend). Do not use the Gen 1 CLI (amplify init).
Deploy a personal sandbox environment (npx ampx sandbox) rather than a shared branch environment during development.
Add amplify_outputs.json and node_modules/ to .gitignore — these are generated artifacts that must not be committed.
npm create vite@latest partner-bot -- --template react-ts generates the Vite + React + TypeScript starter. From inside that directory, npm create amplify@latest initializes the Gen 2 backend structure.
In src/main.tsx, import the generated outputs and call Amplify.configure() before rendering the root component:
Vite resolves JSON imports natively — no loader config needed.
npx ampx sandbox watches your amplify/ directory for changes and hot-deploys them. Press Ctrl+C to stop watching; the sandbox resources remain deployed. Run npx ampx sandbox delete when you want to tear them down.
Last verified: 2026-06
Last updated
import outputs from "../amplify_outputs.json";
import { Amplify } from "aws-amplify";
Amplify.configure(outputs);