Build a Chat App in 9 minutes with AWS Amplify and Next JS

today we're going to be building a live chat application using aws amplify and next.js here's a quick preview of what we're going to be building we'll be using aws amplify subscriptions to render live updates to the database as they come in through our graphql api we'll also be using aws amplifiers user authentication to sign up and log in users and also to make authenticated requests on the server side to our graphql api if this sounds like something that you're interested in i would encourage you to watch this video and also consider hitting the subscribe button as well as a like button it really helps out my channel and i'm going to be coming out with more and more aws amplify and next.js content in the near future but without further ado let's get right into the video there are two prerequisites that you'll need in order to get started you'll first need an aws account and the second thing you'll need is the aws amplifi cli installed if you don't already have these go ahead and make an aws account and then run npm install g at aws amplify cli then link this cli to your aws account by running amplify configure to create an xjs project run npx create next app and the name of your application then change directories into that newly created directory and type code dot to open it up in visual studio code for our application we're not going to be needing next.js api routes so we can go ahead and delete the api folder and all of its contents then i'll go ahead and just delete all of this boilerplate code and replace the index.js to just return a hello world since this guide's not focused on css i'm just going to create these three css files and i'd encourage you to copy the css from the source code in the description the first one is going to be the global css this is next next.js global style sheet it's going to be css that's used across all of our pages the second one i'm going to create is home.module.css this is a css that's going to style our home page and the third one is called message.module.css which we're going to be using later in a component to style the way our messages look with that out of the way let's get started with aws amplify to use aws amplify we'll need two packages the first one is aws amplify and the second one is aws amplify ui react to initialize a new amplify project we'll run amplify init this command is going to kickstart a new amplifier project in our current directory and we're going to go ahead and configure it like this live chat for the name dev for the environment visual studio code for the editor javascript for the type react for the framework dot for the source build for the distribution npm run build and npm run start for the commands and we're going to be using the aws profile as the method of authentication now we're ready to add some amplify features to our application for this project we're going to be using aws amplifiers authentication and graphql api since we'll be using authentication to make verified requests to our graphql api we can actually configure them both just by running amplify add api you can follow along with these configuration settings as well we'll use graphql for the api type live chat for the name and we want amazon cognito user pools to be the default authorization type for the api we'll use the default configuration and allow users to create a username that they can sign in with we don't have an annotated graphql schema so we'll just use the simple to do default one we can open up and edit that schema now by accepting yes for the last question we've just configured a graphql api with a simple to-do schema as well as set up amazon cognito to allow users to create and sign in accounts as well as make authenticated requests to our graphql api let's go ahead and edit this schema now since this is a pretty simple application we only have one model in the schema which is a message so we'll create a type for the message adding the app model tag and creating three fields id owner and message by setting app model we're telling aws amplifier to create a table for all of our messages in a new dynamodb database we're also telling aws amplifier that we want an entry into that database for each message that gets created we'll also add the auth tag by setting the auth tag and defining allow private as the only rule we're saying that only signed in users can create read update and delete messages so anyone who doesn't have an account and isn't signed in won't be able to contribute to our chat application to deploy all of this infrastructure to the aws cloud run amplified push we'll use these settings to generate all the possible queries mutations and subscriptions from our graphql api say yes to generate all of the newly created graphql code as well as javascript for the language just accept the defaults for the rest of the options this will take a few minutes since aws amplifier is going to convert all of our configuration into aws infrastructure once that's done we'll come back to our application and connect it on our front end we'll be using nexjs's custom app in underscoreapp.js to configure our global css as well as configure aws amplify everywhere in our application you can think of underscore app.js as a wrapper around every page so in this file we're going to import amplify as well as our config and run amplify configure aws config and set ssr to true now let's go to our index.js and set up an authentication form for users to create and log into their accounts first thing we'll need to do is import with authenticator from aws amplify ui react we'll change our export default function home to just function home and then down the very bottom of the file we'll change it to be export default with authenticator home this is aws amplifier's higher order component with authenticator it'll check if the user is signed in before displaying the component and if they aren't it'll display a login form we can check this out by going back to the command line and running npm run dev and visiting localhost 3000 we're faced with a pre-built aws amplifier sign up form i'm going to go ahead and create and verify my account through this form now users can sign in i'm going to set up the basics of the chat box the chat box is just a simple form with an input and a submit button for now we'll just handle the submit by console logging whatever the user typed in and we'll come back to this later initially we want to get all of the existing messages from the chat box and display them to the user we can pre-render all of the existing messages using get server-side props from nexjs we'll be using get server side props to make an authenticated graphql request on the user's behalf on the server side and then pass that list of messages that we get as props to our main component if the user isn't signed in we'll just return an empty list of messages we'll also store the current signed end user with a use state and use effect call we can easily grab the current user from our aws amplifier cognito instance by calling auth.currentauthenticateduser whilst we're up here we'll create a state variable to store all of our messages this is because we're going to be adding to this list as live updates come in shortly we'll initialize it by spreading the props passed in of the original messages returned by get server side props if you want to test out and create some dummy data you can do that in the aws appsync graphql playground you can access that by typing amplify console api then signing into the account that you created on our front end and making some create message mutations now we have all of our existing messages let's go revisit our form we'll create another state variable to store whatever the user is typing in the input box we'll add an unchange angler to set that state variable every time a change is made in the input and modify our existing handle submit button to make a mutation to our graphql api this mutation is gonna send off the message text that the user typed in as the message field and for the owner field we'll grab the current user from state and get their username to set it as the owner we'll first sort all of our messages in state and then map over them convert them into a new component that we're going to create called the message component this message component is going to accept two props the first one is going to be the actual message and the second one is a prop called is me this is a boolean flag to detect whether we the signed in current user are the owner of that message so we'll create a folder called components and in that folder create message.js we'll set the code of that message.js to just be a simple div that has different styles depending on whether the is me flag is true or false i'm also using a simple p tag to contain the contents of the actual message with message.message now here's where the magic happens we'll go back to index.js and we'll add an aws amplify subscription this subscription is going to listen out for live events on our graphql api so we'll subscribe to the on create message graphql operation and passing the new message inside the value variable onto the end of our existing state messages this way every time a new message comes through it gets appended into state which will trigger a re-render and then show our new message on the ui now there's only one small problem that we need to fix and that's when a guest becomes a new user they won't be served the existing messages because they weren't authenticated on our server side request and get server-side props we can solve this by creating another user effect that listens for when the user state variable changes this means that when the user goes from null to a user value when they sign in we can make a regular graphql api query to get back all of the existing messages from our database and chucking all of those messages into the state messages variable and that should be it we now have a live updating server-side rendered authenticated live chat application in just under 10 minutes if you enjoyed this video remember to hit the like button and consider subscribing if you're interested in seeing more serverless content or topics like aws amplify next js and typescript because i'm going to be coming out with a bunch more videos very soon thank you so much for watching

Channel: Jarrod Watts

Views: 2,744

Keywords: aws amplify, aws, amazon web services, nextjs, nextjs tutorial, aws amplify auth, aws amplify subscriptions, live chat app, cloud computing, next.js, getserversideprops, aws amplify tutorial, aws amplify react, aws amplify nextjs, aws amplify guide, nextjs aws amplify, full stack

Id: g2kMOr3d084

Length: 10min 5sec (605 seconds)

Published: Sat May 15 2021