Setup

Creating a new Astro project uses npm create astro@latest, which is Astro’s equivalent of npx create-next-app or the old npx create-react-app. It launches an interactive wizard and scaffolds a project.

Scaffolding: wizard vs flags

# CRA (deprecated — shown for reference)
npx create-react-app my-app
cd my-app && npm start

# Next.js (create-next-app wizard)
npx create-next-app@latest my-app
# Prompts: TypeScript? ESLint? Tailwind? App Router?
cd my-app && npm run dev

# Astro
npm create astro@latest my-app
# Wizard prompts:
#   How would you like to start your project?
#     > A basic, minimal starter (recommended)
#       Use blog template
#       Use docs (Starlight) template
#   Do you plan to write TypeScript? Yes (strict)
#   Install dependencies? Yes
#   Initialize a new git repository? Yes
cd my-app && npm run dev

The npm create astro@latest command pulls the latest Astro scaffolding CLI (create-astro) from npm — no global install needed. The wizard is conversational and asks only what it needs.

The dev server

Once scaffolded:

npm run dev
# or
npx astro dev

Astro’s dev server starts at http://localhost:4321 by default (Next.js uses :3000). It uses Vite under the hood — the same Vite you may know from Vite + React projects — so hot module replacement (HMR) and fast cold starts are built in.

Useful dev commands:

npx astro dev          # start the dev server
npx astro build        # build for production (outputs to dist/)
npx astro preview      # preview the production build locally
npx astro check        # TypeScript type-check all .astro files
npx astro add react    # add the React integration (adds @astrojs/react)
npx astro add tailwind # add Tailwind CSS

Adding integrations

In Next.js, adding React is implicit — it is the framework. In Astro, React is an integration you opt into:

npx astro add react

This installs @astrojs/react and react/react-dom, and updates astro.config.mjs automatically:

// astro.config.mjs (after npx astro add react)
import { defineConfig } from 'astro/config';
import react from '@astrojs/react';

export default defineConfig({
  integrations: [react()],
});

After this you can import .tsx / .jsx React components inside .astro files and use client:* directives to hydrate them.

TypeScript

Astro generates a tsconfig.json that extends astro/tsconfigs/strict. Your .astro files are type-checked with npx astro check — the same command you’d run in CI. No separate tsc setup needed.