How to Use Output Server in Astro for Development

In Astro, you use the astro dev command to start the output server, which serves your site locally for development. This server watches your files and updates the browser automatically when you save changes.

Syntax

The output server in Astro is started using the astro dev command in your project directory. This command runs a local server that serves your site and watches for file changes.

Key parts:

• astro dev: Starts the development server.
• Localhost URL: The server runs on http://localhost:3000 by default.
• Hot Module Replacement (HMR): Automatically reloads the page when you edit files.

bash

astro dev

Output

Local: http://localhost:3000
Network: use --host to expose

Example

This example shows how to start the output server and what you see in the browser.

Run the command in your Astro project folder, then open http://localhost:3000 in your browser to see your site live. Edit files and watch the page update automatically.

bash

npm run dev

# or if you use yarn
# yarn dev

Output

Local: http://localhost:3000
Network: use --host to expose

[astro] Server started in 500ms

Common Pitfalls

Some common mistakes when using the output server in Astro:

• Not running astro dev inside the project folder causes errors.
• Trying to access the server on a different port without configuring it.
• Expecting changes to show without saving files first.
• Not installing dependencies before running the server.

Always ensure you have run npm install or yarn before astro dev.

bash

Wrong:
cd wrong-folder
astro dev

Right:
cd your-astro-project
npm install
npm run dev

Quick Reference

Summary tips for using the output server in Astro:

• Use npm run dev or astro dev to start the server.
• Open http://localhost:3000 to view your site.
• Save files to see live updates.
• Use --port option to change the server port if needed.
• Use --host to expose the server on your network.

Key Takeaways

Start the output server with the command astro dev inside your project folder.

Open http://localhost:3000 in your browser to preview your site live.

The server automatically reloads the page when you save changes to your files.

Always install dependencies first with npm install or yarn.

Use command options like --port and --host to customize the server.