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

My team at AWS has been releasing aton of new features that makeAWS Amplify better than ever. Here are ten things released in the past year that I'm personally excited about, and that will speed up your development workflows!

1. Next.js Support

Next.js is the latest and greatest in JavaScript frameworks. It allows for bothstatic site generation and server-side rendering, which makes your sites more performant leading to a better experience for your customers. Amplify has added support for Next.js -- you can deploy server-side rendered and incremental static regenerated apps to Amplify Hosting, add in Amplify backend resources, and then you can use the Amplify JavaScript libraries to server-side render your data.

Within agetServerSideProps, for example, you can use thewithSSRContext function to allow your Amplify JavaScript code to run on the server instead of the browser.

exportasyncfunctiongetServerSideProps(){constSSR=withSSRContext()const{data}=awaitSSR.API.graphql({query:listParks})return{props:{parks:data.listParks.items}}}

Then, all you need to do to deploy is:

1. Create an AWS account if you don't already have one.

2. Navigate tothe Amplify Console

3. Click on the orangeconnect app button.

4. ChooseGitHub in theFrom your existing code menu, and click continue

1. Type in the name of your GitHub repo you just created (it should autofill!) and then clicknext

1. The build settings will auto-populate, and so you can just clicknext on theConfigure build settings

2. ClickSave and deploy.

No custom settings are needed -- it will create a AWS Lambda@Edge function behind the scenes for you to do the server-side rendering.

If you want to read a full tutorial on how to implement this in your app,check this out!

2. Sign in with Apple

A lot of developers need to integrate "Sign in with Apple" to their apps so that users can use their pre-created Apple accounts instead of creating one from scratch. You can use the Amplify Admin UI or command line interface to enable Sign in With Apple and tie it to your Apple Developer Account, and then you can use Amplify's libraries to implement the frontend authentication flow!

Check outthis tutorial to learn more.

3. Amplify Geo developer preview

Did you know that you can create maps with Amplify? Right now Amplify Geo is in developer preview mode -- you can create a map, then add markers and location based search to it.

To create a map, first create an HTML element to attach it to.

<divid="map"></div>

Then, you can use the helper functions to create a map with a few lines of code!

import{createMap}from"maplibre-gl-js-amplify"import"maplibre-gl/dist/maplibre-gl.css"asyncfunctioninitializeMap(){constmap=awaitcreateMap({container:"map",center:[-200,50],zoom:11,})}initializeMap()

You can read more about how to implement Amplify Geoin the docs.

4. DataStore Multi-auth

AWS Amplify DataStore allows you to create online and offline available data with no extra code on your end. This is super helpful for manyoffline data patterns and mobile apps.

It also has support for adding different authorization rules so that different users can be allowed or restricted from performing certain actions. For example, you may want admins to be able to delete data, a regular user to be able to create data, and then unauthenticated users to read data. As of a few months ago, DataStore supports multiple types of authorization like that example!

Using the Admin UI, you can add different authorization rules for different types of users:

If you're interested in a full tutorial on how to integrate this into your app, check outthis tutorial.

5. Environmental Variables and Secrets

You can create AWS Lambda Functions using Amplify, either within a REST API or outside of it. Now, you can add environmental variables and secrets to your functions -- I used this tocreate a function that would create a user account every time they bought an item from my site with Stripe.

To do this, first create a function:

➜  next10-blog git:(main) ✗ amplify addfunction? Select which capability you want to add: Lambdafunction(serverlessfunction)? Provide an AWS Lambdafunctionname: next10bloge53fc67d? Choose the runtime that you want to use: NodeJS? Choose thefunctiontemplate that you want to use: Hello World

Then, under advanced configuration, you can add environmental variables and secrets!

? Do you want to configure environment variablesforthisfunction? Yes? Enter the environment variable name: github_user? Enter the environment variable value: aspittel? Select what you want todowith environment variables: Imdone? Do you want to configure secret values thisfunctioncan access? Yes? Enter a secret name(this is the key used to look up the secret value): github_key? Enter the valueforgithub_key:[hidden]? Whatdoyou want todo? Imdone

