Making local development easier with Proxyman

The Problem

Many modern applications use the REST architecture with some or the other frontend frameworks. For example, we have several projects where we use Django as an API server with a Svelte or Vue frontend. Likewise, we have projects with a .NET Core API and an Angular frontend.

When we deploy these apps, we would typically build out the frontend code into a static package e.g. using ng build or vite build. Then, we would serve them using a reverse proxy like Nginx such that they are both served from the same URL.

In development, however, the frontend and API servers are run separately, on separate ports. For example, you might use ng serve or vite serve to run your UI server with hot reloading and all that magic, and then run your API server separately.

This presents many challenges from storing cookies for XSRF protection, to CORS policies that need to be set up for allowing access from the new origin. In your development settings, you can always allow all these hosts by configuring your environment just right but its always an added complexity with every new project. In fact, thats why I see a lot of projects just separate these servers even in production to avoid the overhead which isnt ideal. Besides, wouldn't you want your dev environment to more closely resemble your production environment?

The Solution

So with all the above, I came to the following conclusion: Wouldn't it be easier to have a quick and dirty reverse proxy setup that is as easy as running one command while emulating how the app would eventually be deployed in production?

Proxyman is just that. It allows you to define a quick development reverse proxy. Here are some examples. In all of these, the proxy server itself is running on port 5000 as the first arg passed.

Example 1: Map all requests to / to localhost:8000 and all requests to /ui to localhost:5173.

proxyman 5000 /:8000 /ui:5173

Example 2: Map all requests to / to localhost:8000 but fall back to localhost:8001 if it returns a 404.

proxyman 5000 /:8000:8001

And that's pretty much it. You can use any combination of reverse proxies to run over localhost using this simple process.

How to get started?

All you need to do is install the NPM Package for Proxyman globally:

npm i -g @vjog/proxyman