Dónde alojar una app creada con Claude

Una app creada con Claude se puede alojar en Static.app si funciona por completo en el navegador del visitante. Eso incluye calculadoras, cuestionarios, paneles, seguimientos y apps de una sola página con React o Vue. Puedes importar el artifact, subir un ZIP con los archivos compilados o dejar que Claude Code la publique por ti. Si la app necesita su propio servidor, una base de datos o una clave de API privada, Static.app puede alojar la parte visible, pero lo demás tiene que funcionar en otro servicio.

¿Funcionará tu app de Claude en un hosting estático?

Tu app funcionará en un hosting estático si todo lo que hace ocurre en el navegador. El hosting estático envía tus archivos al visitante tal cual y no ejecuta código en el servidor. Antes de empezar, compara tu app con estas dos listas.

Esto funciona en Static.app:

• HTML, CSS y JavaScript de navegador
• Apps de React, Vue, Angular y similares, una vez compiladas en archivos normales
• Datos guardados en el navegador de cada visitante con localStorage
• Llamadas a API públicas que aceptan peticiones desde el navegador y no necesitan clave secreta
• Formularios que envían las respuestas a tu panel con el atributo static-form

Esto no funciona:

• Código de servidor, como PHP, Node o las rutas de API y el renderizado en servidor de Next.js
• Una base de datos propia
• Claves de API privadas, porque los visitantes pueden leer todo lo que hay en el código del navegador
• Las funciones propias de Claude para artifacts: su almacenamiento, las llamadas a Claude y las apps conectadas

Cómo alojar en Static.app tu app creada con Claude

Hay tres caminos, y el adecuado depende de dónde creó Claude la app. Los tres terminan con el mismo tipo de sitio web online.

Camino A: la app es un artifact en Claude

1. Abre el artifact, haz clic en Share, elige Anyone with the link en Who has access y copia el enlace. En los planes Team y Enterprise, un propietario tiene que permitir esa opción.
2. Pega el enlace en Import from URL en la página de hosting para Claude y completa el registro para publicarla.
3. Abre la página online y prueba todos los botones y campos.

Los artifacts que se conectan con otros sitios web no pueden usar Anyone with the link, así que no se pueden importar. Si es tu caso, o la página importada no se comporta bien, pídele a Claude un solo archivo: "Reescribe esto como un único archivo HTML independiente, con todo el JavaScript y el CSS dentro". Guárdalo como index.html, comprímelo y súbelo en la página de subida de archivos HTML.

Camino B: la app es un proyecto de Claude Code

1. Compila el proyecto, normalmente con npm run build. Static.app no compila por ti, así que este paso se hace en tu ordenador.
2. Busca la carpeta que ha creado la compilación. Vite usa dist y Create React App usa build. En Next.js, activa la exportación estática con output: 'export' en next.config, que escribe una carpeta out.
3. Comprime lo que hay dentro de esa carpeta, de modo que index.html quede en el nivel superior del ZIP.
4. Suelta el ZIP en la página de subida de archivos HTML, elige un subdominio y crea tu cuenta.

Camino C: deja que Claude Code la publique por ti

El conector MCP de Static.app permite que Claude Code publique y actualice tus apps desde la terminal.

1. Crea una clave de API en tu cuenta de Static.app, en Cuenta y después Claves de API, y guárdala en una variable de entorno llamada STATIC_API_KEY.
2. Añade el conector con este comando: claude mcp add --transport sse --scope user static-app https://mcp.static.app/sse --header "Authorization: Bearer $STATIC_API_KEY"
3. Pídele a Claude Code: "Compila este proyecto, comprime la carpeta dist y publícala en Static.app como un sitio web nuevo llamado my-app".

Cuando tengas una versión nueva, pídele que sustituya el sitio web por la nueva compilación y conserve la misma dirección. No dejes tu clave de API en el código del proyecto y ponle una fecha de caducidad.

Activa Aplicación JavaScript si tu app tiene rutas

Si tu app tiene rutas propias, como /settings o /reports/42, activa el ajuste Aplicación JavaScript. Sin él, al abrir o recargar una de esas rutas se obtiene un 404, porque en el servidor no existe ese archivo.

