Deploy de app Solid en Netlify

Contenido del curso

No sé dónde empezar

Introducción a SolidJS

Reactividad a profundidad

Renderizado en Solid

Reactividad en Listas

Componentes

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:002:16

Deploy de app Solid en Netlify

Curso de SolidJS

Clase 26 de 27

Clase 26 / 27

Recursos

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.

Introducción a SolidJS

SolidJS vs React: reactividad granular explicada

Python para Principiantes: Fundamentos y Aplicaciones Básicas

Signals en SolidJS: crea datos reactivos

createEffect y side effects en SolidJS

Signals derivados vs createMemo en Solid

Reactividad a profundidad

Qué es la reactividad en Solid

Creación de una Librería Reactiva MiniSolid desde Cero

Implementación de Signals en Librería Reactiva Solid

Cómo createEffect conecta signals y efectos

Señales derivadas sin nuevas primitivas

createMemo para evitar renderizados innecesarios

Cómo Solid convierte JSX al DOM real

Renderizado en Solid

Configurando SolidJS con Tailwind para Todo App

Dark mode en SolidJS con signals

Renderizado Condicional en Solid: Técnicas y Optimización

Renderizado de listas reactivas con For en Solid

Manejo de Eventos en Elementos HTML con SolidJS

Reactividad en Listas

Optimización de Renderizado y Reactividad en Listas con SolidJS

Cómo funcionan los stores en Solid JS

Stores de SolidJS para datos complejos

Función produce para mutar stores en Solid

Componentes

Qué son los componentes en Solid

Comunicación padre-hijo con props en SolidJS

Eventos personalizados entre componentes React

Persistencia con localStorage y useEffect

Deploy de app Solid en Netlify

Solid y el futuro del desarrollo web

Deploy de app Solid en Netlify