Connect React app to a serverless backend deployed with CDK and fix CORS issues
It is time.
Our serverless backend and infrastructure (that we both created and deployed ourselves with CDK!) is ready so we can connect it to our React app.
In this quick lesson we're going to learn how to connect the React app from the source code of this course to our API as well as how to add appropriate CORS headers to our API response.
Instructor: [0:00] It is time. Now that our serverless backend is ready, we can start connecting it to our frontend. In the source code for this egghead course, there's a frontend directory which contains a React application.
[0:10] I'm going to open up my terminal. Inside of this frontend directory, I'm going to run yarn install in order to install all the dependencies. After it's done, let me clear the terminal, enter run npm start in order to start the React application.
[0:22] Let's take a look. This is not perfect. Something is obviously broken, and we have to check the console for details. If I open up the console, we can see that we are trying to reach the API from I do not exist.execute API amazon.com.
[0:36] Let's dig in. In the app component of the React application, we can see that we are trying to get the API endpoint, and whenever we have a response, we are going to get all the todos and display them. Otherwise, we are going to set the error to true. When that happens, we are going to show the error message. We can see that error message over here.
[0:52] Let's see what's up with API endpoint. This is currently set to I do not exist. If we take a look, we are going to see that we are getting the API endpoint from the end variable React-app-todo endpoint. We can see at that end file over here, and this is where this endpoint is defined.
[1:07] Instead of using that, I'm going to delete. Next up, I will be going back to Insomnia where I can copy and paste the endpoint over here. Right now, I can hit Save, open up the terminal and restart the app. I'm going to clear the terminal and run npm start once more.
[1:20] This is a bit better. We are fetching the data from our endpoint, but unfortunately, the request has been blocked by the cross-origin resource sharing policy. We have to set the proper headers in the response from our API. Luckily, with CDK we can fix that ourselves because we are the entire development team, backend, infra, frontend, whatever.
[1:39] In order to set those headers, we have to go back to our todo-handler Lambda function. In the CreateResponse method, apart from the status code and the body, we are also going to include headers.
[1:49] I'm going to add to, so first up, Access-Control-Allow-Origin, I'm going to set it to * because we would like to allow this API to be accessed from all origins. I will also set the Access-Control-Allow-Methods to OPTIONS, GET, POST and DELETE, because those are the only request types that I would like to support in this API.
[2:05] A quick note about the OPTIONS request. According to the specification, browsers are going to [inaudible] the request. First off, they are going to send the OPTIONS request method. Then upon the approval from the server, they are going to send the actual request, for instance, GET, POST, or DELETE.
[2:20] We have to support that in our Lambda function as well. Let me scroll down. Over here, whenever the HTTP method is going to be equal to OPTIONS, I'm going to return a CreateResponse, and I'm going to set it to OK.
[2:31] Now that we have everything set up, let's go ahead and deploy that. I'm going to run cdk deploy. It's been deployed, so let's go ahead and test our app.
[2:38] We can see that we do get all those todo items. I can also add a new-todo, click on Add todo to add it. I can also go ahead and delete that. I would like to emphasize that all of that is using the same programming language, TypeScript, to create frontend, backend and infrastructure in AWS, and all of that was created and provisioned with AWS CDK.