Umbraco y Astro

Umbraco CMS es un CMS de código abierto para ASP.NET Core. Por defecto, Umbraco utiliza páginas Razor para su frontend, pero puede ser utilizado como un CMS headless.

Integración con Astro

En esta sección utilizarás la API de Content Delivery nativa de Umbraco para proveer contenido a tu proyecto de Astro.

Requisitos previos

Para empezar, necesitarás lo siguiente:

Un proyecto de Astro - Si aún no tienes un proyecto de Astro, nuestra guía de instalación te pondrá en marcha en poco tiempo.
Un proyecto de Umbraco (v12+) - Si aún no tienes un proyecto de Umbraco, por favor consulta esta Guía de instalación.

Configuración de la API de Content Delivery

Para habilitar la API de Content Delivery, actualiza el archivo appsettings.json del proyecto de Umbraco:

{
  "Umbraco": {
    "CMS": {
      "DeliveryApi": {
        "Enabled": true,
        "PublicAccess": true
      }
    }
  }
}

Puedes configurar opciones adicionales según sea necesario, como el acceso público, las claves de API, los tipos de contenido permitidos, la autorización de miembros y más. Consulta la documentación de la API de Content Delivery de Umbraco para obtener más información.

Obtención de datos

Utiliza una llamada fetch() a la API de Content Delivery para acceder a tu contenido y ponerlo a disposición de tus componentes de Astro.

El siguiente ejemplo muestra una lista de artículos obtenidos, incluyendo propiedades como la fecha del artículo y su contenido.

---
const res = await fetch('http://localhost/umbraco/delivery/api/v2/content?filter=contentType:article');
const articles = await res.json();
---
<h1>Astro + Umbraco 🚀</h1>
{
  articles.items.map((article) => (
      <h1>{article.name}</h1>
      <p>{article.properties.articleDate}</p>
      <div set:html={article.properties.content?.markup}></div>
  ))
}

Lee más sobre la obtención de datos en Astro.

Creación de un blog con Umbraco y Astro

Requisitos previos

Un proyecto de Astro - Si aún no tienes un proyecto de Astro, nuestra guía de instalación te pondrá en marcha en poco tiempo.
Un proyecto de Umbraco (v12+) con la API de Content Delivery habilitada - Sigue esta Guía de instalación para crear un nuevo proyecto.

Creación de publicaciones de blog en Umbraco

Desde el backoffice de Umbraco, crea un Tipo de Documento para un artículo de blog simple llamado ‘Article’.

Configura tu Tipo de Documento ‘Article’ con las siguientes propiedades:
- Title (DataType: Textstring)
- Article Date (DataType: Date Picker)
- Content (DataType: Richtext Editor)
Cambia el interruptor “Allow as root” (Permitir como raíz) a true en el tipo de documento ‘Article’.
Desde la sección “Content” (Contenido) en el backoffice de Umbraco, crea y publica tu primera publicación de blog. Repite el proceso tantas veces como quieras.

Para más información, mira una guía en video sobre cómo crear Tipos de Documento.

Mostrar una lista de publicaciones de blog en Astro

Crea una carpeta src/layouts/, luego agrega un nuevo archivo Layout.astro con el siguiente código:

---
---
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>My Blog with Astro and Umbraco</title>
</head>
<body>
    <main>
        <slot />
    </main>
</body>
</html>

Tu proyecto ahora debería contener los siguientes archivos:

Directoriosrc/
- Directoriolayouts/
  - Layout.astro
- Directoriopages/
  - index.astro

Para crear una lista de publicaciones de blog, primero realiza un fetch para llamar al endpoint de content de la API de Content Delivery y filtra por contentType de tipo ‘article’. Los objetos del artículo incluirán las propiedades y el contenido establecido en el CMS. Luego puedes recorrer los artículos y mostrar cada título con un enlace a su artículo.

Reemplaza el contenido predeterminado de index.astro con el siguiente código:

---
import Layout from '../layouts/Layout.astro';
const res = await fetch('http://localhost/umbraco/delivery/api/v2/content?filter=contentType:article');
const articles = await res.json();
---
<Layout>
  <h2>Blog Articles</h2>
  {
        articles.items.map((article: any) => (
            <div>
                <h3>{article.properties.title}</h3>
                <p>{article.properties.articleDate}</p>
                <a href={article.route.path}>Read more</a>
            </div>
        ))
    }
</Layout>

Generación de publicaciones de blog individuales

Crea el archivo [...slug].astro en la raíz del directorio /pages/. Este archivo se utilizará para generar las páginas individuales de blog de forma dinámica.

Ten en cuenta que la propiedad params, que genera la ruta URL de la página, contiene article.route.path obtenido de la API. Del mismo modo, la propiedad props debe incluir el objeto article completo para que puedas acceder a toda la información de tu entrada del CMS.

Agrega el siguiente código a [...slug].astro el cual creará las páginas de tus publicaciones de blog individuales:

---
import Layout from '../layouts/Layout.astro';

export async function getStaticPaths() {
    let data = await fetch("http://localhost/umbraco/delivery/api/v2/content?filter=contentType:article");
    let articles = await data.json();

    return articles.items.map((article: any) => ({
        params: { slug: article.route.path },
        props: { article: article },
    }));
}

const { article } = Astro.props;
---

<Layout>
  <h1>{article.properties.title}</h1>
  <p>{article.properties.articleDate}</p>
  <div set:html={article.properties.content?.markup}></div>
</Layout>

Tu proyecto ahora debería contener los siguientes archivos:

Directoriosrc/
- Directoriolayouts/
  - Layout.astro
- Directoriopages/
  - index.astro
  - […slug].astro

Con el servidor de desarrollo en ejecución, ahora deberías poder ver tu contenido creado en Umbraco en la vista previa del navegador de tu proyecto de Astro. ¡Felicitaciones! 🚀

Publicando tu sitio

Para desplegar tu sitio, visita nuestras guías de implementación y sigue las instrucciones de tu proveedor de hosting preferido.

Desarrollo local, HTTPS y certificados SSL autofirmados

Si estás utilizando el endpoint HTTPS de Umbraco localmente, cualquier consulta fetch fallará con el mensaje fetch failed y el código DEPTH_ZERO_SELF_SIGNED_CERT. Esto se debe a que Node.js (sobre el cual se construye Astro) no acepta certificados autofirmados por defecto. Para evitar esto, utiliza el endpoint HTTP de Umbraco para el desarrollo local.

Alternativamente, puedes establecer NODE_TLS_REJECT_UNAUTHORIZED=0 en un archivo env.development y actualizar astro.config.js como se muestra:

NODE_TLS_REJECT_UNAUTHORIZED=0

import { defineConfig } from 'astro/config';
import { loadEnv } from "vite";

const { NODE_TLS_REJECT_UNAUTHORIZED } = loadEnv(process.env.NODE_ENV, process.cwd(), "");
process.env.NODE_TLS_REJECT_UNAUTHORIZED = NODE_TLS_REJECT_UNAUTHORIZED;
// https://astro.build/config
export default defineConfig({});