DEV Community

Cover image for Stop Mocking Everything: A Better Way to Develop Frontends with Real APIs
BOUMOUZOUNA BRAHIM VALL
BOUMOUZOUNA BRAHIM VALL

Posted on

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

#testing #javascript #webdev #frontend

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)
Enter fullscreen mode Exit fullscreen mode
  • 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"
}
Enter fullscreen mode Exit fullscreen mode

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 } }
}
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

File-based fixtures

Use real data stored in files:

"file": "fixtures/user.json"
Enter fullscreen mode Exit fullscreen mode

Getting started 

npx @bvbmz/local-proxy --target https://api.example.com
Enter fullscreen mode Exit fullscreen mode

Then point your frontend to:

http://localhost:5050/api
Enter fullscreen mode Exit fullscreen mode

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" } }
      }
    }
  ]
}
Enter fullscreen mode Exit fullscreen mode

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.

Top comments (0)