October DealsAmazon USOctober deal check: compare before you payAmazon US: current deals, useful picks and tech finds.Check DealsPC HealthRecommendedCrashes, freezes, slowdowns? Check your PC nowSpot repairable issues before they interrupt work.Check PCOctober DealsAmazon USDeal season is back - check today's better picksAmazon US: current deals, useful picks and tech finds.See Picks×
Skip to content
World desk5 min

How to Mock an OpenAPI Server Locally for Frontend Development

Use Prism to run a local mock from an OpenAPI file, point your frontend to it, and test routes and UI states before the real API is ready.
Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.

Run a local mock from your OpenAPI file, then point your frontend at the mock’s address. Prism is a direct CLI option: it can generate responses from examples or schemas and validate requests against the API description. A successful mock call checks the route and contract you exercised; it does not prove that the real backend behaves the same way.

What you need before you start

  • An OpenAPI YAML or JSON description covering the paths and HTTP methods the screen uses, plus relevant parameters, request bodies, and response schemas.
  • Node.js meeting Prism’s documented requirement: 18.20.1 or later, with a stated exception for Node.js 18.x requiring 18.16 or later. Check the current Prism project guidance before adopting the setup, because package requirements can change.
  • A way to configure your frontend’s development API base URL, such as its existing environment variable or development proxy.

Start a local Prism mock

  1. Review the OpenAPI file. Confirm it describes the operations the frontend needs. For UI states that must be predictable, add response examples to the relevant operations. Prism uses examples when available and can generate values from schemas when examples are missing.
  2. Install the CLI. The Prism project documentation gives this global npm installation command:
    npm install -g @stoplight/prism-cli
  3. Run the mock against your spec. From a terminal, substitute the path to your file:
    prism mock path/to/openapi.yaml
    The Prism CLI guide shows the server listening at http://127.0.0.1:4010 and printing the operations it discovered. Use the address and port shown by your own process.
  4. Point the frontend at that address. Set the API base URL using the project’s existing development configuration. Keep this setting separate from production configuration so the app does not accidentally ship with a local URL.
  5. Call a route and inspect the result. Use the frontend or an HTTP client such as curl to request an operation listed by Prism. Check the status, headers, and response body against what the screen expects. The CLI guide includes a local curl example.

Make mock responses useful for UI work

Write examples for important states

Schema-derived data is useful for exercising a route, but it may not represent the application-specific cases a screen needs. Add explicit examples for states such as an empty collection, a normal successful response, and an error response. Prism supports multiple named examples; in its documented setup, select one with a request header such as Prefer: example=empty, replacing empty with the example name in your specification. Include the expected response status code with the example: Prism’s guidance notes that validation or security behavior can affect the status and prevent an example from being selected.

As an Amazon Associate I earn from qualifying purchases.

Use dynamic generation when appropriate

For responses that should vary rather than repeat authored example data, Prism documents dynamic mode through prism mock -d or a Prefer: dynamic=true request header. Use named examples when a UI state needs to be repeatable; use dynamic responses when variation is more useful than deterministic fixtures.

Free tools Windows power users keep installed

One-click scans. No signup required.

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.

Mock only the routes a screen needs

You do not have to treat the entire API as a finished product before unblocking one screen. Start with the operations that screen actually calls, make sure their request and response shapes are represented in the OpenAPI file, and add examples for the states the interface must render. Run the mock from that contract and direct the frontend to it. If the specification lacks an operation, parameters, or response details the UI relies on, improve the contract first; a mock cannot reliably supply behavior that is not described.

#1 Best Overall
CanaKit Raspberry Pi 5 Starter Kit PRO - Turbine Black (128GB Edition) (8GB RAM)
  • Includes Raspberry Pi 5 with 2.4Ghz 64-bit quad-core CPU (8GB RAM)
  • Includes 128GB Micro SD Card pre-loaded with 64-bit Raspberry Pi OS, USB MicroSD Card Reader
  • CanaKit Turbine Black Case for the Raspberry Pi 5
  • CanaKit Low Noise Bearing System Fan
  • Mega Heat Sink - Black Anodized

Choose a tool based on the kind of mock you need

Need Starting point What to assess
Generate routes from OpenAPI and validate requests against the description Prism Response generation, examples, content negotiation, validation, and CLI setup.
A configurable mock-server workflow Mockoon Environment setup, local behavior, CORS requirements, and how the team stores or shares configuration.
Load a local or remote spec and adjust straightforward server settings OpenAPI Mock Specification source, port, CORS, and response settings. Its documentation says CORS is configurable and disabled by default.
General HTTP stubs or broader request-matching behavior WireMock Standalone deployment, request matching, dynamic responses, and whether OpenAPI-derived behavior is necessary.

