Connect React App to a Serverless Backend Deployed with AWS CDK and Fix CORS Issues

Instructor: [0:00] Now that we have our entire infrastructure and the backend, it is time for us to build the front end. In the source code for this lesson, we can see a new directory which is called frontend. This is a simple Next.js app which essentially has a single page, index.tsx, which grabs all the to-dos from our API endpoint.

[0:20] We can see that happening over here. Whenever all the to-dos are received, we are going to go ahead and render a to-do list containing all of the to-dos. We can see that happening over here.

[0:33] At the top of this file, we can see that the API endpoint comes from process.env next public to-do endpoint. I'm going to go ahead to .env file and here we need to provide the path to our endpoint. I'm actually going to grab it from AWS console.

[0:48] I'm going to go to API Gateway console, click on the To-do service API, go to stages. Here we can see the invoke URL. I'm going to copy that and paste that over here. With that, we should be able to run our project.

[1:03] I'm going to go ahead, open up the terminal, cd into the frontend directory, and run npm run dev. OK, let's see the result. Whoops, something is broken, and we are asked to check the console for details. I'm going to open up the console and hit refresh.

[1:21] Here we can see that we are hitting a cross-origin resource-sharing error because there are no other origin headers present in the response. What we need to do in order to fix this issue is to ensure that those headers are present in the response from the server whenever the client, in our case, the localhost is going to ask our API for the list of the to-dos.

[1:44] Luckily, we are using CDK. We are the entire development team, frontend, backend, infrastructure. What I mean by that is that we can go ahead and fix that ourselves in only a couple of lines of code. Let's go back to our stack. I'm going to go back to to-do backend, where we defined the To-do service API.

[2:03] I'm going to add a new prop, which is called default cross-origin resource sharing preflight options. As we can see here, by default cross-origin resource sharing is disabled, and we need to explicitly enable it for our API. To make things easier for our sample project, I'm going to allow all origins and all methods.

[2:23] Apart from doing that, we also need to make sure that our Lambda functions are going to return the proper headers. I'm going to go ahead navigate to Lambda directory, go to create todo.ts. I'm going to paste in the proper headers.

[2:37] We are going to allow all origins and the following methods, OPTIONS, GET, POST, and DELETE. Let me just copy that. I'm going to also paste that for the delete To-do handler, as well as list To-dos handler. With all of that, we can redeploy our stack.

[2:56] One more time, let me run cdk deploy. After a successful deployment, we can go back to our app. Let me close that, refresh the page, and now we can see our AWS CDK To-do app. We can see the list of all of the To-dos that we have added. I'm going to add a new To-do, test the app, click on Add To-do. It's added.

[3:18] If I refresh the page, all the To-dos are going to remain. I can also delete a To-do. That's it. We can see that our full-stack application is now working as intended.