Pages and the preview
The address bar, the page picker, the dev server, and checking a layout at any width.
The preview is a real browser view of a real address.
The bar
Left to right: what a click does (Inspect or Browse), a Pages button, the address, and reload.
The page picker
Pages lists what the site actually has — every page under src/pages, and
every entry in every collection — and jumps the preview to it.
A dynamic route is previewed at an address that exists rather than at the pattern that generates it, which is otherwise a 404 with no explanation. A draft entry opens as itself.
The address bar
Type an address and the preview goes there. It keeps what you typed.
The dev server
Connect an Astro project and FEWD opens a terminal pane and runs npm run dev
for you. The preview waits for the server to answer and then loads it — at the
port the server actually used, which is not always the one it was asked for.
Servers FEWD started are FEWD’s to stop, and it stops them: on quit, on disconnect, and when you move on. One you started yourself in the terminal is still yours.
If a server outlives its project — because the folder moved while it was running — FEWD now stops it anyway, having remembered the port as well as the path.
When it says the server is serving a different folder
A dev server that has lost its project answers every request with an error page. That page loads, so for a long time nothing treated it as a failure and you got a stack trace in the preview.
FEWD now reads the page, and when every source file it names sits outside your project, says so in plain words instead.
An error in your own code is left alone to be read as written.
When there is no server
No dev server is running at that address, with a Start the dev server button beside it — whether it never started, was stopped, or died while you were working.
It reuses the terminal you already have open rather than adding another.
FEWD decides this by asking whether anything is actually answering. It used to count terminal panes as a stand-in for “a server is running”, which fails in the ordinary case: kill a dev server and the pane stays, after which every page you opened silently got no server, an empty preview and no explanation.
When it gives up
The poller stops after a minute and says so, rather than checking a dead port every two seconds for as long as the app is open.
Width
Drag the preview’s edge to narrow it and the width is labelled as you go. That is the whole of the responsive testing story and it is enough for most of it.
Plain HTML projects
No dev server involved. FEWD serves the files itself on a local port, from your project root where you have set one, so relative paths to CSS, scripts and images resolve the way they will in production.
If it has not been told where the project root is, it says so, with Set now beside the message.
Making a new one
The Pages tab’s + takes a name and, when the project has layouts, offers them in a dropdown. Picking one writes a page already wrapped in that layout rather than a bare fragment — see An Astro site, end to end.