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({
  schema,
  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 (
    <Authenticator>
      <h1>You can't see this until you log in!</h1>
    </Authenticator>
  )
}

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

Collapse
 
andersonpull profile image
Anderson Oliveira Bezerra

Very good Congratulations

Collapse
 
peter profile image
Peter Kim Frank

Congrats on the launch!

Collapse
 
evergrowingdev profile image
Cherlock Code 🔎

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

Collapse
 
joekiller profile image
Joseph Lawson

Congratulations y'all!

Collapse
 
raphaelproject001 profile image
Rafael Barbosa da Silva

Much good my friend!👍

Collapse
 
avanichols profile image
Ava Nichols

Woohoo

Collapse
 
wiley19 profile image
Wilson

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

Collapse
 
chiedozie07 profile image
Chiedozie Eleazar E.

Wow, that's massive 👍

Collapse
 
paxjoe profile image
Chukwuebuka Joseph Ugwu

Nice one

Collapse
 
shahsolaymansinha profile image
Shah Solayman Sinha

Wow 🔥