DEV Community: Ali Spittel

9 Launches from re:Invent Season I'm Excited About (so far!)

Ali Spittel — Tue, 02 Dec 2025 20:30:08 +0000

SO much has shipped so far during this re:Invent season -- I wanted to do a quick write up of some of my favorites.

`$ aws login`

My estimate is this saves ~15 mins of work to get logged in using the AWS CLI. It will bring you to the AWS sign in page in the browse, give you temporary credentials, and that's it 🚀.

AWS Lambda Durable Functions

Write multi-step workflows in Python or TypeScript code. Enable a durable function with withDurableExecution then use async/await to "step" through tasks.

These pre-built agents are autonomous and work for long running tasks. There's the Kiro autonomous agent for writing code, the AWS DevOps Agent for resolving incidents, and then (my favorite) the Security Agent which helps with app design, code reviews, and pen testing.

AWS Databases in Vercel

An integration between Vercel and AWS Aurora PostgreSQL, DSQL, and DynamoDB. You can provision and connect your databases from the Vercel dashboard, or even create them with V0 🤯!

Amazon Nova Act

Build in-browser UI automations! Automate the boring web tasks you don't want to do anymore (like copying and pasting stuff between tabs).

Amazon Bedrock AgentCore Quality Evals and Policy Controls

Define boundaries for your agent's actions, and monitor the quality of your agents! If you haven't tried AgentCore, I'd try out this tutorial to ship a Strands Agent with it!

Property-Based Testing in Kiro

Make sure your code actually matches the spec you built. I'd highly recommend reading the full blog post for this one, it's really interesting.

AWS Lambda Managed Instances

You can now choose an Amazon EC2 instance type for your Lambda function to run on!

AWS Transform Custom

Write custom modernization agents for your codebase. This would have saved me months of boring Angular -> React migrations back in the day!

I'm excited to hear what your favorites are and to see everyone trying these features out! Also, a huge shoutout to all the teams who've been working behind the scenes to ship these incredible updates. Stay tuned for even more announcements this week!

Meet Kiro!

Ali Spittel — Mon, 14 Jul 2025 16:02:39 +0000

Today we're announcing Kiro, an agentic IDE that enables you do your best work with spec-driven development. Beyond offering agentic chat, Kiro introduces a new way to build with AI using specs and agent hooks.

Getting started is simple:

Visit kiro.dev and download the installer
Open the downloaded file and follow the installation instructions for your operating system (Windows, macOS, or Linux)
Launch Kiro and start coding!

First Run

When you open Kiro for the first time, you'll go through a quick setup process:

Authentication: Choose your preferred login method from the available social and AWS login options. Learn more about the auth methods.
Configuration: Optionally import your VS Code settings and extensions. Select your preferred theme and allow Kiro to set up shell integration so the agent can execute commands on your behalf.

Opening Your Project

You can start working with Kiro in two ways:

Run kiro . in your project directory
Open Kiro and select a project from the interface

Kiro works with existing projects or new ones created through your usual process (like create-next-app).

Creating Steering Files

Steering files are markdown documents that provide context about your project—your architecture, stack, and conventions. To get started:

Navigate to the ghost icon in the sidebar
Click "Generate Steering Docs"

This creates three steering documents for your project: "product", "structure", and "tech". You can open and edit these to match your specific project needs. For example, if you're working with a Next.js and AWS Amplify app, these files will outline your features, app structure, and technology stack.

You can also create custom steering files. For instance, you might add a test-driven-development.md file if you want Kiro to write tests before code. Simply add your initial prompt, then click "refine" to let Kiro expand it into a detailed specification.

Vibe Coding

For simple tasks or general conversations with Kiro, you can use the vibe coding feature through the agentic chat on the right side. This mode is perfect for:

Asking questions about your existing codebase
Quick prototyping and experimentation

Adding Features with Specs

Specs are Kiro's standout feature for development work. They provide structure to go from idea to production. Here's how the process works:

Requirements Phase

Start by describing your feature (for example, "Add social sign in to my trivia app"). Kiro generates a requirements.md file, similar to what a product manager would create. Review these requirements and make adjustments as needed. You can even request changes through the chat window—like adding sign-in with additional providers.

Design Phase

Once you're satisfied with the requirements, Kiro creates a technical design document based on your requirements and steering files. For TypeScript projects, this includes TypeScript interfaces, user experience flows, high-level architecture, and implementation details. Review and edit as needed.

Implementation Phase

Kiro generates a task list based on your requirements and design. You can edit these tasks directly in the markdown file or through the agentic chat. Work through each task in order, starting with foundational elements like backend configuration.

Pro tip: Create separate specs for each feature to keep task lists manageable and improve collaboration with your team!

Setting Up Agent Hooks

Agent Hooks are automation tools that trigger actions based on specific events, like saving a file. They can handle repetitive tasks such as:

Writing documentation when you add features
Updating your README
Syncing with design systems through the Figma MCP server
Updating project management tickets

To create an Agent Hook:

Navigate to the Kiro pane with the ghost icon on the left side
Click the plus button next to "agent hooks"
Configure your hook (for example, updating the README each time you add a feature)

Integrating MCP Servers

Kiro supports MCP servers, allowing you to connect external services and tools. For example, to integrate Asana for task management:

Navigate to the ghost icon on the left side
Click the edit button
Add the server configuration following the service's instructions

Here's an example configuration for Asana:

{
  "mcpServers": {
    "fetch": {
      "command": "uvx",
      "args": ["mcp-server-fetch"],
      "env": {},
      "disabled": true,
      "autoApprove": []
    },
+    "asana": {
+      "command": "npx",
+      "args": ["mcp-remote", "https://mcp.asana.com/sse"]
+    }
  }
}

Next Steps

I really love building with Kiro, and even though I don't write code fulltime for work anymore, I always have it in the background building something for me. I've built internal tools for my team, games, and added features to my sites using Kiro. The spec-driven approach really enables you to build production-ready features with your team. The IDE is currently available in public preview with generous free limits during this period.

We'd love to hear your feedback! Share your thoughts on our GitHub repository and download Kiro to start building!

Teaching Code in the AI Era: Why Fundamentals Still Matter

Ali Spittel — Fri, 04 Apr 2025 03:57:27 +0000

As someone who has spent the last decade leading developer relations teams, teaching at coding bootcamps, and working as a professional software engineer, I've watched programming education transform dramatically with the rise of generative AI tools. I want to share my perspective on how we should be teaching people to code in this new era.

