Day4 - Astro Series: Hello Astro World

@ Astro

A nice gradient background with a headline: "Basic Commands and Configuration"

Introduction

Previously we created a brand new Astro project and explained the general project structure. Next, we’ll start with the Astro command-line interface and how to set up the astro.config file.

Astro CLI

You can use your favorite package manager to run Astro — whether npm, pnpm, yarn, or even bun🔗! Below are the primary CLI commands Astro provides. In practice, besides dev, build, and preview, you won’t use many others often, so consult the docs🔗 when needed.

Terminal window
astro [command] [...flags]


   Commands
                add  Add an integration
              build  Build the project
              check  Check the project
                dev  Start the dev server
               docs  Open the official docs site in the browser
               info  Show current project settings
            preview  Preview locally
               sync  Generate collection types
          telemetry  Anonymous data collection


   Global Flags
    --config <path>  Path to config file
      --root <path>  Project root directory
       --site <url>  Site URL
  --base <pathname>  Base pathname for the site
          --verbose  Enable verbose logging
           --silent  Silence logs
          --version  Show version
             --help  Show help

Configuring Astro

Astro automatically looks for an astro.config file when running; if it can’t find one, it will use default settings. It’s recommended to use the defineConfig() helper in the config file to provide IDE autocompletion:

import { defineConfig } from 'astro/config';


export default defineConfig({
  // Set options here...
});

Most settings can be found in the docs🔗. Below are some configuration options worth paying attention to:

Top-level Options🔗

Various path and feature options for your project.

Build Options🔗

All settings related to building an Astro site, such as output file structure, file prefixes, etc.

Server Options🔗

Configure server-related settings here, like host, port, or headers.

Image Options🔗

Astro’s official image optimization uses Sharp🔗 by default. Configure image processing options here.

Markdown Options🔗

Astro fully supports Markdown and integrates various plugins by default, such as code highlighting or GitHub-style Markdown. You can configure these here and extend with remark🔗 or rehype🔗 plugins.

{
  "markdown": {}
}

Integrations🔗

Astro offers integrations to extend support for frameworks, libraries, or features. Import the integrations you want into the integrations property. Later posts will cover how to use different UI frameworks with Astro.

import react from '@astrojs/react';
import tailwind from '@astrojs/tailwind';
{
  // Example: Add React + Tailwind support
  integrations: [react(), tailwind()];
}

Further reading