Quickstarters
¿Cómo construir un backend para Astro?

21min
Introducción
En esta guía sobre cómo construir un backend para astro, aprenderás a crear un backend completo utilizando Back4App para tu proyecto de Astro. 
Cubrirá la integración de características importantes de Back4App, incluyendo gestión de bases de datos, funciones en la nube, autenticación, almacenamiento de archivos, consultas en tiempo real y más, demostrando un enfoque práctico para construir aplicaciones rápidas con herramientas modernas.
Al aprovechar el entorno de Back4App, evitas mucho trabajo pesado, como configurar servidores o escribir capas de seguridad desde cero. 
Esta configuración te ahorra tiempo y esfuerzo, mientras aún te permite definir un punto final para una lógica robusta del lado del servidor. 
También verás cómo incorporar variables de entorno en tu proyecto de astro, facilitando el almacenamiento seguro de credenciales u otros datos sensibles.
Una vez que termines, tendrás una estructura de backend escalable para Astro y sabrás cómo manejar datos con REST, GraphQL, autenticación de usuarios, eventos en tiempo real y más. 
Estarás preparado para agregar tu propia lógica para cualquier necesidad del mundo real mientras mantienes una sólida base de seguridad.
Requisitos previos
Una cuenta de Back4App y un nuevo proyecto de Back4App
Comenzando con Back4app.﻿
Un proyecto de Astro
Configurando Astro - Asegúrate de tener un entorno de desarrollo básico de Astro y Node.js instalado.
Node.js (versión 14 o superior) instalado
Instalando Node.js﻿
Familiaridad con conceptos de front-end y del lado del servidor
Deberías saber cómo crear o editar archivos .astro, manejar variables de entorno y hacer una solicitud POST simple con fetch o una biblioteca similar.
Asegúrate de que estos requisitos previos estén en su lugar antes de comenzar. Tener tu cuenta de Back4App, un entorno de Astro y conocimientos básicos de JavaScript te ayudará a seguir este tutorial de manera más fluida.
Paso 1 – Crear un nuevo proyecto en Back4App y conectar
Crear un nuevo proyecto:
Inicia sesión en tu cuenta de Back4App.
Haz clic en Nueva Aplicación en tu panel de Back4App y dale un nombre (por ejemplo, “Astro-Backend-Tutorial”).
Recuperar credenciales de Back4App:
En tu panel de Back4App, bajo Configuración de la Aplicación o Seguridad y Claves, anota tu ID de Aplicación, Clave API REST, y la URL del servidor (https://parseapi.back4app.com por defecto). Estas variables de entorno se utilizarán en tu integración con Astro.
Conectar Astro a Back4App a través de APIs:
Dado que no estamos utilizando el SDK de Parse directamente, haremos solicitudes utilizando fetch u otra biblioteca desde nuestros archivos de Astro. Almacena tus credenciales en variables de entorno por seguridad. Por ejemplo, en un .env archivo:
Paso 2 – Configuración de la Base de Datos
Creando un Modelo de Datos
Crear un Modelo de Datos Manualmente:
Ve a tu panel de Back4App y haz clic en Base de Datos.
Crea una nueva clase (por ejemplo, “Todo”), y añade campos como título (String) y estáCompletado (Boolean).
Usa el Agente de IA para Crear un Modelo de Datos:
Abre el Agente de IA desde el panel de tu aplicación.
Describe tu esquema en lenguaje sencillo (por ejemplo, “Crea una nueva aplicación ToDo con una clase que tenga campos de título y estáCompletado.”).
El agente generará la clase y los campos por ti.
Lectura y Escritura de Datos usando REST API
Con tu modelo de datos listo, definamos un endpoint dentro de un componente Astro o un archivo del lado del servidor para manejar una solicitud de publicación y una solicitud de lectura. Por ejemplo, podrías crear un archivo como src/pages/api/todos.astro:
Text
---
import type { APIRoute } from 'astro';

export const post: APIRoute = async ({ request }) => {
  const body = await request.json();

  // "create" a Todo
  const url = `${import.meta.env.BACK4APP_SERVER_URL}/classes/Todo`;

  const response = await fetch(url, {
    method: 'POST',
    headers: {
      'X-Parse-Application-Id': import.meta.env.BACK4APP_APP_ID,
      'X-Parse-REST-API-Key': import.meta.env.BACK4APP_REST_KEY,
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({
      title: body.title,
      isCompleted: body.isCompleted
    })
  });

  const data = await response.json();
  return new Response(JSON.stringify(data), { status: 200 });
};

export const get: APIRoute = async () => {
  // "read" all Todos
  const url = `${import.meta.env.BACK4APP_SERVER_URL}/classes/Todo`;

  const response = await fetch(url, {
    method: 'GET',
    headers: {
      'X-Parse-Application-Id': import.meta.env.BACK4APP_APP_ID,
      'X-Parse-REST-API-Key': import.meta.env.BACK4APP_REST_KEY
    }
  });

  const data = await response.json();
  return new Response(JSON.stringify(data), { status: 200 });
};
---

<html lang="en">
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
    <meta name="generator" content="astro.generator" />
    <title>Todos API</title>
  </head>
  <body>
    <h1>API for Todo</h1>
  </body>
</html>
---
import type { APIRoute } from 'astro';

export const post: APIRoute = async ({ request }) => {
  const body = await request.json();

  // "create" a Todo
  const url = `${import.meta.env.BACK4APP_SERVER_URL}/classes/Todo`;

  const response = await fetch(url, {
    method: 'POST',
    headers: {
      'X-Parse-Application-Id': import.meta.env.BACK4APP_APP_ID,
      'X-Parse-REST-API-Key': import.meta.env.BACK4APP_REST_KEY,
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({
      title: body.title,
      isCompleted: body.isCompleted
    })
  });

  const data = await response.json();
  return new Response(JSON.stringify(data), { status: 200 });
};

export const get: APIRoute = async () => {
  // "read" all Todos
  const url = `${import.meta.env.BACK4APP_SERVER_URL}/classes/Todo`;

  const response = await fetch(url, {
    method: 'GET',
    headers: {
      'X-Parse-Application-Id': import.meta.env.BACK4APP_APP_ID,
      'X-Parse-REST-API-Key': import.meta.env.BACK4APP_REST_KEY
    }
  });

  const data = await response.json();
  return new Response(JSON.stringify(data), { status: 200 });
};
---

<html lang="en">
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
    <meta name="generator" content="astro.generator" />
    <title>Todos API</title>
  </head>
  <body>
    <h1>API for Todo</h1>
  </body>
</html>
﻿
Este ejemplo utiliza variables de entorno (import.meta.env.*) para almacenar tus credenciales de Back4App. Definimos dos métodos en un archivo: export const post para crear un Todo, y export const get para recuperar todos los Todos. Puedes adaptarlo para que se ajuste a la estructura de tu componente de diseño y otras páginas del sitio.
Lectura y Escritura de Datos usando la API de GraphQL
De manera similar, puedes realizar solicitudes de GraphQL desde tus páginas de Astro:
Text
---
export async function post({ request }) {
  const body = await request.json();
  const url = `${import.meta.env.BACK4APP_SERVER_URL}/graphql`;

  const query = `
    mutation {
      createTodo(input: {
        fields: {
          title: "${body.title}"
          isCompleted: ${body.isCompleted}
        }
      }) {
        todo {
          objectId
          title
          isCompleted
        }
      }
    }
  `;

  const response = await fetch(url, {
    method: 'POST',
    headers: {
      'X-Parse-Application-Id': import.meta.env.BACK4APP_APP_ID,
      'X-Parse-REST-API-Key': import.meta.env.BACK4APP_REST_KEY,
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({ query })
  });

  const data = await response.json();
  return new Response(JSON.stringify(data), { status: 200 });
}
---
<html lang="en">
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
    <title>Todos GraphQL</title>
  </head>
  <body>
    <h1>GraphQL Endpoint for Todos</h1>
  </body>
</html>
---
export async function post({ request }) {
  const body = await request.json();
  const url = `${import.meta.env.BACK4APP_SERVER_URL}/graphql`;

  const query = `
    mutation {
      createTodo(input: {
        fields: {
          title: "${body.title}"
          isCompleted: ${body.isCompleted}
        }
      }) {
        todo {
          objectId
          title
          isCompleted
        }
      }
    }
  `;

  const response = await fetch(url, {
    method: 'POST',
    headers: {
      'X-Parse-Application-Id': import.meta.env.BACK4APP_APP_ID,
      'X-Parse-REST-API-Key': import.meta.env.BACK4APP_REST_KEY,
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({ query })
  });

  const data = await response.json();
  return new Response(JSON.stringify(data), { status: 200 });
}
---
<html lang="en">
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
    <title>Todos GraphQL</title>
  </head>
  <body>
    <h1>GraphQL Endpoint for Todos</h1>
  </body>
</html>
﻿
Trabajando con Consultas en Vivo (opcional)
Las Consultas en Vivo permiten actualizaciones en tiempo real de tus datos. Para usarlas, habilita las Consultas en Vivo en el panel de control de Back4App y configura una conexión WebSocket. Sin embargo, si estás construyendo un sitio estático de Astro, podrías integrar actualizaciones en tiempo real a través de scripts del lado del cliente que apunten a wss://YOUR_SUBDOMAIN.b4a.io. Las Consultas en Vivo pueden enviar cambios a tus clientes conectados cada vez que se crean, actualizan o eliminan registros.
Paso 3 – Aplicando Seguridad con ACLs y CLPs
ACLs (Listas de Control de Acceso) y CLPs (Permisos a Nivel de Clase) son fundamentales para controlar el acceso a los datos. Puedes configurarlos en la Base de Datos sección de tu panel de control de Back4App. Por ejemplo:
Restringir lectura/escritura solo a usuarios autenticados
Usar ACLs para seguridad por objeto
Usa las Directrices de Seguridad de Back4App para asegurar que tus datos permanezcan protegidos. También puedes establecer estas reglas desde el panel de control, asegurando que incluso si tus llamadas REST están abiertas, solo las credenciales correctas pueden modificar o ver los datos.
Paso 4 – Escribiendo Funciones de Cloud Code
Por qué Cloud Code: Puedes mover la lógica empresarial clave al lado del servidor, evitando la exposición de secretos o la necesidad de mantener servidores separados. Cloud Code puede escuchar disparadores (beforeSave, afterSave) o manejar puntos finales personalizados.
Ejemplo
JS
// main.js (Cloud Code)
Parse.Cloud.define('greetUser', async (request) => {
  const userName = request.params.name || 'Guest';
  return `Hello, ${userName}! Welcome to the Astro project.`;
});

Parse.Cloud.beforeSave('Todo', (request) => {
  const todo = request.object;
  if (!todo.get('title')) {
    throw 'Todos must have a title.';
  }
});
// main.js (Cloud Code)
Parse.Cloud.define('greetUser', async (request) => {
  const userName = request.params.name || 'Guest';
  return `Hello, ${userName}! Welcome to the Astro project.`;
});

Parse.Cloud.beforeSave('Todo', (request) => {
  const todo = request.object;
  if (!todo.get('title')) {
    throw 'Todos must have a title.';
  }
});
﻿
Despliega esto a través de Back4App CLI o directamente en la Cloud Code sección de tu panel de control de Back4App.
Llamando a la Función
Desde Astro, puedes definir un endpoint que utiliza fetch para acceder a tu Función en la Nube:
Text
---
export async function post({ request }) {
  const body = await request.json();

  const url = `${import.meta.env.BACK4APP_SERVER_URL}/functions/greetUser`;

  const response = await fetch(url, {
    method: 'POST',
    headers: {
      'X-Parse-Application-Id': import.meta.env.BACK4APP_APP_ID,
      'X-Parse-REST-API-Key': import.meta.env.BACK4APP_REST_KEY,
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({ name: body.name })
  });

  const data = await response.json();
  return new Response(JSON.stringify(data), { status: 200 });
}
---
<html lang="en">
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
    <title>Cloud Code Greet</title>
  </head>
  <body>
    <h1>Greet Function Endpoint</h1>
  </body>
</html>
---
export async function post({ request }) {
  const body = await request.json();

  const url = `${import.meta.env.BACK4APP_SERVER_URL}/functions/greetUser`;

  const response = await fetch(url, {
    method: 'POST',
    headers: {
      'X-Parse-Application-Id': import.meta.env.BACK4APP_APP_ID,
      'X-Parse-REST-API-Key': import.meta.env.BACK4APP_REST_KEY,
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({ name: body.name })
  });

  const data = await response.json();
  return new Response(JSON.stringify(data), { status: 200 });
}
---
<html lang="en">
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
    <title>Cloud Code Greet</title>
  </head>
  <body>
    <h1>Greet Function Endpoint</h1>
  </body>
</html>
﻿
Paso 5 – Configurando la Autenticación
Back4App utiliza la _User clase para manejar cuentas de usuario. Con REST, puedes gestionar registros, inicios de sesión o cierres de sesión. Por ejemplo, registrando un nuevo usuario:
Bash
curl -X POST \
  -H "X-Parse-Application-Id: YOUR_APP_ID" \
  -H "X-Parse-REST-API-Key: YOUR_REST_KEY" \
  -H "Content-Type: application/json" \
  -d '{"username":"user1","password":"secret123","email":"[email protected]"}' \
  https://parseapi.back4app.com/users
curl -X POST \
  -H "X-Parse-Application-Id: YOUR_APP_ID" \
  -H "X-Parse-REST-API-Key: YOUR_REST_KEY" \
  -H "Content-Type: application/json" \
  -d '{"username":"user1","password":"secret123","email":"user1@example.com"}' \
  https://parseapi.back4app.com/users
﻿
Puedes replicar esta lógica desde Astro con fetch de manera similar, utilizando variables de entorno. Una vez que el usuario inicia sesión, recibe un token de sesión para solicitudes posteriores.
Inicio de Sesión Social
Para proveedores sociales (como Google o Apple), utiliza endpoints específicos o configura el flujo de OAuth. Consulta la Documentación de Inicio de Sesión con Apple u otras guías de inicio de sesión social para integrar autenticación avanzada. Esto es particularmente útil si deseas permitir que las personas inicien sesión desde tu proyecto astro con una fricción mínima.
Paso 6 – Manejo del Almacenamiento de Archivos
Para almacenar archivos en Back4App, los envías con la API REST. Por ejemplo:
Bash
curl -X POST \
  -H "X-Parse-Application-Id: YOUR_APP_ID" \
  -H "X-Parse-REST-API-Key: YOUR_REST_KEY" \
  -H "Content-Type: image/png" \
  --data-binary "@path/to/local/image.png" \
  https://parseapi.back4app.com/files/myImage.png
curl -X POST \
  -H "X-Parse-Application-Id: YOUR_APP_ID" \
  -H "X-Parse-REST-API-Key: YOUR_REST_KEY" \
  -H "Content-Type: image/png" \
  --data-binary "@path/to/local/image.png" \
  https://parseapi.back4app.com/files/myImage.png
﻿
La respuesta contiene una URL de archivo. Puedes vincular esa URL a un registro, como un objeto de clase Photo, asegurando que rastrees las referencias al archivo en tu base de datos. También puedes controlar quién puede subir archivos ajustando la configuración de seguridad de archivos en la configuración de tu aplicación.
Paso 7 – Verificación de Correo Electrónico y Restablecimiento de Contraseña
Habilitar Verificación de Correo Electrónico: En Configuraciones de la Aplicación en el panel de control de Back4App, habilita la verificación de correo electrónico y personaliza tu plantilla de correo electrónico de verificación.
Configurar Restablecimiento de Contraseña: De manera similar, configura tus correos electrónicos de restablecimiento de contraseña y asegúrate de que la clase _User tenga direcciones de correo electrónico válidas.
Flujo: Cuando un usuario solicita un restablecimiento desde tu proyecto astro (a través de una llamada a la API), Back4App envía automáticamente un correo electrónico con un enlace seguro para cambiar su contraseña.
Paso 8 – Programación de Tareas con Cloud Jobs
Usa Cloud Jobs para programar mantenimiento repetido u otras tareas:
JS
// main.js
Parse.Cloud.job('cleanupOldTodos', async () => {
  const query = new Parse.Query('Todo');
  const now = new Date();
  const THIRTY_DAYS = 30 * 24 * 60 * 60 * 1000;
  query.lessThan('createdAt', new Date(now - THIRTY_DAYS));

  const oldTodos = await query.find({ useMasterKey: true });
  await Parse.Object.destroyAll(oldTodos, { useMasterKey: true });
  return `Deleted ${oldTodos.length} old Todos.`;
});
// main.js
Parse.Cloud.job('cleanupOldTodos', async () => {
  const query = new Parse.Query('Todo');
  const now = new Date();
  const THIRTY_DAYS = 30 * 24 * 60 * 60 * 1000;
  query.lessThan('createdAt', new Date(now - THIRTY_DAYS));

  const oldTodos = await query.find({ useMasterKey: true });
  await Parse.Object.destroyAll(oldTodos, { useMasterKey: true });
  return `Deleted ${oldTodos.length} old Todos.`;
});
﻿
Despliega tu código, luego programa el trabajo desde Configuraciones del Servidor > Trabajos en Segundo Plano en la consola de Back4App. Esto automatiza tareas como limpiar datos, enviar correos electrónicos o cualquier función rutinaria que desees ejecutar en intervalos específicos.
Paso 9 – Integrando Webhooks
Webhooks te permiten notificar a servicios externos cuando ocurren ciertos eventos en tu aplicación de Back4App. Por ejemplo, puedes enviar datos a Slack cada vez que se crea un nuevo Todo:
Ve a Más > WebHooks en tu panel de control de Back4App.
Agrega un Webhook apuntando a la URL de Slack.
Selecciona el evento (por ejemplo, objeto creado en la clase Todo).
Esto permite un flujo de solicitud/respuesta para mantener tus sistemas externos sincronizados con los datos de tu aplicación basada en Astro.
Paso 10 – Explorando el Panel de Administración de Back4App
La Aplicación de Administración de Back4App es un panel de gestión fácil de usar para la edición de datos. Es especialmente útil para miembros del equipo no técnicos que necesitan acceso directo a tu base de datos.
Habilitar la aplicación de administración en Más > Aplicación de administración.
Crear un usuario administrador para acceso seguro.
Usar este panel para realizar rápidamente operaciones CRUD, verificar registros o configurar ajustes más avanzados.
Conclusión
Has creado con éxito un backend seguro y eficiente para un proyecto de Astro utilizando Back4App. A lo largo de este tutorial, tú:
Definido y configurado un esquema de base de datos
Usado APIs REST y GraphQL para leer y escribir datos
Asegurado datos con ACLs, CLPs y autenticación de usuarios
Extendido la lógica a través de Cloud Code y trabajos programados
Manejado el almacenamiento de archivos para imágenes o documentos
Integrado Webhooks para notificaciones externas
Explorado el panel de administración para una gestión de datos simplificada
Este enfoque subraya cómo construir un backend para Astro que sea confiable, escalable y fácil de mantener. Al aprovechar las variables de entorno, mantienes tus credenciales seguras mientras aseguras que tu código permanezca flexible para el crecimiento futuro.
Próximos Pasos
Despliega tu proyecto Astro en plataformas de hosting que soporten renderizado del lado del servidor o entornos basados en Node.
Agrega características avanzadas, como control de acceso basado en roles o integraciones de pago especializadas, utilizando Cloud Code o APIs externas.
Optimiza el rendimiento implementando estrategias de caché y ajustando la configuración del contenido de tu viewport para una mejor experiencia de usuario.
Revisa la documentación de Back4App para aprender sobre registros, análisis y medidas de seguridad más avanzadas.
Continúa explorando características en tiempo real con Consultas en Vivo y construye aplicaciones verdaderamente dinámicas y colaborativas.
﻿
Actualizado 23 Jan 2025
¿Esta página le fue útil?
¿Cómo construir un backend para Python?
¿Cómo construir un backend para Deno?