How to Connect a React Frontend to a Node Backend
Connecting React to a Node backend has a clear pattern. Here is how to do it cleanly.
How to Connect a React Frontend to a Node Backend
Connecting a React frontend to a Node backend has a clear pattern. Here is how to do it cleanly.
Set the API URL
Store the backend API URL in an environment variable on the frontend. This lets the frontend call the right backend in development and production without code changes.
Use fetch or axios
Use fetch or axios to call the backend's REST APIs. axios is popular for its interceptors, automatic JSON parsing, and cleaner error handling. Either works.
Centralize API Calls
Put all API calls in one folder, like src/api, rather than scattering fetch calls across components. This makes the API surface easy to find, change, and mock in tests.
Attach the Auth Token
For protected endpoints, attach the JWT in an Authorization header. Use an axios interceptor to add it automatically to every request, so you do not repeat it everywhere.
Handle Loading and Error States
Every API call shows a loading state and handles errors. Centralize error handling in an interceptor that shows a toast or returns a normalized error, so components handle one shape.
Handle CORS
The backend must allow the frontend's origin. Configure CORS on the backend in development, or serve both from the same origin in production to avoid CORS.
The Takeaway
Connect React to a Node backend by setting the API URL in env vars, using fetch or axios, centralizing API calls, attaching the auth token with an interceptor, handling loading and errors consistently, and configuring CORS.
Set the API URL in environment variables, use fetch or axios to call REST APIs, centralize all API calls in one folder, attach the JWT with an axios interceptor for protected endpoints, handle loading and errors consistently, and configure CORS on the backend.
Either works. axios is popular for its interceptors (useful for auth and error handling), automatic JSON parsing, and cleaner error handling. fetch is built into the browser but needs more manual setup. Choose based on your needs.
So the API surface is easy to find, change, and mock in tests. Scattering fetch calls across components makes the API hard to manage and mocks hard to write. A central api folder keeps it organized.
Use an axios interceptor that adds the Authorization header automatically to every request, so you do not repeat it on every call. The interceptor reads the token from wherever you store it and attaches it.
Centralize error handling in an axios interceptor that catches errors, normalizes them to one shape, and optionally shows a toast. Components then handle one error shape instead of each parsing errors differently.
Ready to master React completely?
Want to upskill yourself, crack your next interview, and get your dream job? Join our comprehensive course to dive deeper with high-quality video tutorials, solve interview questions, and a premium community.
Master React
Want to upskill yourself, crack your next interview, and get your dream job? Join our comprehensive course.