How to Mock REST APIs for Frontend Development

The Problem: Frontend Blocked by Backend

In most development teams, frontend and backend work is done in parallel. But the frontend often needs API responses to render components, fill forms, and test user flows. Waiting for the backend to be ready can cost days or weeks. API mocking solves this completely.

Step 1 — Define Your API Contract First

Before writing any code, agree on the API shape with your backend team. Document the endpoints, HTTP methods, request parameters, and response structure. Even a simple shared doc works:

GET /api/products
Response:
[
  { "id": 1, "name": "Widget", "price": 9.99, "inStock": true },
  { "id": 2, "name": "Gadget", "price": 24.99, "inStock": false }
]

Once this is agreed, you can mock it immediately and start building.

Step 2 — Create a Mock Endpoint

Using MockServer.in, create a new mock:

• Method: GET
• Path: /products
• Status: 200
• Response body: your JSON array above

You'll get a live URL like https://api.mockserver.in/yourslug/products that returns your JSON instantly.

Step 3 — Point Your Frontend at the Mock URL

In your frontend app, use an environment variable to control which API URL to call:

# .env.development
VITE_API_BASE=https://api.mockserver.in/yourslug

# .env.production
VITE_API_BASE=https://api.yourproduct.com

Now your frontend code stays the same — only the base URL changes between environments.

Step 4 — Mock Error States Too

Don't just mock the happy path. Create mocks for error states your UI should handle:

• 401 Unauthorized — test your login redirect logic
• 404 Not Found — test empty states
• 500 Server Error — test your error boundaries
• Empty array response — test "no results" UI states

MockServer lets you create multiple mocks at different paths or toggle between responses easily.

Step 5 — Simulate Slow APIs

Real APIs aren't always fast. Use the delay feature in MockServer to simulate latency and test that your loading states, spinners, and skeleton screens work correctly. Testing with artificial delay often reveals UI bugs that never show up locally.

When the Real API is Ready

Once the backend ships the real API, swap the environment variable back to the real URL. If the API matches the agreed contract, your frontend will work immediately with zero changes.

Summary

1. Agree on the API contract with your team
2. Create mock endpoints that match that contract
3. Use environment variables to switch between mock and real
4. Mock error states and slow responses, not just success
5. Swap to the real API when it's ready

Start mocking your REST APIs on MockServer →