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 2 min read
On this page

The Browser pane has the permanent localhost:codevre tab (see localhost:codevre) 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.

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.

  • 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.

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

You typeOpens
localhost:3000/aboutThe server on port 3000, /about
127.0.0.1:5173, 0.0.0.0:8080, [::1]:4000That port's server
:3000 or 3000Port 3000
/about/about on the current tab's server
example.comhttps://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.

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

Link to “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.

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.

Server tabs have DevTools like localhost:codevre: Elements, Console and Network for the page. See DevTools.

  • 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.
Docs