Adding some REACT to our Star Wars quotes generator | S02 E23 | Build On Weekly
This week, Jacquie and Darko go back to their Star Wars quotes API, and go boldly where no back-end engineer has gone before. Making some Front End with REACT 🤯
Hello friends and welcome to this week's Build On Weekly episode show notes! Today is PART 3, yes you heard that right, Part 3 of our Star Wars Quote Generator adventure. Last time we looked at this, we managed to add an API to PUT new Quotes into the Database. And this time we are doing something scary (at least for us back end folks), we are adding a REACT front end to our quotes API.😭
Check out the recording below for some fiddling around with CORS, Darko's stunning web design, and all around tomfoolery! 💜
And if you want to try and improve the code of the entire thing we built. Check it out right here on github
Oh, and if you are here just to learn how to enable CORS on Lambda and API Gateway, here is what you need to do:
Ensure that your Lambda response function contains the following code:
1
2
3
4
5
6
7
8
9
10
11
12
const response = {
statusCode: 200,
headers: {
"Content-Type" : "application/json",
"Access-Control-Allow-Headers" : "Content-Type,X-Amz-Date,Authorization,X-Api-Key,X-Amz-Security-Token",
"Access-Control-Allow-Methods" : "OPTIONS,POST",
"Access-Control-Allow-Credentials" : true,
"Access-Control-Allow-Origin" : "*",
"X-Requested-With" : "*"
},
/* rest of code goes here */
};
And when creating up the API Gateway with CDK do it like so:
1
2
3
4
5
6
7
8
9
10
11
12
// API Gateway
const api = new apigateway.RestApi(this, "Api",{
defaultCorsPreflightOptions: {
allowOrigins: apigateway.Cors.ALL_ORIGINS,
allowMethods: apigateway.Cors.ALL_METHODS // this is also the default
}
});
const quotes = api.root.addResource('quotes')
quotes.addMethod("GET", new apigateway.LambdaIntegration(quoteLambda));
quotes.addMethod("POST", new apigateway.LambdaIntegration(putLambda));
You're welcome 😅
Check out the recording here:
🐦 Reach out to the hosts and guests: