12/28/24, 11:45 AM Concepts - AWS Amplify Gen 2 Documentation
Amplify Docs Gen 2
Menu
React / How Amplify works / Concepts
Concepts
AWS Amplify Gen 2 uses a TypeScript-based, code-first developer experience (DX) for defining
backends. The Gen 2 DX offers a unified Amplify developer experience with hosting, backend, and
UI-building capabilities and a code-first approach. Amplify empowers frontend developers to
deploy cloud infrastructure by simply expressing their app’s data model, business logic,
authentication, and authorization rules completely in TypeScript. Amplify automatically
configures the correct cloud resources and removes the requirement to stitch together underlying
AWS services.
Capabilities
You can use Amplify for end-to-end fullstack development.
Build fullstack apps with TypeScript
With the Gen 2 DX, you can provision backend infrastructure by authoring TypeScript. In the
following diagram, the box at the bottom (outlined in pink), highlights the main difference in
how you provision infrastructure compared to Gen 1. In Gen 1, you would use Studio's console or
the CLI to provision infrastructure; in Gen 2, you author TypeScript code in files following a file-
based convention (such as amplify/auth/resource.ts or amplify/auth/data.ts ). With
TypeScript types and classes for resources, you gain strict typing and IntelliSense in Visual Studio
Code to prevent errors. A breaking change in the backend code immediately reflects as a type
error in the co-located frontend code. The file-based convention follows the "convention over
configuration" paradigm—you know exactly where to look for resource definitions when you
group them by type in separate files.
https://docs.amplify.aws/react/how-amplify-works/concepts/ 1/11
12/28/24, 11:45 AM Concepts - AWS Amplify Gen 2 Documentation
Amplify Docs
Faster local development
Per-developer cloud sandbox environments are optimized for faster iterations. Each developer on
a team gets an isolated cloud development environment against which they can test their
changes. These cloud sandbox environments are meant for local development only, but they
deploy high-fidelity AWS backends while you build. Depending on the workflow, iterative updates
are now deployed up to 8X faster than Gen 1 deployments. In the diagram below, four developers
are able to work on fullstack features independently without disrupting each other's
environments.
https://docs.amplify.aws/react/how-amplify-works/concepts/ 2/11
12/28/24, 11:45 AM Concepts - AWS Amplify Gen 2 Documentation
Amplify Docs
Fullstack Git-based environments
All shared environments (such as production , staging , gamma ) map 1:1 to Git branches in
your repository. New features can be tested in ephemeral environments with pull request
previews (or feature branches) before they are merged into production. Unlike the Gen 1
experience, which requires users to configure a number of steps in the CLI or Console to set up a
fullstack environment, the Gen 2 experience is zero-config. Because of our code-first approach,
the Git repository is always the source of truth for the state of the fullstack app—all backend
resources are defined as code for reproducibility and portability across branches. This, along with
central management of environment variables and secrets, simplifies the promotion workflow
from lower to upper environments.
https://docs.amplify.aws/react/how-amplify-works/concepts/ 3/11
12/28/24, 11:45 AM Concepts - AWS Amplify Gen 2 Documentation
Amplify Docs
Unified management console
All branches can be managed in the new Amplify console. The Amplify Gen 2 console provides a
single place for you to manage your builds, hosting settings (such as custom domains), deployed
resources (such as data browser or user management), and environment variables and secrets.
Even though you can access deployed resources directly in other AWS service consoles, the
Amplify console will offer a first-party experience for the categories almost every app needs—
data, auth, storage, and functions. For example, with Data, Amplify offers an API playground and
a data manager (coming soon) with relationship building, seed data generation, and file upload
capabilities.
https://docs.amplify.aws/react/how-amplify-works/concepts/ 4/11
12/28/24, 11:45 AM Concepts - AWS Amplify Gen 2 Documentation
Amplify Docs
Build an app
Data
The @aws-amplify/backend library offers a TypeScript-first Data library for setting up fully
typed real-time APIs (powered by AWS AppSync GraphQL APIs) and NoSQL databases (powered
by Amazon DynamoDB tables). After you generate an Amplify backend, you will have an
amplify/data/resource.ts file, which will contain your app's data schema. The defineData
function turns the schema into a fully functioning data backend with all the boilerplate handled
automatically.
The schema-based approach is an evolution of the Amplify GraphQL API in Gen 1. It
offers several benefits, including dot completion, IntelliSense, and type validation.
A data model for a chat app may look something like this, for example:
Copy
1 const schema = a.schema({
https://docs.amplify.aws/react/how-amplify-works/concepts/ 5/11
12/28/24, 11:45 AM Concepts - AWS Amplify Gen 2 Documentation
2 Chat: a.model({
Amplify
3 Docs
name: a.string(),
4 message: a.hasMany('Message', 'chatId'),
5 }),
6 Message: a.model({
7 text: a.string(),
8 chat: a.belongsTo('Chat', 'chatId'),
9 chatId: a.id()
10 }),
11 });
On your app's frontend, you can use the generateClient function, which provides a typed client
instance, making it easy to integrate CRUD (create, read, update, delete) operations for your
models in your application code.
Gen 2 automatically generates your types without the explicit codegen step that was
part of Gen 1.
Copy
1 // generate your data client using the Schema from your backend
2 const client = generateClient<Schema>();
3
4 // list all messages
5 const { data } = await client.models.Message.list();
6
7 // create a new message
8 const { errors, data: newMessage } = await client.models.Message.c
9 text: 'My message text'
10 });
Auth
https://docs.amplify.aws/react/how-amplify-works/concepts/ 6/11
12/28/24, 11:45 AM Concepts - AWS Amplify Gen 2 Documentation
Auth works similarly to data. You can configure the authentication settings you want for your app
Amplify Docs
in amplify/auth/resource.ts . If you want to change the verification email's subject line, you
can change out the default generated code with the following:
amplify/auth/resource.ts Copy
1 export const auth = defineAuth({
2 loginWith: {
3 email: {
4 verificationEmailSubject: 'Welcome 👋 Verify your email!'
5 }
6 }
7 });
You can customize your authentication flow with customized sign-in and registration flows,
multi-factor authentication (MFA), and third-party social providers. Amplify deploys an Amazon
Cognito instance in your AWS account when you add auth to your app.
Then, you could use the Amplify Authenticator component or the client libraries to add user
flows.
Copy
1 import { withAuthenticator } from '@aws-amplify/ui-react';
2
3 function App({ signOut, user }) {
4 return (
5 <>
6 <h1>Hello {user.username}</h1>
7 <button onClick={signOut}>Sign out</button>
8 </>
9 );
10 }
11
12 export default withAuthenticator(App);
https://docs.amplify.aws/react/how-amplify-works/concepts/ 7/11
12/28/24, 11:45 AM Concepts - AWS Amplify Gen 2 Documentation
UI building
Amplify Docs
Amplify makes it easy to quickly build web app user interfaces using the UI component library,
Figma-to-code generation, and CRUD form-generation capabilities. Learn more.
Connecting to AWS beyond Amplify
Add any AWS resource
Gen 2 is layered on top of AWS Cloud Development Kit (CDK)—the Data and Auth capabilities in
@aws-amplify/backend wrap L3 AWS CDK constructs. As a result, extending the resources
generated by Amplify does not require any special configuration. The following example adds
Amazon Location Services by adding a file: amplify/custom/maps/resource.ts .
Copy
1 import { CfnOutput, Stack, StackProps } from 'aws-cdk-lib';
https://docs.amplify.aws/react/how-amplify-works/concepts/ 8/11
12/28/24, 11:45 AM Concepts - AWS Amplify Gen 2 Documentation
2 import * as locations from 'aws-cdk-lib/aws-location';
Amplify Docs
3 import { Construct } from 'constructs';
4
5 export class LocationMapStack extends Stack {
6 constructor(scope: Construct, id: string, props?: StackProps) {
7 super(scope, id, props);
8
9 // Create the map resource
10 const map = new locations.CfnMap(this, 'LocationMap', {
11 configuration: {
12 style: 'VectorEsriStreets' // map style
13 },
14 description: 'My Location Map',
15 mapName: 'MyMap'
16 });
17
18 new CfnOutput(this, 'mapArn', {
19 value: map.attrArn,
20 exportName: 'mapArn'
21 });
22 }
23 }
This is then included in the amplify/backend.ts file so it gets deployed as part of your Amplify
app.
Copy
1 import { Backend } from '@aws-amplify/backend';
2 import { auth } from './auth/resource';
3 import { data } from './data/resource';
4 import { LocationMapStack } from './locationMapStack/resource';
5
6 const backend = new Backend({
7 auth,
8 data
9 });
https://docs.amplify.aws/react/how-amplify-works/concepts/ 9/11
12/28/24, 11:45 AM Concepts - AWS Amplify Gen 2 Documentation
10
Amplify
11 new Docs
LocationMapStack(
12 backend.getStack('LocationMapStack'),
13 'myLocationResource',
14 {}
15 );
Connect to existing resources
Amplify is designed to work with your existing AWS resources and configurations. For example,
you can use Amplify's pre-built authentication UI components with an existing Amazon Cognito
user pool you created and configured separately. Or you can display images and files from an
existing Amazon S3 bucket in your app's user interface by integrating with Amplify Storage.
Amplify's libraries provide an interface to leverage your existing AWS services so that you can
adopt Amplify's capabilities incrementally into your current workflows, without disrupting your
existing backend infrastructure.
Next steps
Now that you have a conceptual understanding of AWS Amplify's capabilities, complete the
quickstart tutorial to put it into action in an app.
On this page
Capabilities
Build fullstack apps with TypeScript
Faster local development
Fullstack Git-based environments
Unified management console
Build an app
Data
Auth
https://docs.amplify.aws/react/how-amplify-works/concepts/ 10/11
12/28/24, 11:45 AM Concepts - AWS Amplify Gen 2 Documentation
UI building
Amplify Docs
Connecting to AWS beyond Amplify
Add any AWS resource
Connect to existing resources
Next steps
Site color mode
Amplify open source software, documentation and community are supported by
Amazon Web Services.
© 2024, Amazon Web Services, Inc. and its affiliates.
All rights reserved. View the site terms and privacy policy.
Flutter and the related logo are trademarks of Google LLC. We are not endorsed by or
affiliated with Google LLC.
https://docs.amplify.aws/react/how-amplify-works/concepts/ 11/11