Finding the Balance: Fundamentals vs. AI Tools

Teaching people to code is changing really, really fast. But I think the fundamentals are almost more important than ever. Despite the rise of AI coding assistants like GitHub Copilot, Amazon Q Developer, and Cursor, understanding core programming principles remains crucial.

The reason is straightforward: you still should not be committing code that you don't understand to a production environment. While generative AI can speed up development, software engineers must be able to explain their code, identify security issues, and maintain it over time.

The "Vibe Coding" Era

"Vibe coding" - is all the rage on social media, and I love it. You just write prompts to build apps, ignoring the code while doing so.

I think one of the most exciting things about this is empowering non-technical people to be developers and to get hooked. They can go from zero to one really fast. This is democratizing coding, allowing newcomers to build projects like three.js games without mastering every coding fundamental first.

When I taught people to code, the first lesson they’d take is how to build simple HTML and CSS sites using CodePen, which gave them a quick win with visual feedback on what they were creating. Vibe coding takes that to a whole new level.

However, risks emerge when AI-generated code moves into production:

Security vulnerabilities
Scalability problems
Performance issues
Bugs affecting users

New Graduates vs. Seasoned Developers

There's a clear difference in how generations approach these tools. These Gen AI tools for this student and new graduate cohort are the way that they think and the way that they build. It's fundamentally integrated in the way that they are developing, in a way that's very different from a senior developer.

While experienced developers may struggle to change up their devtools set ups (like me with my CLI!), new developers have integrated these tools into their workflow from day one, creating a more natural pair programming experience.

Benefits for Students and Junior Developers

Generative AI shines at performing tasks that traditional CS programs often miss:

Test generation: GenAI is great at generating tests for your code base, which is rarely taught in programming classes.
Code documentation and explanation: Half the battle is not just writing new code, it's understanding the developers who came before you's code, and that can be really intimidating when you're a junior engineer. GenAI makes this easy.

The Future of Programming Education

Programming curricula must evolve to prepare students for this new reality. I believe it should adapt by still teaching the fundamentals, still making sure that people are well set up to succeed with them... while also making sure that people are best set up to enter this job market where you can build a lot faster using Gen AI tooling.

This means teaching both traditional coding principles and new skills like effective prompt engineering and working with AI pair programmers.

The million dollar question, is learning to code still valuable?

My answer is nuanced. Will development look the same five years from now? Even later this year? Absolutely not. Are bootcamps the way to learn in this job market? No.

However, programming is fundamentally problem solving. We still make students learn math even though calculators and computers can easily solve any problem a human can. It’s still a valuable skill to learn, and we aren’t at a point where you can push production code without human intervention, heavy code reviews, and an eye towards security, maintainability, and scalability.

Conclusion

Programming education stands at a crossroads. The path forward combines traditional fundamentals with AI tools, like Claude’s brand new education mode. The most effective approach teaches core principles while preparing students to use AI responsibly. As these technologies grow, so will our methods for teaching the next generation of software engineers.

The future isn't about choosing between human knowledge and AI assistance - it's about leveraging both to create better developers who can build better software. By embracing both, we can empower more people to become developers and push the boundaries of what's possible through code.

The AWS Amplify Fullstack Typescript Challenge - Help Thread!

Ali Spittel — Wed, 15 May 2024 18:05:43 +0000

Looking for help with your Amplify DEV Challenge Submission? We're here to for you!

Feel free to post your questions or product feedback in the comments below, and we'll do our best to respond!

If you want to learn more about the challenge, you can read the announcement post here:

Join us for the The AWS Amplify Fullstack TypeScript Challenge: $3,000 in Prizes!

dev.to staff for The DEV Team ・ May 15 '24

#devchallenge #awschallenge #amplify #fullstack

Introducing a New Fullstack TypeScript DX for AWS

Ali Spittel — Tue, 07 May 2024 00:38:47 +0000

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!

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.

What’s new in AWS Amplify: Features to Build and Scale Fullstack Apps

Ali Spittel — Tue, 05 Dec 2023 18:43:53 +0000

AWS Amplify has rolled out several new capabilities for developers building fullstack applications in the last few weeks - I want to share a summary of them. These updates deliver on highly requested community features to simplify development workflows. The embedded tweets all have videos demoing the new features. Let's dive in!

New Code-First Developer Experience

Amplify unveiled a code-first way to develop fullstack apps. Instead of a CLI-driven workflow, you can author application requirements in TypeScript. This includes data models, business logic, and authorization rules. Amplify handles provisioning cloud resources based on your code. This new generation of Amplify is also fully built with the AWS CDK, so extensibility is built in. There’s a lot of new features with this one - I’d highly encourage
you to read the full launch blog!

// Detect dark theme var iframe = document.getElementById('tweet-1726996779118338071-372'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1726996779118338071&theme=dark" }

Server-Side Rendering Deployment Spec

A new spec opens up fully managed SSR hosting on Amplify to frameworks like Nuxt, SvelteKit, Astro, and Express. Adhere to conventions for compute, images, routing, and assets to deploy performant SSR apps.

// Detect dark theme var iframe = document.getElementById('tweet-1726661768779268449-652'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1726661768779268449&theme=dark" }

v6 of the Amplify JavaScript library

Version 6 of the Amplify JS Library brings improvements like smaller bundle sizes, better TypeScript support, and improved Next.js support.

// Detect dark theme var iframe = document.getElementById('tweet-1724831823023263887-148'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1724831823023263887&theme=dark" }

Wildcard Subdomains

Amplify Hosting now allows wildcard subdomains when using custom domains. This unlocks dynamic, per-customer subdomains for SaaS and multi-tenant-like platforms. You can onboard users with unique subdomains like customer1.myapp.com while routing traffic behind the scenes.

// Detect dark theme var iframe = document.getElementById('tweet-1725212171821359540-338'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1725212171821359540&theme=dark" }

Docs, Custom Auth, UI updates, and More

Other launches include custom auth with Amazon Cognito, social login for React Native, Next.js 14 compatibility, upgraded docs, and new UI components.

Together these updates speed up building fullstack applications on AWS. We’d love to hear your feedback as you build! To learn more, visit our docs site!

Introducing Amplify UI's React Components

Ali Spittel — Thu, 07 Jul 2022 14:35:47 +0000

