Local Hosting and the Browser
Goal — Run your site on your own machine and view it in a browser.
By the end — Your site running live at a localhost address, updating as you direct changes.
Map first — Where is this running, and how do I reach it?
1Understand localhost and ports
localhost means "this computer." When you run a website in development, your machine acts as a small web server, serving the site to you and no one else.
A port is a numbered door on that server, like 5173. The full address localhost:5173 means "the site being served on door 5173 of this computer."
2Start the dev server
Ask Claude to run the project. Behind this is usually the npm run dev command, which starts the server and prints a localhost address.
Start the development server for this site and tell me the address to open.3Open it and look
Open the address in your browser. There is your site, running live. This is the first time you see what you have been directing — take it in as a designer.
4Watch it update live
With the server still running, ask Claude to change something visible — a color, a heading. Switch to the browser. It updates almost instantly. This live-reload is why development feels fast.
5Understand what is happening
Ask Claude to explain the mechanics, so local hosting stops being magic.
Explain what "npm run dev" is doing and why the browser updates when a file changes.Recap — You started a dev server, opened your site at a localhost address, and watched it update live as you directed changes.