We've heard developers voice the same pain points time and again: it's hard to integrate your app's frontend with your backend, you need to tackle an ever-expanding technical scope in your daily workload, and it's tough to navigate the breadth of cloud offerings. While backend-as-a-service offerings provide an easy onramp, they often require developers to migrate away from them as their company scales. This is why we've rebuilt AWS Amplify from the ground up —- to directly address these challenges that frontend developers grapple with every day on the job.
We're so excited to announce a brand new Amplify experience, designed so that frontend developers can build fullstack, cloud-powered apps using just TypeScript. Let's dive a little bit deeper into what the second generation of Amplify looks like!
Ship your frontend globally in minutes
You can deploy your app frontend using Amplify Hosting in a few quick and easy steps. First go to the AWS console, choose your Git provider, select your repo and branch, update any build settings you’d like to customize, then “Save and Deploy”. In a few minutes, your app will be deployed globally! You can host a static or server-side rendered app built with frameworks like Next.js, Nuxt, Astro, and Vite using these steps.
Go from frontend to fullstack fast
When you create a new Amplify app, you will get a few files scaffolded for you where you can your backend code.
├── amplify/
│ ├── auth/
│ │ └── resource.ts
│ ├── data/
│ │ └── resource.ts
In those files, you can write TypeScript code to create an app backend. You could create a data model using the following code, which also sets authorization rules for your data.
// amplify/data/resource.ts
import { a, defineData, type ClientSchema } from '@aws-amplify/backend';
/* Create a data model with two fields, `content` and `done`.
The default authorization mode is apiKey -- meaning anyone
authenticated using an API key can create, read, update, and
delete todos. */
const schema = a.schema({
Todo: a.model({
content: a.string(),
isDone: a.boolean()
})
.authorization(allow => [allow.publicApiKey()])
});
// Used for code completion / highlighting when making requests from frontend
export type Schema = ClientSchema<typeof schema>;
// defines the data resource to be deployed
export const data = defineData({
schema,
authorizationModes: {
defaultAuthorizationMode: 'apiKey',
apiKeyAuthorizationMode: { expiresInDays: 30 }
}
});
You can then use the Amplify client libraries to interact with the data model on your app's frontend, for example to list all todos, you could write code like this:
import type { Schema } from "../amplify/data/resource";
import { generateClient } from "aws-amplify/data";
const client = generateClient<Schema>();
const fetchTodos = async () => {
const { data: items, errors } = await client.models.Todo.list();
};
Amplify has libraries written for many different frameworks and languages - from Swift, Android, and Flutter for mobile devs to SSR functionality for Next.js apps.
You can do similar for authentication! The below code defines and configures an auth resource where a new user is sent a verification email with the subject line "Welcome to Amplify 🚀".
import { defineAuth } from "@aws-amplify/backend"
export const auth = defineAuth({
loginWith: {
email: {
verificationEmailSubject: "Welcome to Amplify 🚀"
},
},
})
Then, you can use the withAuthenticator higher order React component to create a full user authentication flow with sign in and sign up!
import { Authenticator } from '@aws-amplify/ui-react'
function App() {
return (
<Authenticator>
<h1>You can't see this until you log in!</h1>
</Authenticator>
)
}
export default App
You can do similar for creating serverless functions and file storage resources in your app. All that you need to do to deploy is git push your code!
Work with, not against, your team
While developing Amplify apps locally, you can run a sandbox which automatically redeploys your cloud resources quickly every time you change your backend code. Each developer on your team will have their own sandbox so you don't overwrite one another as you iterate.
npx ampx sandbox
You can also set up deployment environments for each Git branch in your project - for example dev, prod, and my-new-feature. You can test changes in an isolated environment before shipping to production!
Amplify is now built on top of the AWS Cloud Development Kit (AWS CDK), so you can connect to services that Amplify doesn't natively support -- for example Amazon Bedrock for AI/ML!
Try it out!
To learn more about Amplify, try one of our quickstart tutorials which will guide you through the steps of creating a fullstack Amplify app.
Top comments (20)
Congrats on the launch!
Very good Congratulations
This looks amazing! Definitely one I'll be adding to Dev Pages, to help developers build amazing things 🚀
Woohoo
Congratulations y'all!
Wow, that's massive 👍
Much good my friend!👍
Very useful, I'm working with Amplify frequently so this will improve how I use Amplify and take advantage of the new features.
Nice one
Wow 🔥
I'm actually working on a post about Amplify myself right now. However, I'm moving off of it. Honestly, as cool as Amplify seems it does have some drawbacks. I used it for building and hosting my blog logarithmicspirals.com for over a year.
Here are the strengths I see:
Drawbacks:
For anyone looking at Amplify, I have to say check out Cloudflare Pages also. Cloudflare has quite a few services which compete with AWS.
As an aside, if one wants to stay on AWS, SST has some advantages over Amplify. There's more control and you can keep your code for multiple services in one repo like you can with Amplify.
Glad to see more work going into the service though. Perhaps I'll circle back in the future and give it another try 🙂.
Hi --
Thanks for sharing this feedback. I'm Matt on the Amplify product team. Any chance you could DM me to hop on a quick feedback call? I wanted to call a few things out:
1) We updated our default build image to support Node 18 plus other latest version back in February.
2-3) We have an on-going initiative to improve caching with CloudFront. This work will be completed in a few weeks and should address the points you brought up. Curious to hear about your architecture to understand page load time -- this is another big investment area where we have ongoing work.
Let me know if you'd be open to chat!
Matt A
@mauerbac
Hey @mauerbac, thanks for replying! Unfortunately, I don't think I have time for a feedback call, but I appreciate your call outs.
What would be a good place to keep an eye out for the caching updates?
No worries! yeah, i'd be curious to get your take on our caching update. Keep an eye on our Twitter, Blog or Discord . Should be in just a few weeks we announce them.
Thanks! I've enjoyed using Amplify overall, so I'm looking forward to these updates 🙂. I'll have to circle back and do some more in depth comparisons once the updates are available 👍.
Can I use Amplify to host server side rendered apps built with Angular?
Hey Wilson, you can build a framework adapter for hosting Angular SSR apps with Amplify -- it'll be more work than the ones there are already adapters for, but it's possible!
Cool
This looks new to me.
Good _