June 27, 2024: This blog post uses Amplify Gen 1, if you're starting a new Amplify app I recommend trying out Gen 2!

This week, my team at AWS launched React UI components which are really fun to build with - I want to show you all some of what you can create!

AWS Amplify UI is a set of primitive and cloud-connected components that enable customization, themability, and accessibility. There are primitive components for creating layouts, buttons, headers, ratings, and more. There are also components that connect to AWS resources to display maps and build authentication flows. Let's build a mapping application to work with the UI library!

Start an App

First, create an application - I used Next.js but you could just as easily use Create React App.

npx create-next-app amplify-ui-demo
cd amplify-ui-demo

Then, install the Amplify libraries and UI components:

npm i aws-amplify @aws-amplify/ui-react

Amplify UI doesn't come with a font by default, so you can choose one you like. The default theme uses the Inter font - we'll install that in our app as well.

npm install @fontsource/inter

At the top level of your application in /pages/_app.js, import the Amplify CSS file and inter font:

import "@aws-amplify/ui-react/styles.css";
import "@fontsource/inter/variable.css";

Build a Basic UI

Now, let's build out our app's basic UI! We'll do this in our app's home page - /pages/index.js. I'll first create an array of restaurants above my React component. Each one will have a name, cuisine, rating, price, and a (randomly generated) latitude and longitude:

const restaurants = [
  {
    name: "Mannys's Burgers",
    cuisine: "American",
    rating: 5,
    price: "$$",
    location: {
      lat: "32.385348495775",
      long: "-85.738272191934",
    },
  },
  {
    name: "Mac n Cheesy",
    cuisine: "American",
    rating: 4,
    price: "$",
    location: {
      lat: "40.385358710927",
      long: "-78.637760520167",
    },
  },
  {
    name: "Giuliano's Italian Restaurant",
    cuisine: "Italian",
    rating: 5,
    price: "$$$",
    location: {
      lat: "35.396328108119",
      long: "-87.786869702867",
    },
  },
  {
    name: "The Pink Sheep",
    cuisine: "Fine Dining",
    rating: null,
    price: "$$$$",
    rating: 3,
    location: {
      lat: "45.386348035105",
      long: "-97.535870048241",
    },
  },
];

I'll also pre-emptively import all the UI components I'll need. I'll also import the Next.js Link component.

import {
  withAuthenticator,
  Card,
  Badge,
  Heading,
  Rating,
  Text,
  Link,
  Flex,
  View,
  SearchField,
  useTheme,
  MapView,
} from "@aws-amplify/ui-react";

import NextLink from "next/link";

We'll start off by a View component which will will render as a div by default. We'll keep the Next.js Head with a title tag in it.

function Home() {
  return (
    <View>
      <Head>
        <title>RestaurantList</title>
      </Head>
    </View>
  );
}

Below the Head, let's build a header. We'll first use the View component again, but this time we'll render it as a header element instead of as a div. We'll also add some padding. Then we'll use the Flex component for flexbox. You can use props that mirror the flexbox CSS properties! We'll center the content within the row and add space around the items. We'll create another Flex and add some Links. We'll also add a heading with a level of 1 with the name of the site. Finally, we'll add another Flex with a SearchField inside of it.

<View as="header" padding="10px">
  <Flex direction="row" justifyContent="space-around" alignItems="center">
    <Flex>
      <NextLink href="">
        <Link>Home</Link>
      </NextLink>
      <NextLink href="/about">
        <Link>About</Link>
      </NextLink>
      <NextLink href="/shop">
        <Link>Shop</Link>
      </NextLink>{" "}
    </Flex>
    <Heading level={1} textAlign="center">
      RestaurantList
    </Heading>
    <Flex>
      <SearchField />
    </Flex>
  </Flex>
</View>

After that, let's loop through our restaurants and add Cards for each. We'll create a Flex here so that we can display a map next to the cards in the future. Then we'll add a View component with a maxWidth set. We'll loop through the restaurants and create a Card for each. Each Card will have information about the Restaurant on the left side, and then a rating on the right. The Rating component will render the star rating for each restaurant!

<Flex>
  <View maxWidth="800px">
    {restaurants.map((restaurant) => (
      <Card variation="elevated" key={restaurant.name} margin="10px">
        <Flex direction="row" justifyContent="space-between">
          <Flex direction="column">
            <Heading level={3}>{restaurant.name}</Heading>
            <Badge size="large" variation="info" width="fit-content">
              {restaurant.cuisine}
            </Badge>
            <Text color="grey">{restaurant.price}</Text>
          </Flex>
          <Flex direction="column">
            <Rating value={restaurant.rating} maxValue={5} />
          </Flex>
        </Flex>
      </Card>
    ))}
  </View>
</Flex>

Now your UI should look like this:

Theming

Amplify UI is fully themeable -- you can make it so the components fully match your brand or style. There are some example themes used within the Amplify UI docs that totally change how the UI looks!

In this case, I'll change up some of the colors used. I'll use green as the primary theme color and yellow as the secondary. I'll add the theme object to the _app.js file. Amplify UI has colors builtin which is where the green and yellow are coming from, but you could also set these values to completely custom colors.

const earthyTheme = {
  name: "earthTheme",
  tokens: {
    colors: {
      brand: {
        primary: {
          10: { value: "{colors.green.10}" },
          20: { value: "{colors.green.20}" },
          40: { value: "{colors.green.40}" },
          60: { value: "{colors.green.60}" },
          80: { value: "{colors.green.80}" },
          90: { value: "{colors.green.90}" },
          100: { value: "{colors.green.100}" },
        },
        secondary: {
          10: { value: "{colors.yellow.10}" },
          20: { value: "{colors.yellow.20}" },
          40: { value: "{colors.yellow.40}" },
          60: { value: "{colors.yellow.60}" },
          80: { value: "{colors.yellow.80}" },
          90: { value: "{colors.yellow.90}" },
          100: { value: "{colors.yellow.100}" },
        },
      },
    },
  },
};

To use the theme, import the ThemeProvider component.

import { ThemeProvider } from "@aws-amplify/ui-react";

Then, wrap the top-level application component in the ThemeProvider and pass the theme prop set to the theme object.

function MyApp({ Component, pageProps }) {
  return (
    <ThemeProvider theme={earthyTheme}>
      <Component {...pageProps} />
    </ThemeProvider>
  );
}

