How to run a dev server and a mock API together

Q: Is DevWebUI free for frontend developers?

DevWebUI is free, and its core features need no account. It is open source under the MIT License. The source code is open for anyone to read and reuse under that licence.

Run a dev server and a mock API together by preparing both, starting them in order, and keeping ports and logs easy to follow.

By SayDeploy · 2026-10-26

SayDeploy is published by LunarWerx, which makes some of the tools compared here.

Run a dev server and a mock API together by checking that each one starts alone, starting the mock API first, pointing the frontend at it, and keeping ports and logs easy to find. Saving the working setup lets you start the same pair again later.

Option	What it does	Cost
DevWebUI	Starts, stops and restarts local dev servers from one dashboard, and shows each one's status, CPU, memory and logs. ^[1]	Free, and core features need no account. ^[1]
Terminal scripts	Runs commands you write yourself in a terminal.	not published
Development environment run configurations	Runs project commands from inside a development environment.	not published

What you need before you start

Before a dev server and a mock API can run together, each one needs its own working folder and a start command that works when run alone. Install the packages each one needs, then start each on its own and confirm it runs without errors.

Start the mock API first when possible, because the frontend usually calls it for data as soon as it loads. Note the port each one uses and the address the frontend expects for the API, so a mismatch shows up early. Check the environment settings the frontend reads, such as the API address, and confirm they point to the mock.

If a database or another service must also run, list it too. A short written list of these details makes the rest of the setup faster and easier to repeat.

Step by step

Write down each service the setup needs: the dev server and the mock API, with the folder, start command, and port for each.

Install dependencies in both folders and start each one alone to confirm it works.

Point the frontend's API address at the mock API's port so the two can talk to each other.

Start the mock API first, then the dev server.

Give each process a clear name in its terminal or log so errors can be traced to the right one.

Watch for port conflicts. If a port is taken, change the port in the configuration or stop the process that holds it.

Open the frontend and check that requests reach the mock API and that responses come back as expected.

Save the working commands or a project configuration so the same pair can start again later. Add automation only after the manual steps work.

Tools that can do it

DevWebUI is made by the team that publishes this site. It starts, stops and restarts local dev servers from one dashboard, and shows each one's status, CPU, memory and logs. ^[1] One small file per repo can list the servers to run, so the mock API and the dev server can be started from the same place. ^[1] If a port is already taken, DevWebUI shows which process holds it and can free the port when you ask. ^[1] A devwebui command-line tool talks to the same REST API, so the pair can also be controlled from a script without the dashboard. ^[1] If the project runs its backend in containers, a compose block can start the docker compose stack first, wait for its ports, and set environment variables such as DATABASE_URL before the servers start. ^[1]

Terminal commands and saved scripts are another option. They run the commands you write yourself, so the order of startup and the stop steps depend on how the script is written.

Project run configurations inside a development environment can also start related commands from one place, if the project already uses that environment.

Other tools may offer different ways to manage local processes. Check how each one orders startup, handles ports, and stores project settings before choosing.

Common mistakes to avoid

Starting the frontend before the mock API often leads to failed requests that look like frontend bugs. Using the same port for two services makes one of them fail, so record the ports before starting anything.

Changing the API address in one place but not in the frontend's settings breaks the connection without an obvious error. Leaving old processes running keeps ports busy and can make the next start fail.

Reading only one terminal window can hide the useful error, which may appear in the other process. Making several changes at once also makes it hard to tell which one caused a problem, so change one thing at a time and test after each step.

Frequently asked questions

How can frontend developers run a dev server and a mock API together?

Frontend developers can run both by starting the mock API first, pointing the frontend's API address at it, and keeping each process's port and logs easy to find. Running each one alone before starting them together shows problems early. Saving the working commands or a project configuration lets the same pair start again without rebuilding the setup each time.

Should the mock API and the dev server use different ports?

Yes. Each running service needs its own port, so two services cannot share one. Writing down the port for each service before starting makes conflicts easier to spot. If a conflict happens, identify the process holding the port and decide whether to stop it or change the configuration. Keeping a list of ports as the setup grows helps avoid repeat conflicts.

Is DevWebUI free for frontend developers?

DevWebUI is free, and its core features need no account. ^[1] It is open source under the MIT License. ^[1] The source code is open for anyone to read and reuse under that licence. ^[1]

Can DevWebUI show errors from a mock API and a dev server in one place?

DevWebUI collects errors into one log that merges repeats and is kept across restarts. ^[1] Each file and line link opens in your editor, so a problem in the mock API's code or the frontend's code can be reviewed from the same log. This can help developers look at errors from several local services without searching through separate process windows.

What should frontend developers check before choosing a tool for this setup?

Check how the tool orders startup, how it handles ports that are already in use, where it stores project settings, and whether it runs on the operating systems the team uses. It also helps to see whether the mock API's address and the frontend's settings can be kept in one place. A good match depends on the project's needs and how much control the developer wants over each process.

DevWebUI is free, and its core features need no account. ^[1]

Try DevWebUI

Sources

DevWebUI's own description of itself (the product of this site's publisher)