How to create a full-stack app with AWS Amplify Studio

With the new AWS Amplify Studio, you can take a design in Figma to a pixel-perfect, cloud-connected React component in minutes. In this tutorial, I'll walk you through how to create a blog app with Studio from scratch.

Get started with ACG and transform your career with courses and real hands-on labs in AWS, Microsoft Azure, Google Cloud, and beyond.

First, we'll need to create a backend for our application. You can head to the Amplify Sandbox to get started.

From here, choose to build a "Blank" with "React".

Then click "Get Started".

On the data modeling page, we'll create a Post model with the fields "title", "author", "image", and "content".

I'll change the "image" type to "AWSUrl".

Then click "Deploy to AWS".

Note that you can test the data locally in your app without an AWS account by clicking "Next: Test locally in your app" instead, for brevity I'll skip that option.

Either log into your AWS account or create a new one in order to deploy your app. Then choose an AWS region and a name for your app.

It will take a few minutes to deploy, but then your data model will be live in the cloud. Under the hood, Amplify is using AWS AppSync and Amazon DynamoDB for this data model.

Once your app deploys, click "Launch Studio".

Then "Manage app content".

There will be a form you can fill out in order to create a few blog posts. You can also use the seed data functionality in order to autogenerate some initial data.

I'll click "Auto-generate seed data", then create 10 rows of data. I'll add some constraints so my author is a "full name", my title is 5 to 12 words long, my post is 3 to 10 paragraphs, and my image will have a URL length.

You'll probably want to swap out the image URLs for real pictures. I recommend using Unsplash to find them. Select the image URL from the picture and then use that link in your image field in your data model.

OK, now that we have an app backend, let's think about our user interface.

With Amplify Studio, you can import components from the UI design tool Figma. (Note that the UI Library functionality is currently in preview mode — we'd love to hear any feedback you have as you work with it.)

Amplify has a starter UI file to use that corresponds to the Amplify UI Library. Go ahead and duplicate the UI file, then you can make any stylistic changes to the components that you want. Switch to the "My Components" tab to make any changes. I'll bold the date and author name on the SocialA component.

Then, I'll head to the UI Library (Preview) tab then click "Get Started".

Paste in the link to your Figma file, then click "Continue".

Then, you'll be able view your UI components in Studio! I'll click "Accept all" to import all of my components from Figma.

Now that we have data and UI components, let's connect the two!

I'll select the SocialA component in Studio, then click Configure.

Then add a component property. I'll call it post and then set the type to Post.

Then, I'll select the part of the component I want to update and choose which data I want to link it to. First, I'll select the heading on the card, then I'll choose the label attribute and set it to the post.title.

I'll set the paragraph to the post.content, the image to post.image, the date to the post.createdAt, and the name to the post.author. You can click "shuffle preview data" to see different data plugged into your component!

Instead of just rendering one blog post at a time, we'll want to render a list of them.

Let's create a collection of blog posts. On the upper right-hand side click "Create collection" then choose a name for your collection. I'll name mine "PostCollection".

You can then change the alignment of your collection. I'll keep mine a list, but add 4px between each card. Note that not all of my posts have a picture because I kept the original seed data!

You can also modify which data is displayed by clicking "View/Edit" by the data set. You can then sort or filter your data so that only the records you want to show are displayed! In a real-world blog, you may want drafts and published posts — you could use this to only display published ones!

Now we need to add this to our app! First, go ahead and create a React app:

npx create-react-app amplify-studio-blog
cd amplify-studio-blog

Then, on the top right of your Amplify Studio page, click the "local setup instructions" link. There will be an amplify pull command with your app ID.

Go ahead and run that command as well. You'll get a popup in the browser, log into Studio when prompted, or press "Accept". Then answer the questions in your CLI, you should be able to accept the defaults for most questions.

Then, install the Amplify React components and the Amplify libraries:

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

Open the project up in your text editor. You'll notice that the /amplify directory and the /src/models and /src/ui-components were generated. The ui-components has all of your React code! You can check the files out, they're real, human-readable code.

Let's make our app render our blog posts. First, connect your frontend to your Amplify app by adding the following code to your index.js file.

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

Amplify.configure(config)

Then, clear out your App.js component. First, add the Amplify CSS file. Then import the AmplifyProvider component and your PostCollection:

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

import PostCollection from './ui-components/PostCollection'

The AmplifyProvider will pass the Amplify styling to all of its child components.

Then, use the AmplifyProvider component, and your PostCollection!

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

export default App

Your posts should render on the page. Note that Amplify UI doesn't load in a font by default, so you can add this to your index.css to get the font working properly.

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

You can pass props to your components in order to modify them. For example, if you wanted to add pagination to your collection, you could do the following:

<PostCollection isPaginated itemsPerPage={5} />

Now, 5 items will show per page! You can read all the options here.

You also may want to override props sent to one of the child components, which you can also do! If you open up your component file, for example src/ui-components/PostCollection.jsx, you'll notice that each component has a getOverrideProps. Each one is passed two arguments, overrides and a key. You can use that key to override props for that individual component. Let's make it so that the "read more" link on each SocialA card is actually an a tag that could link to the post.

I'll first look at the SocialA component instance inside the PostCollection. I'll get its override key.

<PostCollection overrides={{
    "Collection.SocialA[0]": {

    }
}}/>

We want a child component of the SocialA component, so we'll now open that up. There will be a Text component that renders "Read more" at the bottom of the file.

We'll create a second overrides object, then pass the props we want to pass to the component. For example, the as tag to make it into a link and an href. In order to fully implement this, you'd need to use a routing library for React.

<PostCollection overrides={{
  "Collection.SocialA[0]": {
    overrides: {
      "Flex.Flex[1].Text[0]": {
        "as": 'a',
        "href": "https://console.aws.amazon.com"
      }
    }
  }
}}/>

Here is more information about overrides in Amplify.

Now, let's add an authentication flow to our app. Head back to Amplify Studio, and click "Authentication" under "Set up".

I'll go with the defaults here, and then deploy. You can configure different mechanisms, password settings, and attributes though!

Once Authentication deploys, re-run the amplify pull command to pull your changes into your local app.

Then, we'll use the withAuthenticator higher order component to add auth to our app.

Add the import:

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

Then, wrap your App export in the component:

export default withAuthenticator(App)

If you open up your app, you'll have a full sign in and sign up flow! You can learn more about the authentication components here.

You may want to add a theme to your UI in order to add brand colors or other customizations to your UI components.

You can use the Amplify Figma Theme Editor to change the color palette of your Figma components. You can also use the UI component theming in your code via CSS, design tokens, or JavaScript objects.

You may want to change the design of your components at some point. In which case, you can change them in Figma, then click "Sync with Figma" back in the Studio UI Library. You'll be able to preview your changes and then run amplify pull in order to get the design changes in your local app!

Beyond Amplify Studio, you can also add Amplify frontend hosting, Amplify CLI generated resources such as functions or predictions, and more. Check out the docs to keep learning!

Head to the Amplify Sandbox 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.

Ali teaches people to code. She loves Python, JavaScript, and talking about programming. She has been writing React since before es6 classes. She leads developer advocacy for AWS Amplify.