Nginx for local development - really??

#nginx #development #webdev

Simplifying Local Development with a Reverse Proxy

(Daddy just go a new hammer - an he loves to use it!)

When building modern web applications, it’s common to have a frontend (like a Single Page Application) and a backend API running on different ports or even different servers. This setup can introduce challenges—especially when it comes to routing API requests during local development.

The Problem

Most frontend code expects to call the backend API at a specific route, such as /api/endpoint. However, in a local development environment, the backend might be running on a different port (e.g., localhost:5130), while the frontend is served on another (e.g., localhost:9876). This mismatch often leads to:

CORS (Cross-Origin Resource Sharing) issues
The need for special-case code in the frontend to handle different API URLs for development and production
Confusing configuration and extra setup for new developers

The Solution: Using a Reverse Proxy

A reverse proxy, such as Nginx, can act as a single entry point for both the frontend and backend. Here’s how it helps:

The frontend always calls /api/... for API requests, regardless of the environment.
Nginx listens on a single port (e.g., localhost:8314) and serves the frontend app.
When Nginx receives a request to /api/..., it transparently forwards it to the backend API running on its own port.
No special-case code is needed in the frontend for different environments.

Benefits

Consistency: The frontend code remains the same in all environments.
Simplicity: Developers don’t have to remember or configure different API URLs.
Realism: The local setup closely mirrors production, making debugging easier.
No CORS headaches: All requests appear to come from the same origin.

Conclusion

By introducing a reverse proxy into your local development workflow, you can streamline your setup, reduce configuration headaches, and make onboarding new developers much easier. It’s a small change that pays off with a smoother, more professional development experience.

By the way - I love my new hammer!