Using Themes in Components

You can also use attributes from themes directly within your components in order to style them. Inside the Home component in index.js, use the useTheme hook.

const { tokens } = useTheme();

Then, let's set the background color of the header to the primary color from the theme:

<View as="header" padding="10px" backgroundColor={tokens.colors.brand.primary[40]}>

If the primary brand color changes in the future, the header will update to match!

Cloud Connected Components

Amplify UI also offers cloud connected components so that you can connect to AWS services directly from React components. First, install the Amplify CLI. If it's your first time using Amplify, you'll need to configure it as well.

npm install -g @aws-amplify/cli

Then, initialize Amplify within your project:

amplify init

When prompted, choose a name for your project and then respond "Yes" to initialize with the defaults. Choose your AWS Profile as well.

Now, add authentication to your project by running:

amplify add auth

Press enter for the default configuration, then choose Username and "No, I am done".

Then add mapping to your app:

amplify add geo

Answer the questions as follows (though choose any name for the map):

? Select which capability you want to add: Map (visualize the geospatial data)
✔ Provide a name for the Map: · map53122572
✔ Who can access this Map? · Authorized and Guest users
Available advanced settings:
- Map style & Map data provider (default: Streets provided by Esri)

✔ Do you want to configure advanced settings? (y/N) · no

Run amplify push to deploy your resources.

You'll then need to configure Amplify within your application code. Inside the ./pages/_app.js file add the following:

import awsExports from "../src/aws-exports";
import { Amplify } from "aws-amplify";

Amplify.configure(awsExports);

Let's first add a map component to the app. Inside the Flex and under the close of the </View> for the restaurant cards, let's add a MapView. The latitude and longitude are for the United States, you may want to play around with the zoom level.

<MapView
  initialViewState={{
    latitude: "37.0902",
    longitude: "-95.7129",
    zoom: 4,
  }}
></MapView>

Let's also add markers for each of our restaurants. We'll use react-map-gl for these.

Install the package:

npm i react-map-gl

Import the markers:

import { Marker } from "react-map-gl";

Then, inside the MapView tags, render the Markers.

{
  restaurants.map((restaurant) => (
    <Marker
      key={restaurant.name}
      latitude={restaurant.location.lat}
      longitude={restaurant.location.long}
    />
  ));
}

Now you'll have a map!

Now let's add an authentication flow so users need to sign in to view the map. Wrap the Home component in the higher-order withAuthenticator component. Now you'll be prompted to create a user and sign in!

export default withAuthenticator(Home);

You could also use database data instead of a JavaScript object by using Amplify's data categories.

Studio

You can also use Amplify Studio to go from Figma designs to cloud-connected code. Under the hood, the generated components will all use Amplify UI. Check out this tutorial to learn how to build a similar application using that workflow.

Conclusion

In this tutorial, we built a UI with both primitive and cloud-connected Amplify UI components. If you'd like to disconnect your app from the cloud and delete the authentication and geo resources, run amplify delete. As you build with Amplify UI, we'd love to hear your feedback!

AWS Amplify Studio is Generally Available | 5 New Features to Try

Ali Spittel — Tue, 26 Apr 2022 14:05:17 +0000

Last week, AWS Amplify Studio went into general availability, and with that announcement came some really exciting new features. I wanted to use this opportunity to show you five new things you can do with Amplify Studio.

I work on the team that builds AWS Amplify Studio, and I'd love you're feedback as you build with it!

1. Workflow Bindings

You can add different actions to your UI components with Amplify Studio. You could change a card's color slightly on hover, perform CRUD actions on your data models, or even perform authentication actions like signing out.

Select the element you want to add an action to, then set the prop with the event you want to listen for - exactly the same as you would do in React. Then choose what action you want to take upon the user performing that action.

2. User attribute bindings

Frequently, you'll want to display user information on a UI, for example having "welcome, username" when someone signs in or having their user info displayed on each page so the user knows which account is signed in. You can do this in Amplify Studio by enabling auth and then, in the UI Builder, selecting user attributes to display.

3. Search, pagination, and filtering on collections

Within Amplify Studio, you can create collections to make list views of your data. Now, you can further control what data is displayed and how. You can add filters and sorts to subset your data and set sort conditions.

You can also add pagination and search components so that users can find what they need and so the UI is manageable.

4. Override experience

The developer experience for overrides has been re-written -- with Amplify Studio human-readable React code is generated, and it's important that developers are able to change what they need to in code. You can pass an overrides object to a Studio-generated component and use the Figma component name to access the exact child element you'd like to modify.

<CardB overrides={{"Text Group": { fontWeight: 'bold' }}} />

If you'd like to modify the items within a collection, you can do that too. Add the prop overrideItems to the collection and pass it a function with two arguments, item which contains the data model instance for the component, and index.

<Hikes overrideItems={(item, index) => {
  if (item.difficulty === 'easy') {
    return { overrides: { 'Button' : { backgroundColor: 'green' }}}
  } else if (item.difficulty === 'difficult') {
    return { overrides: { 'Button' : { backgroundColor: 'darkGrey' }}}
  }
}}/>

5. Figma theme plugin

You can use the AWS Amplify Theme Editor to theme your application. Add color palettes, spacing, font sizes custom to your brand to all the components in clicks.

Conclusion

You can get started with Amplify Studio from with in the Amplify Console. If you'd like to checkout an end to end tutorial, here are a few to choose from:

We'd love to hear your feedback as you build with Studio!

Build a Map Application on AWS in 10 Steps

Ali Spittel — Tue, 12 Apr 2022 15:52:32 +0000

June 27, 2024: This blog post uses Amplify Gen 1, if you're starting a new Amplify app I recommend trying out Gen 2!

Last week, the team I work on at AWS Amplify launched new map UI components. I wanted to take this opportunity to show what you can build using Amplify Geo and Amplify Studio together!

I'm an avid hiker, and AllTrails is one of my favorite sites, I duplicated a very, very small portion of their UI for this tutorial!

1. Create a new Studio Instance

Head to the Amplify Console and select build a new app.

Once your Studio instance is deployed, click "Launch Studio".

2. Create your data model

Once you're in Studio, click "Data" under "Set up" on the lefthand navigation. Add one model, Hike. Add the fields name, difficulty, location, lat, long, length, time, and coverImage. lat, long, and length should be floats, all other fields should be strings.