These are documentation-based distinctions, not results of comparative hands-on testing. Choose according to how closely responses need to follow the OpenAPI contract, whether request validation matters, how much bespoke behavior the UI requires, and how the team wants to configure and share mocks. Prism is documented as an open-source, self-hosted CLI; the workflow does not require a paid tool.

Troubleshoot failed requests

The mock does not start or a route is missing

  • Check that the spec path is correct and that the file describes the operation you are calling.
  • Read Prism’s startup output for the discovered operations and the address it is listening on; use those details rather than assuming a route or port.
  • Confirm the operation’s method and path match the frontend request.

The browser reports a CORS error

A browser cross-origin error is distinct from a missing route. First try the same request with curl: if it reaches the mock, inspect the browser’s network panel and configure CORS on the mock or use the frontend’s existing development proxy. OpenAPI Mock’s documentation describes a configurable CORS setting that is disabled by default.

Rank #2
CanaKit Raspberry Pi 4 4GB Starter PRO Kit - 4GB RAM
  • Includes Raspberry Pi 4 4GB Model B with 1.5GHz 64-bit quad-core CPU (4GB RAM)
  • Includes Pre-Loaded 32GB EVO+ Micro SD Card (Class 10), USB MicroSD Card Reader
  • CanaKit Premium High-Gloss Raspberry Pi 4 Case with Integrated Fan Mount, CanaKit Low Noise Bearing System Fan
  • CanaKit 3.5A USB-C Raspberry Pi 4 Power Supply (US Plug) with Noise Filter, Set of Heat Sinks, Display Cable - 6 foot (Supports up to 4K60p)
  • CanaKit USB-C PiSwitch (On/Off Power Switch for Raspberry Pi 4)

The response is unexpected or an example is not selected

  • Check that the example is attached to the correct operation and response status code.
  • Check the example name in the Prefer: example=<name> header.
  • Review request validation and security requirements that might change the response status or affect which response example applies.
  • If Prism is generating from a schema rather than an example, add an explicit example when the frontend needs a particular business state.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Support on Ko-Fi

Keep the setup reproducible—and know what it cannot verify

Record the mock tool, spec path, local port, frontend base-URL setting, and any example-selection convention in the project README or package scripts. Recheck the tool’s current installation and version guidance when upgrading.

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.

A mock response is generated from the description and its examples or schemas. It helps unblock UI implementation and check that requests and response shapes fit the modeled contract. It does not, by itself, establish production availability, authorization behavior, persistence, or parity with backend business logic. Test those against the actual backend when it is available.

Quick Recap

