AWS API Gateway Explained With Real Web App - React Lambda
⭐️This article is paired with a YouTube video. As you read, each video clip starts at a specific time and compliments the article.
Using API Gateway helps keep your applications secure and organized. Today we’ll explain API Gateway by looking at a real-life example of my app GrubGuide, which uses it to connect a React front end to a Lambda Function.
Hi, I’m Dylan, a Cloud Engineer living in Oregon. A few days ago I posted on Reddit asking which AWS topics people had a hard time conceptualizing as a beginner. This was the most upvoted response.
What is a URL Router?
We’ll let’s explain what he means by that. In other words, he’s saying API gateway is basically the same as using a URL router but it’s connected to the AWS cloud.
You are probably familiar with routers like express.js if you took a web development class in college, for me it was CS 290.
A router is a central web development concept and is simple at its core. Look at the URL bar for this video. Everything after .com is the route. This route tells the YouTube app to watch a video of a certain id. If I search for white noise, it will ask youtube for results of white noise.
How API Gateway is Like a URL Router
API Gateway works the same way by accepting routes and doing different tasks. The difference is the route isn’t passed into the url up top, it’s passed into the API Gateway. ⭐️(Start video at 1:15)
These are the building blocks for a complex application. Let’s see how this works in a real web app.
This is GrubGuide, it’s built with AWS Amplify and React.
Amplify makes it really easy to make applications and does a lot of the heavy lifting of connecting everything up. GrubGuide’s purpose is to deliver delightful, fast, and personal restaurant suggestions to tourists in my home town Bend, Oregon.
The user fills out a survey of their preferences and is returned their perfect restaurant. In order to find their perfect restaurant, the survey is passed through API Gateway and sent to a lambda function which processes the result, pulls the restaurant from a database, and stores the response. ⭐️(Start Video at 3:34)
As we saw, API Gateway is a single door connecting your front and back end which results in more organization and security.
This is just one example, and you can get a lot more in-depth than GrubGuide. I hope this helps you use API Gateway to bring more organization and security to your own projects.
Have a great day, we’ll see you next time!
~ Dylan Albertazzi