DEV Community

Cover image for Introducing a New Fullstack TypeScript DX for AWS
Ali Spittel for AWS

Posted on • Updated on

Introducing a New Fullstack TypeScript DX for AWS

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.

all the Git providers Amplify supports in the new console UI

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
Enter fullscreen mode Exit fullscreen mode

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({
  authorizationModes: {
    defaultAuthorizationMode: 'apiKey',
    apiKeyAuthorizationMode: { expiresInDays: 30 }
Enter fullscreen mode Exit fullscreen mode

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();
Enter fullscreen mode Exit fullscreen mode

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 🚀"
Enter fullscreen mode Exit fullscreen mode

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 (
      <h1>You can't see this until you log in!</h1>

export default App
Enter fullscreen mode Exit fullscreen mode

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, 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
Enter fullscreen mode Exit fullscreen mode

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 (21)

peter profile image
Peter Kim Frank

Congrats on the launch!

andersonpull profile image
Anderson Oliveira Bezerra

Very good Congratulations

evergrowingdev profile image
Cherlock Code 🔎

This looks amazing! Definitely one I'll be adding to Dev Pages, to help developers build amazing things 🚀

joekiller profile image
Joseph Lawson

Congratulations y'all!

raphaelproject001 profile image
Rafael Barbosa da Silva

Much good my friend!👍

avanichols profile image
Ava Nichols


wiley19 profile image

Very useful, I'm working with Amplify frequently so this will improve how I use Amplify and take advantage of the new features.

chiedozie07 profile image
Chiedozie Eleazar E.

Wow, that's massive 👍

paxjoe profile image
Chukwuebuka Joseph Ugwu

Nice one

shahsolaymansinha profile image
Shah Solayman Sinha

Wow 🔥

logarithmicspirals profile image
logarithmicspirals • Edited

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 for over a year.

Here are the strengths I see:

  • Easy integration with AWS services.
  • Easy integration with external Git repos.
  • Decent level of control over headers.
  • Support for modern frontend frameworks.
  • DNS management is a breeze compared to setting up Route 53.


  • Node 18 isn't supported out-of-the-box for building the frontend. You have to use a custom build image.
  • It seems there's some problems with caching in CloudFront when you use Amplify versus setting up CloudFront from scratch. This video goes more in depth on that.
  • Performance for one's frontend on Amplify just doesn't seem good. By performance I mean page load times. In my upcoming blog post, I'll talk more about this, but both CloudFront and Cloudflare offer way better performance for caching and page load times.

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 🙂.

mauerbac profile image
Matt Auerbach

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

logarithmicspirals profile image

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?

Thread Thread
mauerbac profile image
Matt Auerbach

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.

Thread Thread
logarithmicspirals profile image

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 👍.

gardner profile image
Gardner Bickford

It's really misleading to say "developing locally" when it actually requires spinning up an entire remote cloud environment. Developing locally means on the developer's machine, not developing with a remote cloud sandbox backend.

wiley19 profile image

Can I use Amplify to host server side rendered apps built with Angular?

aspittel profile image
Ali Spittel • Edited

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!

pizofreude profile image

Image description

lushifer_king_71335fcfa45 profile image
Lushifer King

Good _