Day 17: Fetching AWS Lambda data from a React App.

Welcome to Day 17. Today we connect the dots.

The Code

Using the useEffect hook in React to call our API Gateway:

JavaScript
useEffect(() => {
fetch('https://my-api-id.execute-api.region.amazonaws.com/transactions')
.then(res => res.json())
.then(data => setTransactions(data));
}, []);

Common Pitfalls

1. CORS: If your browser console turns red, check your API Gateway CORS settings (Day 16).

2. HTTPS: S3 websites use HTTP (unless you use CloudFront), but API Gateway uses HTTPS. Modern browsers allow this mixed content for localhost, but sometimes warn in production. Ideally, we will move the frontend to HTTPS soon.

We now have a fully functional 3-tier application running entirely on Serverless infrastructure!