Astro Configuration

​

Overview

​

Complete Configuration

import { defineConfig } from 'astro/config';

// https://astro.build/config
export default defineConfig({
    output: 'static',
    // Astro 5: Las rutas con 'prerender = false' funcionarán igual sin 'hybrid'
    devToolbar: {
        enabled: false
    },
    compressHTML: true,
    vite: {
        ssr: {
            noExternal: ['gsap'], // GSAP debe procesarse en SSR
        },
    },
});

​

Configuration Options

​

output: ‘static’

• static: Generates a fully static site with pre-rendered HTML pages at build time
• Suitable for deployment to static hosting providers (Netlify, Vercel, etc.)
• All pages are built as static HTML files during astro build
• No server-side rendering at request time

• Real estate listings are relatively static content
• Improves performance with pre-rendered pages
• Simplifies hosting and deployment
• Reduces infrastructure costs

​

devToolbar

devToolbar: {
    enabled: false
}

• enabled: false: Disables the dev toolbar overlay
• Provides a cleaner development experience
• Removes the floating toolbar in the browser during astro dev

• When the toolbar interferes with UI testing
• For client demonstrations during development
• When working on complex overlays or animations (like GSAP)

​

compressHTML

compressHTML: true

• Reduces HTML file size by removing whitespace and comments
• Improves page load times
• Decreases bandwidth usage
• Enhances Core Web Vitals scores

• Smaller HTML files mean faster initial page loads
• Particularly beneficial for property listing pages with extensive markup
• Works alongside Vite’s built-in CSS and JavaScript minification

​

vite.ssr Configuration

vite: {
    ssr: {
        noExternal: ['gsap']
    }
}

​

noExternal: [‘gsap’]

• GSAP is an animation library used extensively in Adosa for smooth interactions
• By default, Vite treats node_modules as external during SSR
• GSAP needs to be bundled and processed to work correctly during the build
• Prevents “module not found” errors during static site generation

• Ensures GSAP code is included in the SSR bundle
• Allows GSAP imports to work in Astro components during build time
• Required when using GSAP in components that render during SSR

​

Build Commands

# Development server (devToolbar applies)
npm run dev

# Production build (output, compressHTML, vite.ssr apply)
npm run build

# Preview production build
npm run preview

​

Related Configuration

• TypeScript Configuration - TypeScript compiler options
• CSS Variables - Theme and styling configuration
• Package Dependencies - npm package configuration

​

Migration Notes

​

Astro 5 Changes

Astro 5: Las rutas con ‘prerender = false’ funcionarán igual sin ‘hybrid’

• No need to use output: 'hybrid' mode
• Routes with prerender = false work seamlessly with output: 'static'
• Simplifies configuration for mixed static/dynamic routing

​

Best Practices

1. Keep output as static: Unless you need server-side rendering, static mode provides the best performance
2. Enable compressHTML in production: Always minify HTML for production builds
3. Use noExternal for problematic libraries: Add any libraries that fail during SSR to the noExternal array
4. Disable devToolbar when needed: Turn it off for clean development or demos, but enable for debugging

​

Troubleshooting

​

Build fails with GSAP imports

vite: {
    ssr: {
        noExternal: ['gsap']
    }
}

​

Dev toolbar interferes with animations

devToolbar: {
    enabled: false
}

​

HTML output is too large

compressHTML: true