Stop Mocking Everything: A Better Way to Develop Frontends with Real APIs

BOUMOUZOUNA BRAHIM VALL — Sat, 21 Mar 2026 15:29:53 +0000

As frontend developers, we’ve all faced this situation:

Backend is not ready
You need to test error states but cannot trigger them
You mock everything, and then nothing matches production

So you end up choosing between:

Mock everything (fast but unrealistic)
Use real APIs (accurate but limited)

What if you did not have to choose?

Meet `local-proxy`

I built a small tool to solve this problem:

Mock only what you need. Use the real API for everything else.

GitHub: https://github.com/BoumouzounaBrahimVall/local-proxy
Example: https://boumouzounabrahimvall.github.io/local-proxy/example/
Article: https://brahim-vall-boumouzouna.up.railway.app/posts/local-proxy/

The idea

Instead of replacing your backend, you place a proxy in front of it:

Your App → local-proxy → Real API
                │
         (intercepts some calls)

If a request matches a rule, it returns a mock
Otherwise, it forwards the request to the real backend

Why this approach works

Partial mocking

Mock only the endpoints you care about:

{
  "method": "POST",
  "match": "/v1/users",
  "active_scenario": "error"
}

Everything else still goes to the real API.

Scenario-based mocking

Define multiple behaviors for the same endpoint:

"scenarios": {
  "success": { "status": 201, "json": { "id": 1 } },
  "error": { "status": 400, "json": { "error": "Validation failed" } },
  "slow": { "delay": 3, "json": { "id": 1 } }
}

Switch between success, error, or slow responses instantly.

Hot reload

Update your scenarios.json and changes apply immediately. No restart needed.

Delay simulation

Simulate slow APIs easily:

"delay": 3

File-based fixtures

Use real data stored in files:

"file": "fixtures/user.json"

Getting started

npx @bvbmz/local-proxy --target https://api.example.com

Then point your frontend to:

http://localhost:5050/api

Real use cases

Frontend development without a ready backend

Mock missing endpoints while using real ones for the rest.

Debugging edge cases

Force error responses or unusual behavior.

QA and demos

Switch scenarios live between success, error, or empty states.

Testing UX properly

Simulate latency, failures, and inconsistent APIs.

Why not just use MSW or Mirage?

Tool	Works on	Real API	Partial Mocking	Scenarios
MSW	Browser	No	Limited	No
MirageJS	Browser	No	No	Limited
local-proxy	Network	Yes	Yes	Yes

local-proxy works at the network level, between your app and your backend.

Type-safe configuration

Built with TypeScript
Validated with Zod

This ensures your configuration is correct and prevents silent failures.

Example configuration

{
  "rules": [
    {
      "method": "POST",
      "match": "/v1/users",
      "enabled": true,
      "active_scenario": "error",
      "scenarios": {
        "success": { "status": 201, "json": { "id": 1 } },
        "error": { "status": 400, "json": { "error": "Validation failed" } }
      }
    }
  ]
}

The idea behind it

Do not replace your backend entirely. Control only what you need.

Try it

GitHub: https://github.com/BoumouzounaBrahimVall/local-proxy
Example: https://boumouzounabrahimvall.github.io/local-proxy/example/

Feedback

This is an early tool. Feedback is welcome:

What is missing
What would improve your workflow
How you would use it

Support

If this is useful, consider starring the repository on GitHub.

DEV Community: BOUMOUZOUNA BRAHIM VALL