Contenido del curso

Deploy de app Solid en Netlify

Resumen

Llevar tu aplicación Solid a producción con Netlify toma menos de cinco minutos si ya tienes el proyecto listo. Aquí verás cómo generar el build, qué carpeta subir y cómo validar que el local storage y los estados sigan funcionando una vez publicado.

¿Qué hace el comando npm run build en Solid?

Cuando creas un proyecto con el scaffolding oficial de Solid, el README ya trae documentados los comandos que necesitas para producción. El más importante es npm run build, que compila tu aplicación y deja todos los assets listos en una carpeta nueva.

¿Qué genera npm run build? Crea una carpeta llamada dist con el HTML, CSS y JavaScript optimizados. Esa carpeta es la que subes a cualquier proveedor de hosting estático.

Para ejecutarlo, detén el servidor de desarrollo que tengas corriendo con Vite y lanza el comando en la consola:

bash npm run build

Cuando termine, abre el explorador de archivos del proyecto y verás la carpeta dist con todo lo necesario para publicar.

¿Cómo subir tu app a Netlify sin configurar nada?

Netlify, que además es el sponsor oficial de Solid, ofrece varias rutas para hacer deploy. Puedes conectar tu repositorio de GitHub para integraciones continuas, pero existe un atajo mucho más rápido cuando solo quieres publicar.

¿Qué es Netlify Drop y cómo funciona?

Entra a netlify.com/drop y vas a encontrar una página que acepta drag and drop directo desde tu sistema de archivos. Arrastras la carpeta dist hacia el navegador y Netlify se encarga del resto: subida, hosting y URL pública.

¿Necesito una cuenta para usar Netlify Drop? No para publicar el primer sitio, pero sí si quieres conservarlo, asignarle dominio o editarlo después.

En segundos vas a ver el enlace generado. Al abrirlo, tu aplicación Solid ya está viva en internet, accesible para cualquier persona con la URL.

¿Cómo validar que tu app funciona después del deploy?

Una vez publicado el sitio, conviene hacer una pasada rápida por las funcionalidades que dependen del navegador. El build de producción a veces se comporta distinto al modo desarrollo, así que probar en caliente es la mejor red de seguridad.

Estas son las pruebas mínimas que vale la pena correr:

  • Cambiar entre light mode y dark mode y confirmar que toda la interfaz responde.
  • Agregar un nuevo ítem a la lista y refrescar la página para verificar persistencia.
  • Marcar un ítem como completed, recargar y revisar que el estado sobreviva.
  • Editar y eliminar elementos para confirmar que el local storage refleja cada cambio.

El local storage es la pieza clave aquí: guarda las configuraciones del usuario directamente en el navegador, así que cuando refrescas la página, los datos siguen ahí sin necesidad de un backend. Si todo eso funciona en la versión desplegada, tu aplicación Solid está oficialmente en producción.

Comparte el enlace de tu aplicación en los comentarios para ver qué construiste con Solid.