Setting Up Astro

One command sets up an Astro project. Pick a starter, install, and open the dev server.

3 min read Level 1/5 #astro#setup#vite

What you'll learn

Scaffold a project with `npm create astro@latest`
Run the dev server
Build for production and preview

Astro ships its own CLI that scaffolds a project from a starter template. You need Node 18 or newer.

One Command

npm create astro@latest my-site
cd my-site
npm install   # if the wizard skipped it
npm run dev

The wizard asks a few questions:

Project template — “Empty”, “Minimal”, “Blog”, “Docs”, “Portfolio”. Start with Empty for this course
TypeScript — yes, strict (recommended)
Install dependencies — yes
Initialize git — your call

Once it finishes, open http://localhost:4321 (Astro’s default port).

The Scripts

npm run dev       # dev server with hot reload
npm run build     # production build → dist/
npm run preview   # serve the production build locally
npm run astro     # run other Astro CLI commands (e.g. add, sync)

Try Editing

Open src/pages/index.astro and change a line. Save. The browser updates immediately — hot reload is built in.

Adding Integrations

The astro add command installs and wires up integrations:

npx astro add react
npx astro add tailwind
npx astro add mdx
npx astro add sitemap

Each one edits astro.config.mjs and installs the package. You’ll use these in later chapters.

No Install? Try the Sandbox

If you don’t want to install Node, head to astro.new — it opens a working Astro project in StackBlitz, in your browser.

Up Next

A quick tour of the files Astro generated.

Project Structure →