Skip to main content

​
Astro 5 Framework

Adosa Real Estate is built on Astro 5, a modern web framework optimized for content-rich websites. The application leverages Astro’s static site generation (SSG) capabilities to deliver blazing-fast performance.

​
Key Configuration

The project is configured in astro.config.mjs: 
import { defineConfig } from 'astro/config';

export default defineConfig({
    output: 'static',
    devToolbar: {
        enabled: false
    },
    compressHTML: true,
    vite: {
        ssr: {
            noExternal: ['gsap'], // GSAP processed in SSR
        },
    },
});
Static Output: The entire site is pre-rendered at build time, resulting in optimal performance and SEO.

​
Project Structure

The source code follows Astro’s convention-based directory structure: 
src/
├── components/          # Reusable Astro components
│   ├── properties/      # Property-specific components
│   ├── Navigation.astro
│   ├── Footer.astro
│   └── ...
├── layouts/             # Page layouts
│   └── BaseLayout.astro
├── pages/               # File-based routing
│   ├── [...lang]/       # i18n routing pattern
│   └── 404.astro
├── styles/              # Global stylesheets
│   ├── theme.css        # CSS variables and theming
│   ├── global.css       # Base styles and utilities
│   └── animations.css   # Animation definitions
├── services/            # API integration layer
│   └── api/
│       ├── api.ts       # Core API client
│       ├── properties.ts
│       └── leads.ts
├── data/                # Type definitions and data models
│   └── properties.ts
├── i18n/                # Internationalization
│   ├── ui.ts            # Translation strings
│   └── utils.ts         # i18n utilities
├── utils/               # Helper functions
├── types/               # TypeScript definitions
└── scripts/             # Client-side scripts

​
File-Based Routing

Astro uses file-based routing where the file structure in src/pages/ determines the URL structure: 
src/pages/
├── [...lang]/
│   ├── index.astro              → / or /en
│   ├── propiedades.astro        → /propiedades or /en/propiedades
│   ├── contacto.astro           → /contacto or /en/contacto
│   ├── mision.astro             → /mision or /en/mision
│   └── propiedades/
│       └── [...slug].astro      → /propiedades/[slug]
└── 404.astro                    → 404 page
The [...lang] pattern creates optional language prefixes, supporting both /page (Spanish) and /en/page (English) URLs.

​
Static Site Generation (SSG)

​
Build-Time Rendering

All pages are generated at build time using getStaticPaths() for dynamic routes: 
export async function getStaticPaths() {
  const properties = await PropertyService.getAll('es-ES');
  const propertiesEN = await PropertyService.getAll('en-GB');
  
  return [
    ...properties.map(p => ({ params: { slug: p.id, lang: undefined } })),
    ...propertiesEN.map(p => ({ params: { slug: p.id, lang: 'en' } }))
  ];
}

​
API Data Fetching

The eGO Real Estate API is called during build time to fetch property data. See the API Integration guide for details.
Build guards are implemented to prevent deploying empty pages if the API fails:
if (results.length === 0) {
  throw new Error("⛔ BUILD GUARD: No properties fetched. Aborting build.");
}

​
Base Layout

All pages extend the BaseLayout.astro component located in src/layouts/: 
---
// src/layouts/BaseLayout.astro
import "../styles/global.css";
import "../styles/animations.css";
import Loader from "../components/Loader.astro";

interface Props {
  title?: string;
  description?: string;
  lang?: string;
  noindex?: boolean;
}

const { title, description, lang = "es" } = Astro.props;
---

<!doctype html>
<html lang={lang}>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>{title}</title>
    <meta name="description" content={description} />
    <!-- Fonts, analytics, etc. -->
  </head>
  <body>
    <Loader />
    <slot />
    <!-- Global scripts -->
  </body>
</html>

​
Performance Optimizations

HTML Compression

Enabled via compressHTML: true in Astro config

Smooth Scrolling

Lenis library for desktop (>1024px) with optimized settings

GSAP SSR

Animation library processed server-side via Vite config

Image Optimization

Native Astro image optimization for property galleries

​
Dependencies

Core dependencies from package.json: 
{
  "dependencies": {
    "astro": "^5.16.5",
    "gsap": "^3.14.2",
    "lenis": "^1.3.16",
    "leaflet": "^1.9.4",
    "qrcode": "^1.5.4"
  }
}
  • astro: Core framework
  • gsap: High-performance animations (hero, parallax, reveals)
  • lenis: Smooth scroll for desktop
  • leaflet: Interactive property maps
  • qrcode: QR code generation for property sharing

​
Next Steps

Design System

Learn about the CSS variable system and component styles

Internationalization

Understand the i18n routing and translation system

API Integration

Explore the eGO Real Estate API integration

Components

Browse available Astro components

Build docs developers (and LLMs) love

Get started for freeTalk to us