The Complete Guide to DevWallah Local Server

Local Server is the most powerful tool in the DevWallah suite. It registers a Service Worker that intercepts real HTTP requests from within the browser tab, serves mock responses, maintains an in-memory SQLite-like database, and even ships its own API client. This guide covers the full arsenal.

How In-Browser Interception Works

When you click Start Server, a Service Worker is installed at the current origin. All fetch() calls from within the same browser context are routed through the worker first. If the URL matches a defined mock route, the worker returns your custom response without ever hitting the real network.

Setting Up Your First Mock Route

Navigate to the Routes tab. Click Add Route and fill in the four fields: HTTP method, path (e.g. /api/users), response status code, and the JSON response body. Hit Save — your route is live immediately, no restart required.

// Example: GET /api/users returns a users list
{
    "users": [
        { "id": 1, "name": "Alice Chen", "role": "admin" },
        { "id": 2, "name": "Bob Martin", "role": "viewer" }
    ],
    "total": 2
}

Dynamic Path Parameters

Routes support Express-style :param syntax. Define /api/users/:id and the server will catch GET /api/users/42 automatically. The :id value is available via the built-in template variables when writing dynamic response bodies.

Route Scenarios — Happy Path vs Edge Cases

Each route can hold multiple Scenarios: variants of the same endpoint that return different status codes or payloads. Activate a scenario with one click to simulate error states (500 Internal Server Error, 403 Forbidden) without touching your code.

• 01Default (200) — normal success response
• 02Empty (200) — returns an empty array or object to test zero-state UI
• 03Error (500) — server failure scenario
• 04Unauthorized (401) — authentication required
• 05Not Found (404) — resource missing
• 06Custom — any status code with any body you define

The In-Browser Database

The Database tab gives you a full schema editor and data browser. Create collections (tables) by defining a JSON schema. The server generates realistic seed data automatically. You can then query across collections using standard SQL.

-- Join two collections for relational queries
SELECT u.name, u.email, o.total, o.status
FROM users u
JOIN orders o ON u.id = o.userId
WHERE o.total > 100
ORDER BY o.total DESC
LIMIT 10;

Database-Backed Routes

Routes can be linked to a database collection. When a GET request comes in, the response is built dynamically from the current contents of the collection. POST/PATCH/DELETE routes automatically mutate the in-memory store, so all CRUD operations Just Work.

Built-In API Client

The Logs tab doubles as a live API testing surface. Select a route, pick Simulate Request, and the tool fires a real fetch() call through the Service Worker. The full request/response cycle — including headers, timing, and body — is displayed in the log panel, which auto-refreshes in real time.

Typical Frontend Development Workflow

• 011. Open Local Server alongside your frontend project.
• 022. Define mock routes mirroring your real API contract.
• 033. In your frontend code, point all API calls to the DevWallah origin URLs.
• 044. The Service Worker intercepts every fetch, returning your defined mock responses.
• 055. Test happy-path, empty, and error scenarios with scenario switching.
• 066. Replace mock URLs with real API URLs before shipping to production.