Introducing a New Fullstack TypeScript DX for AWS

#webdev #javascript #react #typescript

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, 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!