Then you can use them in your function! For example:

const{Parameters}=await(newaws.SSM()).getParameters({Names:['github_key'].map(secretName=>process.env[secretName]),WithDecryption:true}).promise()returnParameters[0].Value

6. Admin UI Data Explorer

As a software engineer, I can't tell you how many times I've had to create a secondary admin app for the company use to manage data. The Amplify Admin UI solves this problem by auto-generating one for you! You can manage application data using its data explorer. You can perform all the CRUD operations on the data, and even manage your app's users!

Here's a full tutorial on using the Admin UI.

7. Data Seeding

To keep going with the awesome Admin UI features, you can also automatically generate seed data for your apps. Often, you'll need test data when you're developing your app to make sure it's working as promised. You can autogenerate this data with the Admin UI! You can choose how many rows to generate, and then it will use your fields data types to generate the data!

8. DataStore selective sync and sort

DataStore allows your data to be available online and offline. In the browser it stores your data in IndexedDB by default. That being said, sometimes each user doesn't need access to all data, or only some of the application's data needs to be available offline. You can set up selective sync to only sync some of the data locally.

If you wanted to only store data that is associated with a certain user ID, you could configure DataStore like so:

DataStore.configure({syncExpressions:[syncExpression(Song,u=>u.userID('eq','123'))]})

In addition, there's support for sorting data! So, if you wanted to list all of your users alphabetically, you could write a query like so:

constposts=awaitDataStore.query(User,Predicates.ALL,{sort:s=>s.username(SortDirection.ASCENDING)})

Here's DataStore's full documentation.

9. Amplify Flutter

I'll be the first to admit that I'm a true web developer and really have no mobile knowledge. That being said, I'm really excited about Amplify releasing support for Flutter. Flutter allows for cross-platform development, and it seems to be picking up steam in the community.

Here's a tutorial on how to get started with Amplify and Flutter!

10. Amplify containers

So Amplify already has great support for serverless functions and GraphQL APIs, but sometimes you need to migrate an existing app over to Amplify. Also, sometimes you need to have long-running tasks, which don't integrate well into Lambda Functions. Or you want to write a full Django or Rails app which uses a bunch of other libraries which may not integrate well into a Lambda Function. Well, good news! Amplify supports AWS Fargate Containers! You can deploy anything that runs in a Docker Container within Amplify.

First, you'll need to allow Amplify to create container-based APIs by runningamplify configure project and then:

? Which settingdoyou want to configure? Advanced:> Container-based deployments? Do you want toenablecontainer-based deployments?> Yes

Then you can create an API!

amplify add api? Pleaseselectfrom one of the below mentioned services:> REST? Which service would you like to use> API Gateway + AWS Fargate(Container-based)? Provide a friendly nameforyour resource to be used as a labelforthis categoryinthe project:> containerb5734e35? What image would you like to use> ExpressJS - REST template? Whendoyou want to build & deploy the Fargate task> On every"amplify push"(Fully managed containersource)? Do you want to restrict API access> No

Then, you can go into youramplify/backend/api/<your-api-name>/src/index.js file, and add in your app code! For example with a Express app, you could write something like this:

constexpress=require("express");constbodyParser=require('body-parser');constport=process.env.PORT||3001;constapp=express();app.use(bodyParser.json());app.use(bodyParser.urlencoded({extended:true}));// Enable CORS for all methodsapp.use(function(req,res,next){res.header("Access-Control-Allow-Origin","*")res.header("Access-Control-Allow-Headers","Origin, X-Requested-With,Content-Type, Accept")next()})app.get("/",async(req,res,next)=>{try{res.contentType("application/json").send({"hello":"world"})}catch(err){next(err)}})app.listen(port,()=>{console.log('Example app listening at http://localhost:'+port)})

Then, you can runamplify push to deploy! You can configure your own Dockerfile and bring your own backend!

Conclusion

Thanks for checking out these features! If you have any feedback on them, I'd love to hear. Stay tuned for more coming soon 😃.