¿La exportación se ve en blanco? Ejecútala en local como toca cover image
Blog
NoCodeExport Team
Tutorial
5 min de lectura

¿La exportación se ve en blanco? Ejecútala en local como toca

Hacer doble clic en index.html te da una página en blanco y una consola llena de errores de módulo. Esto es por qué file:// rompe una exportación moderna, y el arreglo de una línea en macOS, Windows y Linux.

Descomprimes la exportación, haces doble clic en index.html y ves una página blanca. La consola dice algo como Failed to load module script o Cross origin requests are only supported for protocol schemes: http, https.

La exportación no tiene nada malo. Te has topado con una regla de seguridad del navegador, y el arreglo lleva unos diez segundos.

Por qué falla el doble clic

El doble clic abre el archivo con el protocolo file://. Cargar por http:// y abrir por file:// son contextos de seguridad distintos, y los navegadores restringen el segundo a propósito.

Bajo file:// se rompen tres cosas:

Los módulos de JavaScript. Cualquier <script type="module"> o archivo .mjs queda bloqueado sin más. Las exportaciones de Framer incluyen módulos, así que la página nunca arranca. Este es el que produce la página completamente en blanco.

fetch() y XHR. Cada petición file:// cuenta como petición de origen cruzado hacia un origen nulo. Los índices de búsqueda, los archivos JSON y todo lo que la página cargue en tiempo de ejecución fallarán.

La resolución de rutas relativas. Funciona casi siempre, pero los casos límite difieren de un servidor real de formas que te despistarán cuando intentes depurar otra cosa.

Nada de esto es exclusivo de las exportaciones no-code. Cualquier sitio estático moderno tiene el mismo problema. Por eso el README dentro de tu ZIP empieza avisando de que no abras index.html directamente.

El arreglo: sirve la carpeta por HTTP

Necesitas cualquier servidor HTTP apuntando a la carpeta de la exportación. Todos estos sirven: elige el que ya tengas instalado.

macOS y Linux

Node.js, lo más rápido si lo tienes:

cd /ruta/a/tu-exportacion
npx serve

Pulsa Enter si te ofrece instalarlo. Imprime una URL como http://localhost:3000. Ábrela.

Mientras trasteas con los archivos, desactiva la caché para no quedarte mirando una copia antigua:

npx serve -c-1

Python, ya viene en macOS y en casi todas las distros de Linux:

cd /ruta/a/tu-exportacion
python3 -m http.server 8000

Abre http://localhost:8000. Ctrl+C lo detiene.

El http.server de Python envía los tipos MIME correctos, y eso importa más de lo que parece: .mjs tiene que llegar como text/javascript o el navegador se niega a ejecutarlo como módulo. Un servidor que se equivoque te devolverá la misma página en blanco de la que intentabas salir.

Caddy, lo más parecido a producción:

cd /ruta/a/tu-exportacion
caddy file-server --listen :8000

Merece la pena si vas a desplegar detrás de un proxy y quieres que el comportamiento local coincida, porque configura tipos MIME y cabeceras razonables por su cuenta.

Windows

Los comandos de Node y Python son idénticos en PowerShell o el Símbolo del sistema, con una ruta de Windows:

cd C:\Users\tu-usuario\Downloads\tu-exportacion
npx serve

Si instalaste Python desde python.org, el lanzador es py:

cd C:\Users\tu-usuario\Downloads\tu-exportacion
py -m http.server 8000

Si no tienes ninguno de los dos y prefieres no instalar nada, la extensión Live Server de VS Code hace lo mismo desde el editor: clic derecho en index.html, Open with Live Server.

¿Qué puerto?

Da igual, mientras nadie más lo esté usando. Si ves EADDRINUSE, elige otro: npx serve -l 4000 o python3 -m http.server 4001.

Comprobar que la exportación salió bien

Una vez servida, una revisión rápida te dice si la exportación es sólida antes de invertir tiempo en desplegarla:

Abre DevTools y mira la consola. Debería estar en silencio. Errores que mencionen el dominio de tu plataforma original significan que algo sigue llamando a casa.

Busca 404 en la pestaña Network. Filtra por estado. Un recurso que falta aquí faltará también en producción.

Recorre la navegación. Los enlaces internos deben quedarse en localhost. Si un clic te devuelve a tu dominio de Webflow o Framer, ese enlace se construyó en tiempo de ejecución y no se reescribió.

Cambia el tamaño de la ventana. La maquetación debe cambiar en tus breakpoints. Si se ven todos a la vez, el CSS de breakpoints no llegó.

Haz scroll por toda la página. Las imágenes de más abajo deben estar, y las animaciones de scroll deben dispararse.

Envía un formulario. Tras exportar, los formularios necesitan un destino. Si configuraste uno durante la exportación, confirma que llega; si no, el formulario todavía no hará nada.

Cuando ya funciona en local

Una carpeta que se sirve bien en localhost se servirá bien casi en cualquier sitio, porque no queda nada por configurar. Los siguientes pasos habituales:

Para una comparativa completa de las opciones gratuitas, lee cómo alojar un sitio HTML estático gratis.

Problemas habituales

Sigue en blanco y la consola menciona módulos. El servidor manda .mjs con el tipo MIME equivocado. Cambia a python3 -m http.server o a Caddy, que lo hacen bien.

Cargan los estilos pero no las fuentes. En el plan gratuito los recursos se enlazan al CDN original en vez de descargarse, así que las fuentes necesitan conexión. Para alojamiento totalmente autónomo hace falta la opción de descarga.

La página va, las interacciones no. Los sliders, pestañas y acordeones se reimplementan en JavaScript puro durante la exportación. Si alguno está muerto, mira la consola: un error de JS anterior en la página detiene el resto del script.

Un 403 en todos los archivos. Permisos de directorio. chmod -R a+r . dentro de la carpeta lo arregla en macOS y Linux.

Preguntas Frecuentes

Antecedentes Técnicos

Comprender la arquitectura subyacente es clave para la escalabilidad a largo plazo. NoCodeExport prioriza la generación de código limpio y modular que se ajusta a los estándares web modernos.

Arquitectura

Construido sobre marcos de trabajo establecidos para garantizar la portabilidad y el rendimiento en cualquier proveedor de hosting.

Seguridad

La generación estática reduce significativamente la superficie de ataque, proporcionando seguridad de nivel empresarial para cada proyecto.

Probar la herramienta

Valida esto con un sitio real

Cuando quieras probar esta ruta en un proyecto real, abre la página principal de la herramienta y úsala con tu URL en vivo.

Herramienta recomendada

Exportador de código web

Exporta HTML, CSS y JS desde sitios en vivo

Usa la página principal del exportador para analizar un sitio real, revisar la configuración y seguir el flujo correcto.

Abrir Exportador de código web

Tome el Control Total de sus Proyectos Web

NoCodeExport es más que una herramienta de conversión; es una puerta de entrada al desarrollo web moderno para diseñadores y creadores que valoran la propiedad del código y el rendimiento.