Skip to main content
This guide walks you through installing and setting up the Astro Landing Page template in detail.

​
System requirements

Before installing, ensure your system meets these requirements:
  • Node.js - version 18.17.1 or 20.3.0 or higher (run node -v to check)
  • A package manager - npm (included with Node.js), yarn, or pnpm
  • Terminal/Command line access
  • Text editor or IDE (VS Code recommended)
Node.js versions below 18.17.1 are not supported. If you’re on an older version, update Node.js before proceeding.

​
Installation methods

You can install the template in two ways: The easiest way to get started is using Astro’s official CLI: 
npm create astro@latest -- --template minimal
This command will:
  1. Download the latest minimal Astro template
  2. Prompt you for project configuration
  3. Set up the project structure
  4. Optionally install dependencies and initialize git

​
Method 2: Manual setup

If you prefer manual control, you can set up the project yourself:
1

Create project directory

mkdir my-astro-landing-page
cd my-astro-landing-page
2

Initialize package.json

Create a package.json file with the required dependencies:
{
  "name": "my-astro-landing-page",
  "type": "module",
  "version": "0.0.1",
  "scripts": {
    "dev": "astro dev",
    "build": "astro build",
    "preview": "astro preview",
    "astro": "astro"
  },
  "dependencies": {
    "astro": "^5.17.1"
  }
}
3

Install dependencies

npm install

​
Project structure

After installation, your project will have this structure: 
/
├── public/
│   ├── favicon.ico
│   └── favicon.svg
├── src/
│   └── pages/
│       └── index.astro
├── .gitignore
├── astro.config.mjs
├── package.json
├── package-lock.json
└── tsconfig.json

​
Understanding the files

Defines your project dependencies and npm scripts:
{
  "name": "teste-blogs",
  "type": "module",
  "version": "0.0.1",
  "scripts": {
    "dev": "astro dev",
    "build": "astro build",
    "preview": "astro preview",
    "astro": "astro"
  },
  "dependencies": {
    "astro": "^5.17.1"
  }
}
  • type: “module” - Enables ES modules
  • scripts - Command shortcuts for development and building
  • dependencies - Only Astro core is required
The main configuration file for Astro. The minimal template starts with an empty config:
// @ts-check
import { defineConfig } from 'astro/config';

// https://astro.build/config
export default defineConfig({});
You can add integrations, configure build options, and more here.
TypeScript configuration with strict type checking enabled:
{
  "extends": "astro/tsconfigs/strict",
  "include": [".astro/types.d.ts", "**/*"],
  "exclude": ["dist"]
}
This extends Astro’s strict TypeScript config for better type safety.
The main landing page template:
---

---

<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
    <link rel="icon" href="/favicon.ico" />
    <meta name="viewport" content="width=device-width" />
    <meta name="generator" content={Astro.generator} />
    <title>Astro</title>
  </head>
  <body>
    <h1>Astro</h1>
  </body>
</html>
The --- markers define the component script (frontmatter), and below is the HTML template.

​
Available commands

Once installed, you have access to these npm scripts:
CommandAction
npm installInstalls dependencies
npm run devStarts local dev server at localhost:4321
npm run buildBuild your production site to ./dist/
npm run previewPreview your build locally, before deploying
npm run astro ...Run CLI commands like astro add, astro check
npm run astro -- --helpGet help using the Astro CLI
Replace npm with yarn or pnpm if you’re using a different package manager.

​
Starting the development server

To start building your landing page, run the development server: 
npm run dev
The server will start at http://localhost:4321 with hot module reloading enabled.

​
Building for production

When you’re ready to deploy, create a production build: 
npm run build
The optimized static files will be output to the ./dist/ directory.

​
Previewing the build

Test your production build locally before deploying: 
npm run preview

​
VS Code setup (Optional)

For the best development experience with VS Code:
1

Install the Astro extension

Install the official Astro VS Code extension for syntax highlighting, IntelliSense, and more.You can install it directly from VS Code:
  1. Open the Extensions panel (Ctrl+Shift+X / Cmd+Shift+X)
  2. Search for “Astro”
  3. Click Install on the official Astro extension
2

Configure settings (optional)

The template includes a .vscode directory with recommended settings. VS Code will automatically use these when you open the project.
The Astro extension provides excellent TypeScript support, auto-formatting for .astro files, and helpful error messages.

​
Troubleshooting

​
Port 4321 is already in use

If port 4321 is already in use, Astro will automatically try the next available port. You can also specify a custom port: 
npm run dev -- --port 3000

​
Module not found errors

If you see module not found errors, try deleting node_modules and reinstalling: 
rm -rf node_modules package-lock.json
npm install

​
TypeScript errors

If you see TypeScript errors, make sure your dependencies are installed and run: 
npm run astro check
This will check your project for TypeScript and Astro-specific errors.

​
Next steps

Now that you have everything installed, you’re ready to start building:

Quick start guide

Follow the quickstart to build your first landing page

Astro documentation

Learn more about Astro’s features and capabilities

Build docs developers (and LLMs) love

Get started for freeTalk to us