AWS S04 L01 connect React UI to AWS Lambda API Gateway Express server (fix CORS)
🚀 CONNECT REACT TO AN AWS LAMBDA API USING FETCH
In this lesson we connect our React frontend application to an Express API server running locally and prepare for communication with AWS Lambda and API Gateway.
We use JavaScript fetch to call the backend /health endpoint, build a reusable API service layer, and then debug and fix a real CORS error using Express response headers.
This is one of the most important frontend/backend integration lessons in the course.
---
📘 IN THIS VIDEO
Running the React frontend locally with Vite
Running the Express API server locally with TSX
Connecting React to an API using fetch
Creating reusable frontend API service functions
Calling backend endpoints from React
Using async / await with fetch
Reading HTTP response bodies
React useEffect for API calls
React state for server status
Building a footer health component
Understanding browser network requests
Debugging CORS errors in Chrome DevTools
Understanding Access-Control-Allow-Origin
Fixing CORS in Express
Understanding frontend ↔ backend communication
Preparing for AWS API Gateway + Lambda integration
---
🧠 IMPORTANT CONCEPTS
This lesson demonstrates a critical real-world architecture pattern:
React frontend → HTTP fetch → API Gateway → Lambda → Express API
It also explains why browsers block frontend API requests when CORS headers are missing — one of the most common problems in web development.
---
💻 TECHNOLOGIES USED
React
TypeScript
Vite
Express.js
Node.js
AWS Lambda
API Gateway
Fetch API
TSX
pnpm workspaces
Chrome DevTools
---
🌐 COURSE PORTAL
https://richardbraycourses.co.uk
---
📂 COURSE REPOSITORY
https://github.com/RichardBrayCourses...
---
📘 AWS SERVERLESS WEB DEVELOPMENT COURSE
Build complete real-world AWS applications using:
React → TypeScript → Express → Lambda → API Gateway → CDK → CloudFront → S3 → PostgreSQL → Cognito → DevOps