Link your AWS Amplify Backend to your Frontend

Instructor: [0:00] Now I'll get started on the frontend. First, create a Next JS app. Change into the directory that created. Install AWS Amplify. Now install the Amplify React components. I'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. Open up your text editor in the project. We first generated a boilerplate Next JS app and that's where our page is 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 AWS exports.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.

[1:29] This will be from your source AWS to exports file. This file contains all your information about your backend. For example, where your API is deployed and your AWS regions. I'll run Amplify.configure. We'll first provide a copy of that AWS config.

[1:55] We'll add some additional information about data store. We'll set the auth-mode strategy type to auth-mode strategy type.multi auth. We set multiple authorization rules on our data. In order to use these on our frontend, we'll need to enable multi auth.

[2:25] Import the Amplify CSS file. Also import the Amplify provider component. This component will add styling to the rest of your app. I'll also add it as my top level component for my application. Now, we've set up a frontend app, and we've tied our frontend to our backend.