1. Abre tu sitio web en el panel y entra en sus ajustes.
2. Marca Aplicación JavaScript y guarda.

Toda ruta que no coincida con un archivo real cargará index.html, y el enrutador de tu app se encargará del resto. Tienes que hacerlo tú aunque Claude Code haya publicado la app, porque el conector no puede cambiar este ajuste. Las apps que usan URL con almohadilla, como /#/settings, funcionan sin él. Una vez activado, el servidor ya no devuelve un 404 para una dirección equivocada, así que dale a tu app su propia página de error.

Qué cambia cuando una app sale de Claude

Algunas funciones de los artifacts las aporta el propio Claude, así que una copia alojada en otro lugar no las tiene. Esto es lo que puedes hacer con cada una.

Datos guardados

El almacenamiento de los artifacts pertenece a Claude. En tu propio sitio web, pídele a Claude que guarde los datos con localStorage. Se quedan en el navegador de cada visitante, así que nadie ve los datos de los demás, y no le siguen a otro dispositivo.

Llamadas a Claude

Un artifact puede usar Claude mientras funciona porque el visitante ha iniciado sesión en Claude y usa su propio plan. En un sitio web tuyo esa conexión no existe. Quita la función de IA o crea un pequeño backend en otro servicio que llame a la API de Claude.

Claves de API

Nunca pongas una clave privada en el JavaScript de tu app, porque cualquiera puede leerla en su navegador. Una clave que deba seguir en secreto tiene que estar en un servidor tuyo en otro servicio, y tu app llama a ese servidor.

Bases de datos e inicios de sesión

Static.app no ejecuta una base de datos ni gestiona cuentas de usuario para tu app. Si las necesitas, tu app puede conectarse desde el navegador con un servicio externo, y Static.app sigue sirviendo la parte visible. Si solo quieres impedir el acceso a desconocidos, puedes poner una contraseña a todo el sitio web.

Termina la app

• Tu propio dominio: añádelo desde tu panel con un plan de pago y crea los dos registros DNS que te indica. El SSL se configura automáticamente.
• Instálala como una app: pídele a Claude un manifiesto web y un service worker, y súbelos con el resto de archivos. Los visitantes podrán añadir la app a su móvil o a su ordenador.
• Arreglos pequeños: edita los archivos en el editor de código de tu panel. La dirección no cambia.

Cuánto cuesta

Puedes empezar con una prueba de 7 días, sin tarjeta de crédito. Incluye un sitio web, 50 MB de almacenamiento, un subdominio y un certificado SSL. Cuando termina la prueba, la app se desconecta hasta que inicias una suscripción, y al suscribirte vuelve a estar online. Los planes de pago empiezan en 6 USD/mes, como verás en la página de precios.

Preguntas frecuentes

Las respuestas siguientes tratan las apps de React, el alojamiento de Claude, qué pasa si cancelas Claude y cómo mantener una app actualizada.

¿Puedo alojar una app de React creada con Claude?

Sí, como archivos estáticos. Si es un proyecto, compílalo y sube la carpeta resultante. Si es un artifact, importa su enlace o pídele a Claude una versión en un único archivo HTML independiente. Activa Aplicación JavaScript si la app usa rutas de React Router.

¿Puede Claude alojar mi app?

Claude puede compartir un artifact por enlace, y para una herramienta pequeña suele bastar. El enlace se queda en una dirección de Anthropic y no puedes añadirle tu propio dominio. Además, quien lo abre sin iniciar sesión pierde las partes que usan Claude o apps conectadas.

¿Seguirá funcionando mi app si cancelo Claude?

Sí. La copia alojada son archivos normales en Static.app, así que no usa tu cuenta de Claude. Después de la prueba solo necesita un plan activo de Static.app.

¿Puede Claude Code actualizar la app cuando ya está online?

Sí, mediante el conector MCP. Claude Code puede editar archivos sueltos o sustituir toda la app por una nueva compilación, y la dirección no cambia.

¿Aquí un sitio web y una app son lo mismo?

Para Static.app, ambos son carpetas de archivos. La diferencia está en lo que debes comprobar antes. Si tu proyecto son sobre todo páginas, dónde alojar un sitio web creado con Claude es la guía más sencilla.