Contenido del curso

Deploy de e-commerce con Netlify y GitHub

Resumen

Publicar tu proyecto en internet es el paso que convierte el código en una experiencia real para usuarios. Aquí aprenderás cómo hacer deploy de un e-commerce con Vite y Netlify usando la interfaz visual, conectando GitHub y verificando que tu tienda funcione en producción. Es una guía pensada para quienes ya terminaron su proyecto y quieren compartirlo con el mundo.

¿Qué necesitas antes de hacer deploy en Netlify?

Antes de tocar cualquier botón, conviene tener listo el entorno mínimo para que el proceso fluya sin tropiezos.

  • Una cuenta activa en Netlify, ya sea creada con email o vinculada a GitHub.
  • El repositorio del e-commerce subido a GitHub, con la rama principal actualizada.
  • La guía oficial de Vite sobre deployment, disponible en la cajita de recursos, que reúne los comandos para publicar con distintas herramientas.

¿Qué es el deploy de una aplicación? Es el proceso de tomar tu código y publicarlo en un servidor accesible desde internet, para que cualquier persona pueda usar tu aplicación desde una URL.

La guía de Vite es útil porque no te casa con un solo proveedor: puedes elegir el flujo que prefieras y replicar los pasos.

¿Cómo conectar GitHub con Netlify para publicar el proyecto?

Netlify funciona muy bien con repositorios remotos porque automatiza la integración continua. Cada vez que haces push, el sitio se actualiza solo.

El flujo desde la herramienta visual sigue tres pasos claros:

  1. Entrar a la opción /start en Netlify e iniciar sesión con tu cuenta.
  2. Seleccionar a GitHub como proveedor de Git y autorizar el acceso.
  3. Escoger el repositorio del e-commerce que quieres publicar.

Después de seleccionar el repositorio, Netlify te muestra el owner, la rama desde la que se hará el deploy y algunas configuraciones básicas como el comando de build y la carpeta de salida. Para un proyecto con Vite, estos valores suelen detectarse automáticamente.

¿Qué configuraciones revisar antes de dar clic en deploy?

Aunque Netlify autocompleta varios campos, vale la pena confirmarlos:

  • La rama de despliegue, normalmente main o master.
  • El comando de build, que en Vite suele ser npm run build.
  • El directorio de publicación, que en Vite por defecto es dist.

¿Por qué Netlify usa la carpeta dist? Porque Vite compila tu aplicación y genera los archivos estáticos optimizados dentro de dist. Esa carpeta es la que se sirve al usuario final.

¿Cómo verificar que tu e-commerce quedó publicado correctamente?

Al dar clic en deploy, Netlify muestra una página indicando que el sitio está en progreso. El proceso suele tardar pocos minutos mientras se ejecutan el build y la subida de archivos.

Cuando recargas la página y aparece el estado de deploy listo, ya tienes una URL pública. Al abrirla deberías ver tu e-commerce funcionando igual que en local: los productos se muestran, el carrito responde y el flujo de checkout se ejecuta sin errores.

Probar el checkout en producción es una buena costumbre. Si todo funciona como en tu entorno local, significa que el build se generó correctamente y que las rutas, estilos y dependencias quedaron empaquetadas como esperabas.

¿Qué hacer después de publicar tu proyecto?

Una vez que tienes la URL viva, el siguiente paso es compartirla y seguir iterando. Puedes:

  • Compartir tu URL en los comentarios del curso para recibir retroalimentación.
  • Configurar un dominio personalizado desde el panel de Netlify.
  • Continuar agregando funcionalidades, sabiendo que cada push a tu repositorio disparará un nuevo deploy automático.

Este flujo de integración continua es una de las razones por las que herramientas como Netlify se volvieron estándar para proyectos hechos con Vite, React o cualquier framework moderno de frontend.

¿Ya tienes lista la URL de tu e-commerce? Compártela en los comentarios para revisar tu proyecto.