Seeing Your Site Before Anyone Else
While Claude is building your site, it lives only in a folder on your laptop. It’s not on the internet yet.
So how do you look at it?
You run a tiny preview server (a small program that plays the part of the website’s computer) right on your own laptop. Your browser visits it, just like it would visit a real website.
localhost
The address of that preview is something like:
localhost:4321- localhost means “this computer, right here”. Your browser isn’t going out to the internet at all. It’s talking to your own laptop.
- 4321 is the port (like a door number, so several previews can run at once without bumping into each other). Yours might be a different number, like 5173 or 3000. That’s fine.
localhost is your site’s private preview. Only you can see it, and only while the preview server is running.
Starting and Stopping It
With most frameworks, the preview starts with:
But usually you’ll just ask Claude:
Start the preview so I can see the site.It starts the server and tells you the address. Ctrl+click the link, or copy it into your browser.
To stop the preview:
- If Claude started it, just ask: “Stop the preview.”
- If you started it with
npm run dev, press Ctrl+C in that terminal. (Remember: in the terminal, Ctrl+C means stop.)
Why It’s So Useful
The preview updates by itself. When Claude changes a file, the page in your browser refreshes within a second or two.
That gives you the perfect working rhythm:
- Ask Claude for a change.
- Watch it work in the terminal.
- Look at the preview in your browser.
- Happy? Save a checkpoint. Not happy? Tell Claude what’s wrong.
The preview is where you check every single step. “Done” means go look at localhost.
Only You Can See It
Because localhost means “this computer”, nobody else can visit it. If you send localhost:4321 to a friend, their browser looks on their laptop, and finds nothing.
| localhost | A live website | |
|---|---|---|
| Who can see it | Only you | Anyone in the world |
| Where it runs | Your laptop | A server that’s always on |
| When it works | While npm run dev is running | All the time |
| Used for | Building and checking | Sharing with the world |
Getting your site from localhost to live is what the Going Live part of the course is about.
Try it
Make a separate playground folder (not your real project), start Claude in it, and ask for a tiny test page. Then open the preview on localhost, ask for a change, and watch the page update by itself.
See an example prompt
In File Explorer, make a playground folder inside your projects folder. Go into it, right-click an empty space, choose Open in Terminal, and type claude. Then:
Make me a tiny one-page website that says "Hello!" in big letters. Start a preview so I can see it in my browser.Once it’s open, try:
Make the background light pink and the text dark purple.Watch the page change on its own. When you’re done, ask Claude to stop the preview.