Once you've implemented your data model, click "Save and Deploy"!

Now, go to the "Content" tab under "Manage" and add a few hikes! You can find the latitude and longitude by Googling "trail name lat and long".

3. Enable auth

Once your data model is done deploying, go to "Authentication" under "Set up". Then deploy the default authentication mode. We won't implement a full sign in flow, though you can learn about how to here, we will just need auth enabled to enable mapping.

4. Change UI components in Figma

Head to the AWS Amplify UI Kit. Duplicate the Figma file to your account, and then head to the "My Components" page. You'll see a "CardB" card which we will modify for our app.

Round the card corners by adding a border-radius to the card and the top corners of the image.
Copy a small button from the Primitives page and paste it onto the card.
Change what's currently an address into three separate text fields, the middle one being a dot character.

When you're done, your card should look similar to the above.

I also deleted the components I'm not using.

5. Figma to Code

Then, back in Studio, head to the "UI Library" page. Click "Get Started" and paste in the link to your Figma file. Then accept all of your components.

Then, click on the CardB component on the "UI Library" page. Then click "Configure". Once here, we'll bind data to our component!

Click the image, then set the src to the hike.coverImage. Then, click the $99 USD and set the label to hike.name. Set the information about the beds/baths/sqft to the name of the hike.location.

Set the button label to hike.difficulty. I also want this element to be a div instead of a button - so I'll set the as prop to "div".

I'll set the first text field under that to a concatenated property: hike.length + miles. I set the second one to the hike.time.

My final card looks like this:

I want to display all my hikes in a list, so I'll create a collection. Click the "Create a collection" button on the right side. I called my collection Hikes.

Add margin as needed on the right side, and I added search and pagination. I kept the dataset as is, though you can add sorts or filters as desired.

6. Setup Local Code

Now we're ready to integrate this list into our app! First, create a React app:

npx create-react-app amplify-maps

Install the Amplify libraries and React components:

npm i aws-amplify @aws-amplify/ui-react

Run Amplify pull for your project. In Studio on the top right corner, you'll see a "Local setup instructions" link with a unique command for your app. Run this in your command line.

amplify pull --appId your-app-id --envName staging

Then, configure Amplify within your index.js file:

// Add needed imports
import { Amplify } from 'aws-amplify'
import config from './aws-exports'
import { AmplifyProvider } from '@aws-amplify/ui-react'

import '@aws-amplify/ui-react/styles.css'

// Configure Amplify
Amplify.configure(config)

// use the Amplify Provider component to intialize CSS
ReactDOM.render(
  <AmplifyProvider>
    <App />
  </AmplifyProvider>,
  document.getElementById('root')
)

Now, go to your App.js file and import the Hikes component.

import { Hikes } from './ui-components'

Replace the body of your App.js file with the following:

function App () {
  return (
    <div className='container'>
      <Hikes />
    </div>
  )
}

Now, if you run your React server, you'll see your list of hikes on the page!

7. Add Geo

Let's add the map to our application. First, we'll need to initialize Amplify Geo.

Run amplify add geo from your command line.

Answer the ensuing questions with the following:

? Select which capability you want to add: Map (visualize the geospatial data)
✔ Provide a name for the Map: (enter for default)
✔ Who can access this Map? · Authorized and Guest users
Available advanced settings:
- Map style & Map data provider (default: Streets provided by Esri)

✔ Do you want to configure advanced settings? (y/N) · no

Now, run amplify push in order to deploy your changes.

8. Add a map to your UI

Now, we'll use the Amplify Geo UI components to add a map to the page. I'll use Denver's latitude and longitude as the center of my map. You also may want to play around with the initial Zoom level.

import { MapView } from '@aws-amplify/ui-react'

...

function App () {
  return (
    <div className='container'>
      <Hikes />
      <MapView
        initialViewState={{
          latitude: 39.113014,
          longitude: -105.358887,
          zoom: 7
        }}
      />
    </div>
  )
}

Now, let's add markers to the map for each hike! I'll add a useEffect to query for all of my Hikes.

// Add needed imports
import { useEffect, useState } from 'react'
import { Hike } from './models'
import { DataStore } from 'aws-amplify'


...

// at the top of App.js pull all the hikes and store them in state
const [hikes, setHikes] = useState([])
useEffect(() => {
 const getHikes = async () => {
   const hikes = await DataStore.query(Hike)
   setHikes(hikes)
 }
 getHikes()
}, [])

Now, let's loop through the hikes and add a Marker instance for each with its latitude and longitude:

import { Marker } from 'react-map-gl'

...

function App () {
  return (
    <div className='container'>
      <Hikes />
      <MapView
        initialViewState={{
          latitude: 39.113014,
          longitude: -105.358887,
          zoom: 7
        }}
      >
        {hikes.map(hike => (
          <Marker
            latitude={hike.lat}
            longitude={hike.long}
            key={hike.id}
        />))}
      </MapView>
    </div>
  )
}

Now your map should look something like this:

9. Add popups

Now we have a map with markers on it, let's add popups when a marker is clicked on so you can see more info about the hike! I'll render the CardB component if the popup is open.

// Import the Popup
import { Marker, Popup } from 'react-map-gl'

...

function MarkerWithPopup ({ hike, latitude, longitude }) {
  const [showPopup, setShowPopup] = useState(false)

  // event listener that toggles whether the popup is displayed
  const handleMarkerClick = ({ originalEvent }) => {
    originalEvent.stopPropagation()
    setShowPopup(true)
  }

  // render the marker and the popup, render the CardB again within the popup.
  return (
    <>
      <Marker
        latitude={latitude}
        longitude={longitude}
        onClick={handleMarkerClick}
      />
      {showPopup && (
        <Popup
          latitude={latitude}
          longitude={longitude}
          offset={{ bottom: [0, -40] }}
          onClose={() => setShowPopup(false)}
          maxWidth='95%'
          closeOnMove
        >
          <CardB hike={hike} />
        </Popup>
      )}
    </>
  )
}

Change the application to display the MarkerWithPopup instead of just the original marker!

{
  hikes.map(hike => (
    <MarkerWithPopup
      latitude={hike.lat}
      longitude={hike.long}
      hike={hike}
      key={hike.id}
    />)
  )
}

10. Add Styling

I also added the following CSS to my index.css file, please forgive the !importants! They were needed to override the existing styling on the popups!

