Saltar al contenido principal

🧩 Headless Documentation

Descripción​

Sistema de e-commerce headless que integra múltiples servicios: Magento como backend principal, Directus para gestión de contenido, Typesense para búsqueda y Next.js como frontend.

Stack Tecnológico​

  • Lenguaje: TypeScript/JavaScript (Next.js)
  • Framework: Next.js 13.4
  • CMS: Directus
  • E-commerce: Magento
  • Búsqueda: Typesense, Algolia
  • Base de Datos: Utiliza las bases de datos de los servicios conectados
  • Herramientas: Docker

Requisitos Previos​

  • Node.js (versión 18 o superior)
  • Yarn (Package Manager)
  • Acceso a las APIs de Magento, Directus y Typesense

Instalación Rápida​

  1. Clonar el repositorio
  2. Instalar dependencias: yarn install
  3. Configurar archivo .env.local con las variables necesarias: 
    MAGENTO_PROXY_URL=https://tu-instancia-magento.com
    NEXT_PUBLIC_DIRECTUS_URL=https://tu-instancia-directus.com
    NEXT_PUBLIC_DIRECTUS_TOKEN=tu-token-directus
    NEXT_PUBLIC_TYPESENSE_HOST=tu-host-typesense
    NEXT_PUBLIC_TYPESENSE_INDEX_NAME=nombre-del-indice
    NEXT_PUBLIC_TYPESENSE_READONLY_API_KEY=tu-api-key-readonly
    NEXT_PUBLIC_USE_MAGENTO_GRAPHQL_PROXY=true
    # Solicitar las variables restantes
  4. Preconstruir datos estáticos: yarn prebuild
  5. Iniciar entorno de desarrollo: yarn dev

Uso Básico​

  • Desarrollo local: yarn dev
  • Compilar para producción: yarn build
  • Iniciar en modo producción: yarn start
  • Ejecutar en Docker: docker-compose -f docker-compose-standalone.yml up

Estructura del Proyecto​


headless/
├── .directus/            # Configuración de Directus (deprecated)
├── .docker/              # Archivos Docker para despliegue
├── lib/                  # Herramientas de prebuild
├── pages/                # Páginas y rutas de Next.js
│   ├── api/             # API routes para proxies
│   │   ├── magento/    # Proxy a Magento (GraphQL/REST)
├── public/               # Archivos estáticos
├── src/
│   ├── components/      # Componentes React
│   ├── context/         # Contextos de React
│   ├── graphql/         # Consultas GraphQL
│   ├── hooks/           # React hooks personalizados
│   ├── magento/         # Integraciones con Magento
│   ├── services/        # Servicios para comunicación con APIs
│   ├── styles/          # Helpers de estilos para js
│   └── utils/           # Utilidades varias
├── styles/               # Estilos globales y componentes
├── middleware.ts         # Middleware de Next.js
├── next.config.js        # Configuración de Next.js
└── docker-compose-*.yml  # Configuraciones Docker