Link your AWS Amplify Backend to your Frontend

Ali Spittel
InstructorAli Spittel

Share this video with your friends

Send Tweet
Published 3 months ago
Updated 3 weeks ago

To be able to view our data on an application, we are going to create a next.js app in the terminal. We need to install aws-amplify and aws-amplify/ui-react. Lastly, we need to link up our front end with our backend. AWS Amplify makes this easy by literally giving us the code that we just need to paste into our terminal.

Instructor: [0:00] Now we'll get started on the front-end. First, create a Next.js app. Change into the directory that created. Install AWS Amplify. Now install the Amplify React components. Now we'll need to link our backend and frontend. Click local setup instructions.

[0:33] Copy the command shown. Paste it into your terminal. Run the command. If you're asked to confirm if you want to log in, click yes. Now open up your text editor in the project. We first generated a boilerplate Next.js app and that's where pages public and styles come from.

[0:51] We then pull down our Amplify app which generated a lot more code. This Amplify directory was populated and the AWSexports.js was created.

[1:02] We need to tie our frontend Next.js code to our backend environment. If you go to pages app.js, we'll add in the configuration here. Import Amplify and auth mode strategy type from AWS Amplify. Also import your AWS config. This will be from your source AWS exports file.

[1:35] This file contains all your information about your backend. For example, where your API is deployed and your AWS regions. Now I'll run Amplify.configure and we'll first provide a copy of that AWS config. We'll add some additional information about data store.

[2:04] We'll set the auth mode strategy type to auth mode strategy type.multi auth. We set multiple authorization rules on our data and in order to use these on our frontend, we'll need to enable multi auth. We've set up a frontend app and we've tied our frontend to our backend.