@import url('https://fonts.googleapis.com/css2?family=Inter:slnt,wght@-10..0,100..900&display=swap');

.container {
  display: flex;
}

.maplibregl-popup-content, .mapboxgl-popup-content {
  background-color: transparent !important;
  box-shadow: none !important;
  border-radius: none !important;
  z-index: 5 !important;
  max-width: 95% !important;
}

.maplibregl-popup-close-button, .mapboxgl-popup-close-button {
  color: white !important;
  font-size: 30px !important;
  font-weight: bold;
}

Now your app should have working popups when you click on a marker!

Conclusion

In this tutorial, we used Amplify Studio, the Amplify CLI, and Amplify UI components to build out a map interface. If you want to delete the resources used in this tutorial, run amplify delete in your CLI. I would love to hear your feedback as you build with Amplify, especially since Studio is still in developer preview at the time of this writing!

Build a Social Media Timeline with Amplify Studio

Ali Spittel — Tue, 05 Apr 2022 16:39:30 +0000

June 27, 2024: This blog post uses Amplify Gen 1, if you're starting a new Amplify app I recommend trying out Gen 2!

We've been releasing a lot of great new features on AWS Amplify Studio since we launched the developer preview at Re:Invent. I wanted to take this opportunity to show some of these features, and build something a little more feature rich.

1. Create your data model

Head to the Amplify Console and select build a new app.

Once your Studio instance is deployed, click "Launch Studio". Then, once in Studio, click "Data" under "Set up" on the left panel. We'll create two data models: Post and User. Post will have three fields: "content", "postedAt", and "likes". Likes will be an integer, postedAt an AWSDateTime, and content a string. User will have three fields as well: "profilePic" an AWSURL, handle, and name - the last two will remain Strings.

The data will also be related - a Post will have one User - or a 1:1 relationship.

Click "Save and Deploy" once you've added all the fields!

2. Add Starter Data

Once your data model has finished deploying, head to the "Content" tab under "Manage" on the left navigation. Create a few users and Posts using the form. Make sure your Posts have users tied to them!

3. Customize your component in Figma

Head to the AWS Amplify UI Kit. Duplicate the Figma file to your account, and then head to the "My Components" page. You'll see a "SocialB" card which we will modify for our app.

I'll make a few modification:

Remove the share actions other than the like button
Remove the Lorem ipsum
Bold the "Author"
Remove the "Danny liked this" row
Group the body and share groups into a group called CardContent

When you're done, your card should look like this:

Then, in Studio, head to the "UI Library" page. Click "Get Started" and paste in the link to your Figma file. Then accept all of your components.

4. Link UI to Data

Once your components are loaded into Studio, head to the "SocialB" component. We will tie our component to data. First, click the Lorem Ipsum text. Then, set the label prop to post.content.

Set the Author label to user.name. Set the 99 label to post.likes. Set the src of the image to user.profilePic.

For the Timestamp we'll add in the user's handle. Set the Prop label to "@" then select "concatenate" then choose user.handle.

Let's add a link to the "Author" text. Type in the prop as first, and set it to a. This will make the text into an . Then, let's set the href prop to "/users/" + user.id. This will make it so the author text would link to the user's profile! I won't set up actual routing for this app, but I wanted to display how to set up a link anyways.

5. Add Events in Studio

You can also add actions to elements in Studio - select the CardContent group, we'll make the social media post grey whenever it's hovered.

Select the prop onMouseEnter. Set the action to Modify element property. Set prop backgroundColor to #00000008. Repeat for onMouseLeave but this time set the background color to transparent.

You can also add onClick and other events to create data!

6. Implement Local Code

Now let's move to our local development environment. First, create a React App locally npx create-react-app tweettweet. Then, click "local setup instructions" in Studio and run the generated amplify pull command locally. Install the Amplify libraries: npm i @aws-amplify/ui-react aws-amplify.

Open up your index.js and add the following:

import '@aws-amplify/ui-react/styles.css'
import config from './aws-exports'
import { Amplify } from 'aws-amplify'

import { AmplifyProvider } from '@aws-amplify/ui-react'

Amplify.configure(config)

This will configure Amplify for your app and import the needed CSS for the UI components. Then, in your render add the AmplifyProvider component for styling.

ReactDOM.render(
  <AmplifyProvider>
    <App />
  </AmplifyProvider>,
  document.getElementById('root')
)

Import the fonts in your index.css:

@import url('https://fonts.googleapis.com/css2?family=Inter:slnt,wght@-10..0,100..900&display=swap');

Now, go to your App.js file, where we'll write our logic code! Let's first add a function to query for all of our posts. Import DataStore and your models. We'll also import our SocialB component that was generated by Amplify.

import { DataStore } from 'aws-amplify'

import { Post, User } from './models'

import { useEffect, useState } from 'react'
import { SocialB } from './ui-components'

Also, import the needed React Hooks:

import { useEffect, useState } from 'react'

Let's write a function to query for Posts within our App component.

const [posts, setPosts] = useState([])

const getPosts = async () => {
  const data = await DataStore.query(Post)
  setPosts(data)
}

We'll call this function within our useEffect:

useEffect(() => {
  getPosts()
}, [])

Note: if you don't have related data, you can use Studio to create a data collection and pull data automatically

Now, let's map through the posts and create SocialB instances for each. We'll pass each post to the component, the user as the post.User, and the key being the post's id.

  return (
    <div className='App'>
      {posts.map(post => (
        <SocialB
          post={post}
          key={post.id}
          user={post.User}
        />))}
    </div>
  )
}

Now let's make the like button work! You can pass an override object to the generated components. Pass the Figma name of a subcomponent to pass a prop to that item directly - you can see these by going to the component's generated file and see the key passed as an argument to getOverrideProps.

In this case, I'll send an onClick event to the Share subcomponent. This onClick will modify the post's like count. We'll also need to pass the getPosts function as a prop so that we can trigger that and update the UI.

{posts.map(post => (
  <SocialB
    post={post}
    key={post.id}
    user={post.User}
    overrides={{
      getPosts,
      Share: {
        onClick: async e => {
          e.preventDefault()
          const postToChange = await DataStore.query(Post, post.id)
          await DataStore.save(Post.copyOf(postToChange, updated => {
            updated.likes += 1
          }))
          getPosts()
        }
      }
    }
  }
/>))}