Bestseller No. 1
CanaKit Raspberry Pi 5 Starter Kit PRO - Turbine Black (128GB Edition) (8GB RAM)
CanaKit Raspberry Pi 5 Starter Kit PRO - Turbine Black (128GB Edition) (8GB RAM)
Includes Raspberry Pi 5 with 2.4Ghz 64-bit quad-core CPU (8GB RAM); CanaKit Turbine Black Case for the Raspberry Pi 5
$259.95
Bestseller No. 2
CanaKit Raspberry Pi 4 4GB Starter PRO Kit - 4GB RAM
CanaKit Raspberry Pi 4 4GB Starter PRO Kit - 4GB RAM
Includes Raspberry Pi 4 4GB Model B with 1.5GHz 64-bit quad-core CPU (4GB RAM); Includes Pre-Loaded 32GB EVO+ Micro SD Card (Class 10), USB MicroSD Card Reader
$159.99
Rank #4
Pironman 5-MAX Raspberry Pi 5 Case Dual NVMe M.2 SSD PCIe, Mini PC NAS RAID 0/1 Hailo-8L AI Accelerator PWM Tower Cooler+Dual RGB Fans, OLED Module, Safe Shutdown, Standard HDMI (RPI5 Not Included)
  • [ULTIMATE RASPBERRY PI 5 CASE & MINI PC] - Unlock the full potential of your Raspberry Pi 5 with the Pironman 5-MAX — the most advanced Raspberry Pi 5 Case for power users. This high-performance Raspberry Pi 5 Cooling Case features dual NVMe M.2 slots with RAID 0/1 support, AI accelerator compatibility ( e.g. Hailo-8l M.2 AI), a PCIe Gen2 switch, a PWM tower cooler + dual RGB fans and a smart OLED display. With its dual transparent panels and optimized cable management (including full-size HDMI), it’s the ideal Raspberry Pi 5 Enclosure for building a high-speed NAS, AI edge computing device, or Home Assistant hub. (Raspberry Pi NOT Included)
  • [DUAL NVMe M.2 SLITS & NAS RAID SUPPORT] - Supercharge your storage with the best Raspberry Pi 5 NVMe Case solution. Featuring two expandable NVMe M.2 slots (2230-2280) powered by a built-in PCIe Gen2 switch, this Raspberry Pi 5 NAS Case supports RAID 0/1 for ultra-fast data setups. Whether you're using a high-speed NVMe SSD or a Hailo-8L AI accelerator, Pironman 5-MAX delivers the ultimate performance boost for advanced Raspberry Pi 5 AI applications and edge computing
  • [ADVANCED COOLING SYSTEM] - Engineered for high-performance builds, Pironman 5-MAX features a powerful tower cooler, one PWM fan, and dual RGB fans for enhanced airflow. The dual transparent panel design improves ventilation while showcasing vibrant RGB lighting. Ideal for cooling both the Raspberry Pi 5 and dual NVMe SSDs or AI accelerators like Hailo-8L, it ensures stable operation under heavy workloads with low noise and long-term durability
  • [SMART OLED DISPLAY WITH VIBRATION WAKE-UP] - Pironman 5-MAX features a 0.96" OLED screen that delivers real-time system insights including CPU usage, memory, temperature, IP address, and disk status. With customizable display options and auto sleep mode, the screen can be instantly reactivated by a light tap thanks to the built-in vibration sensor—offering a smarter and more interactive experience
  • [ENHANCED FUNCTIONALITY] - Pironman 5-MAX empowers your Raspberry Pi 5 with advanced features like safe shutdown via a metal power button, customizable RGB lighting, dual full-size HDMI ports, vibration-triggered OLED wake-up, and an external GPIO extender. It also includes RTC battery support for timekeeping and seamless Home Assistant integration. With detailed guides, online tutorials, and full technical support from SunFounder, setup and use are effortless and worry-free
Rank #3
UCTRONICS 19” 1U Rack Mount for Raspberry Pi with SSD Mounting Brackets, Thumbscrews Front Removable Bracket Supports Up to 4 Raspberry Pi 5, 3B/3B+, 4B and 4 SSDs, Option SD Card Adapter
  • Design for Raspberry Pi: Supports installation of 4 Raspberry Pis and 4 ssds, compatible with any 2.5” Solid State Drive (7mm/9mm) and Rpi 4B/3B+, and other B/B+ models.
  • The SSD mounting bracket also has two holes reserved for the SD card extension adapter ASIN: B09CKRDFTH, which allows you to access the SD card from the front of the rack.
  • Easy to Setup: Just use two included thumbscrews to mount the rackmount, which adopts a screw-in design, which helps you install and replace quickly and easily, no tools needed!
  • Applications: This is a hardware solution to get ingenious use of the Raspberry Pi, with this kit and open source software OpenMediaVault, you can use the Pi as a NAS Server, Surveillance station, or even a Web server.
  • Optional accessories: Single mounting bracket: B09GFQLPTY; Micro SD card extension adapter ASIN: B09CKRDFTH. I/O Panel: B09FXRQPFM

Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.

Leave a Reply

Your email address will not be published. Required fields are marked *

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.

More from the Wire

  1. World desk4 min
    How to Spot an AI Voice Scam Before Sending MoneyDon’t rely on how a caller sounds. Pause, call back through a known number, and verify the emergency with another trusted person before sending money.
  2. Mountain View desk4 min
    Google’s SynthID Detector: How to Check AI-Generated Images, Video and AudioGoogle’s SynthID Detector looks for an embedded watermark in supported images, video and audio. Here is what its results do—and do not—show.
  3. Redmond desk20 min
    How to create a link to File or Folder in Windows 11Windows 11 gives you several ways to point to a file or folder without moving or duplicating it. You can create a desktop shortcut,…
Recommended PC Tool
Recommended PC Tool
Outdated Drivers Are Slowing You DownFree scan - exact matches
PC Slower Than It Used to Be?Free scan - under a minute

Two free Windows tools

One Free Minute Could Fix That PC

Before you go - each of these free tools takes about a minute and tackles what quietly slows a Windows PC down.

Special offer. View Outbyte info, uninstall instructions, EULA, and Privacy Policy.