# Dev servers and the Browser

> How servers you start in the terminal open in the Browser, how localhost URLs are resolved, external windows, reloads and screenshots.

Last updated: October 17, 2026
Source: https://codevre.com/docs/ide/dev-servers

The **Browser** pane has the permanent **localhost:codevre** tab (see [localhost:codevre](localhost-codevre.md)) plus one tab per page or server you open. With a single tab, the inner tab strip hides and the dock tab shows the page's own title and favicon.

## Server tabs

Start a server in the terminal:

```sh
node server.js        # or: npm run dev, npx vite, …
```

When it starts listening on a port, Codevre:

- opens (or reuses) a **localhost:PORT** tab in the Browser and loads the page
- adds a **localhost:PORT** link to the status bar, with a stop button
- starts a watcher that reloads the tab when the server's response changes

The tab picks up the page's `<title>` and favicon.

Behind the scenes the page is served by Nodepod's service worker at a URL like:

```
https://preview.codevre.dev/__virtual__/<instanceId>/3000/
```

(or `/__preview__/…`; both forms are recognized).

Your server code still listens on `localhost:3000` as usual; nothing in your code needs to change.

### Stopping a server

- Press **Ctrl+C** in its terminal, or
- click the **stop** button next to the status-bar link, or
- close its terminal.

The server's Browser tabs close with it, so dead localhost tabs don't pile up.

## Typing URLs

The URL bar understands local addresses and maps them to the right Nodepod preview:

| You type | Opens |
|---|---|
| `localhost:3000/about` | The server on port 3000, `/about` |
| `127.0.0.1:5173`, `0.0.0.0:8080`, `[::1]:4000` | That port's server |
| `:3000` or `3000` | Port 3000 |
| `/about` | `/about` on the current tab's server |
| `example.com` | `https://example.com` |

Links in the terminal work the same way. Click a local server link to open it in a Browser tab. Right-click for **Open in Browser Tab**, **Open in External Window** or **Copy Link**.

Many sites refuse to be shown inside a frame. If an external site stays blank, use **Open in new tab**.

## Navigation

Back, Forward and Reload work for server tabs, including nested routes. A reload keeps the page's current route. The URL bar follows the page as you click links. Reload on the localhost:codevre tab reruns VRE.

## Opening a server in its own window

The **Open in new tab** button (or **Open in External Window** on a terminal link) opens the page in a separate browser window. Nodepod servers only exist inside your IDE tab, so the window connects through a relay page on `codevre.com` that forwards its requests and WebSocket messages to your runtime. Keep the IDE tab open while you use it. The window reloads along with its tab.

## Screenshots

The camera button saves a screenshot of the visible preview, VRE or a server tab, into the project as `cover.png`, or `cover (1).png` if that exists. The notification lets you open it or replace the old `cover.png`. The Agent uses the same capture for its own checks.

## DevTools for servers

Server tabs have DevTools like localhost:codevre: Elements, Console and Network for the page. See [DevTools](devtools.md).

## Tips

- If your server needs to restart after code changes, use a watcher like `node --watch server.js`, or restart it yourself. A static site doesn't need a server at all; use localhost:codevre.
- Send `Cache-Control: no-store` from simple servers so reloads always show your latest files.
- Serve files with `path.join(__dirname, …)` rather than paths relative to `/`. In Nodepod, `/` is the runtime's root, not your project.