Now your timeline should display all posts, and you should be able to update the like count by clicking the heart!

Conclusion

In this post, we built out a social media timeline with hover actions, onClick events, related data, and linking. I would love to hear your feedback as you build with Amplify, especially since Studio is still in developer preview at the time of this writing!

A Complete Guide to the Amplify React Authentication Components

Ali Spittel — Tue, 25 Jan 2022 16:06:50 +0000

A few weeks ago, the team I work on, AWS Amplify, launched brand new authentication components for React, Vue, and Angular. I want to give you a quick tour of what you can do with these components from enabling backend authentication to simple frontend flows, to more complex, customized setups.

Enable Authentication

You can enable authentication via Amplify in two ways: first through Amplify Studio and secondly through the Amplify CLI. I'll show you how to do so through Studio; however, here are instructions for doing so through the command line if that better fits your workflows.

First, head to the Amplify Console. Then click "New app" and select "Build an app". Then choose a name for your project -- for example "amplify-authenticator-demo". Once your app deploys, click "Launch studio". From there, click "Enable authentication" on the Studio landing page.

Here, choose your desired authentication setup. I'll go with the defaults, but you can add multi-factor authentication, different attributes you want to get from your users, and different login mechanisms including social providers.

Once you have your setup, click "Deploy". Now you have backend authentication enabled for your app!

App setup

I'm going to create a React app to demonstrate the authentication components; however, it's also compatible with Vue and Angular with more frameworks on the way!

I'll create a new React app:

npx create-react-app amplify-authenticator
cd amplify-authenticator

Then, if you go back to Studio and click "Deployment successful - click for next steps" on the upper right of the page, you'll see an amplify pull command with your app id. Run that command to sync your backend with your frontend. If you get a confirmation browser window, accept and then answer the questions in your CLI. The defaults should be sufficient for almost all of the questions!

Then, install the Amplify libraries and React components:

npm i aws-amplify @aws-amplify/ui-react

Open your app up in your text editor, and then add the following to your src/index.js file:

import Amplify from 'aws-amplify'
import config from './aws-exports'

Amplify.configure(config)

This will configure Amplify within your app! Now add in the Amplify CSS file and the AmplifyProvider component.

import '@aws-amplify/ui-react/styles.css'
import { AmplifyProvider } from '@aws-amplify/ui-react'

Then, add an instance of the AmplifyProvider as the top level of your React app.

ReactDOM.render(
  <AmplifyProvider>
    <App />
  </AmplifyProvider>,
  document.getElementById('root')
)

This will add Amplify's default styling to your app.

The withAuthenticator component

Let's add a full authentication flow to our app with the withAuthenticator higher order component. First, import it:

import { withAuthenticator } from '@aws-amplify/ui-react'

Then, wrap your App export:

export default withAuthenticator(App)

If you run your application server, you'll notice that you have a full authentication flow with sign in, sign up, and forgot password. Try it out!

Once you have created a user and signed in successfully, then you'll see the contents of your component. In my case "Hello, world!". You could also use this flow on a different page of your application, for example a form so that anyone could visit a landing page, but only authenticated users could access that form.

This component automatically detects your authentication setup, so if you had social providers enabled, they would show up as options on the form as well. You can, however, also pass arguments to the withAuthenticator in order to override these defaults. For example the following will display sign in with Apple even if you don't have it configured for your app.

export default withAuthenticator(App, {
  socialProviders: ['apple']
})

Add sign out and display user info

Let's add sign out to our application, and display the user on the homepage. The signOut function and the user object are passed to our component by the Authenticator component, so we can destructure them and then use them in our app! For example:

function App({ signOut, user }) {
  return (
    <div>
      <h1>Hey, {user.attributes.email}</h1>
      <button onClick={signOut}>Sign out</button>
    </div>
  )
}

Customize your flows with the Authenticator

You can further customize your flows, fields, text, and more by using the Authenticator component. You can even add internationalization so that your text displays as you want across the globe.

Here's the full documentation to learn more.

Add a Theme to your UI

You can also add a theme to your Authenticator component. You can do so via CSS variables, a JavaScript object, or design tokens. I'll create a JavaScript object:

const theme = {
  name: 'pretty-princess',
  tokens: {
    colors: {
      background: {
        primary: { value: 'hotpink' }
      }
    }
  }
}

Then, I'll pass it as a prop to the AmplifyProvider

<AmplifyProvider theme={theme}>

Now, my component is hot pink!

Learn more about theming in the documentation.

Conclusion

Head to the Amplify Console in order to create your own application, I'd love to see what you build. If you have any feedback, feel free to message me, join our Discord, or leave a GitHub Issue.

Build a Vacation Rental Site with Amplify Studio

Ali Spittel — Tue, 14 Dec 2021 15:12:12 +0000

What is Amplify Studio?

One of the most exciting projects I've worked on in my career, AWS Amplify Studio, just launched at Re:Invent in public preview. With Amplify Studio you can quickly go from a designer’s vision to a full stack, cloud connected app that scales with your needs. You can create components in Figma, import them into Amplify Studio, and then connect them to your AWS-backed data models. Then, Studio can export your UI components to human-readable React code that you can extend yourself. Let's go step by step through how you would build an app with Amplify Studio.

Create a Data Model

Head to the Amplify Sandbox. Once there, change the dropdown after Build a to "Blank", then click Get Started.

On the Data Modeling page, add a "Rental" model with the fields "name", "image", "price" (an integer), and "location".

Then click the "Deploy to AWS" button on the upper right of the page.

If you're new to Amplify's data modeling, you can check out this tutorial to learn more!

Deploy to AWS

On the deployment page, choose whether or not you have an AWS account (create one if you don't have one yet!) and then choose an app name and deployment region.

Create Data in the Data Manager

Once your app finishes deploying, click the Launch Studio button.

Now, head to the content tab on the left side. This gives you an admin panel where you can perform full CRUD actions for your models -- create a few rental properties! Click Create rental then use the form to create new entries.

Amplify Figma File

If you go back to the home page for studio, you'll see an option on the Amplify Studio home page to "Accelerate UI development" - click the Build UI button underneath. On the UI Library home page, there will be a Get started button that once clicked asks you for a link to your Figma file.

Amplify launched a UI Kit on Figma. You can duplicate this file and then make any modifications that you want and create your own components! Do this in the components Figma page.

I'll modify the appearance of CardA to round the corners, bold some text, and remove the background color.

This UI kit correlates with the Amplify UI Components, which Studio will be using under the hood when it generates your Figma components to React.

Import Figma to Studio

Speaking of, let's import our Figma components into Studio. Copy your Figma file's URL and paste it into Studio. Then click "Continue". Your components will be loaded into Studio.

From there, you can accept or reject your components, and you can view their variants. I'll go ahead and "Accept all".

Link Data

Now, I've created a data model and UI components. I now need to link my data to the UI. I'll choose my CardA component and then click Configure.

Then, create a prop using the component properties form. Choose a name and then use the dropdown to find the model you created! This will pass the data from that model to the component.

From there, select the elements you would like to populate with your data and choose the attribute you'd like to use. I'll click the "image" which right now is a placeholder, then I'll set the src prop to rental.image.

For the spot that currently says "Classic Long Sleeve T-Shirt", set the label to rental.name. Finally, for the price, I'll set what currently says $99 to the price from my data model. I'll also concatenate that with a "$" and "/night".

Now, my component renders my live data!

Create a Collection

I want to display all my rentals, instead of just one. So, I'll create a collection from my component. Click "Create Collection" on the right side of the page. Then choose a name for your collection, I'll go with RentalCollection. Once on the collection page, you can choose whether your cards render in a grid or list, the number of columns, padding between, and the direction of the collection.

I'll create a grid, then switch to four columns and add 4px in between each one.

You can also modify the data set that goes into the collection. You can sort the items, or add a filter by clicking "View/Edit" next to "Data set".

Pull to Studio

If you're new to React, check out this tutorial before continuing!

Now we have components created with data bound to them, let's use those components in an app! I'll create a React app:

$ npx create-react-app amplify-studio-tutorial
$ cd amplify-studio-tutorial

Then, I'll install the Amplify JavaScript libraries and React components.

$ npm i aws-amplify @aws-amplify/ui-react

Then, I'll run the Amplify pull command to run code generation in my app. You can find the amplify pull command specific to your app by clicking "local setup instructions" in Studio.

Run this command in your React app, and you'll see quite a few files generated including /src/ui-components -- this contains all of your React components! You can open them up and see what's inside.

Now, let's set our app up. First, in your index.js file, configure amplify by pasting in these three lines of code:

import config from './aws-exports'
import Amplify from 'aws-amplify'

Amplify.configure(config)

These will tie your frontend to your Amplify-created backend.

Now, head to your App.js, and clear out the existing return ().

Import the AmplifyProvider component, and the Amplify CSS file:

import { AmplifyProvider } from '@aws-amplify/ui-react'
import '@aws-amplify/ui-react/styles.css'

Then, add the AmplifyProvider at the top level of your return. This will provide styling to all of its child components.

function App () {
  return (
    <AmplifyProvider>
    </AmplifyProvider>
  )
}

export default App

Now, let's render our RentalCollection! First, import it:

import { RentalCollection } from './ui-components'

Then, add it to the render:

function App () {
  return (
    <AmplifyProvider>
+ <RentalCollection />
    </AmplifyProvider>
  )
}

export default App

If you run your React server and check out your page, you'll have your rentals collection!

Amplify doesn't load a font in for you automatically, so you'll probably want to add your own. For example, you could add Inter to your App.css file:

@import url('https://fonts.googleapis.com/css2?family=Inter:slnt,wght@-10..0,100..900&display=swap');

Use a Prop

You can customize these React components in your own code. First, you can use props in order to modify your components. If you wanted to make your grid of rentals into a list, for example, you could pass the prop type="list" to your RentalCollection.

<RentalCollection type="list" />

You can find a list of all props in the Amplify UI docs.

Use an Override

Sometimes, you'll want to modify child components instead of the top level one. You can use overrides in order to do so!

Right now, the images are kind of wonky due to my styling in Figma. Let's change the object-fit to cover for the image via overrides to fix that.

Open up the code for the RentalCollection component. Inside each of its child components, you'll notice a line of code like this: {...getOverrideProps(overrides, "Collection.CardA[0]")}. The second value is a key you can use to specify which component you want to add an override to.

In this case we'll add the following to our RentalCollection instance:

<RentalCollection
 type='list' overrides={{
   'Collection.CardA[0]': {
   }
 }}
/>

This will add overrides to the CardA component. In this case, though, we want to override the Image component inside of CardA. Open up the code for that component, and you'll see similar overrides for each of its child components.

We'll pass a second override object to the CardA override. Then we'll set the key to the override key for our Image. Then we'll set the objectFit prop to cover.

<RentalCollection
 type='list' overrides={{
   'Collection.CardA[0]': {
       overrides: {
        'Flex.Image[0]': { objectFit: 'cover' }
       }
    }
 }}
/>

You can use this to add almost any customization you need to your components!

Note that if you re-run amplify pull your components will regenerate. Because of this, you won't want to modify the components in the ui-components directory directly. If you decided you wanted to modify the code in a component file, you could drag it out of that directory and it would no longer get overwritten by amplify pull!

Theming

You may want to add a theme to your UI components so that they match your brand. You can do this via a JavaScript object, CSS variables, or through the Amplify Theme Editor Figma Plugin.

Install the plugin, then choose it from the Figma plugin dropdown.

You'll be prompted to enter your app's Amplify Studio URL, and then to sign into your app. In order to get your sign in, you can create a user within the AWS Amplify Console for your app.

Note: make sure to reset your new user's password before using it to log into the Figma Plugin!

You can then change any of the colors for your app, change your brand colors, and any of the components' colors. You can apply them to the Figma file and to your Studio app. Once you sync with Studio, the next time you run amplify pull, you'll have a theme object that you can pass as a prop to AmplifyProvider which will apply your theme to your app!

Learn more about theming in the docs.

Update from Figma

If at any point you want to update a component, you can do so within Figma and then click "Sync with Figma" in Studio. Then, you'll be able to observe your changes compared to what you have now, and either accept or reject your changes.

Use the rest of the Amplify Ecosystem

You can use the whole Amplify ecosystem with an app that you create with Amplify Studio. You can add frontend hosting, additional backend resources like authentication, storage, and serverless functions, and then extend your project outside of what Amplify natively offers with CDK.

Conclusion

I can't wait for you to build your own app with Amplify Studio out. If you have any feedback, please leave a GitHub issue or join our Discord Community!