Maria Gabriela Rodriguez Cuevas
Camilo Taborda
Gracias , fue de mucha ayuda ...
Julian David Alzate Cuervo
gracias, no había podido ahcerlo con netlify
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.
¿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:
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:
npm run build.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:
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.
Maria Gabriela Rodriguez Cuevas
Camilo Taborda
Gracias , fue de mucha ayuda ...
Julian David Alzate Cuervo
gracias, no había podido ahcerlo con netlify
Les presento mi proyecto como va hasta ahora a nivel de logica tiene muchos cambios con respecto al proyecto presentado por la profe
Aqui esta el repo por si le quieren echar un ojo aun me falta implementar varias cosas que tengo en mente https://github.com/amaneiro7/shopistore
Bryan Enrique Garay Benavidez
🤖 Hola comunidad para resolver el problema:
Jesus Alejandro Gutierrez Guevara
sabes de casualidad si la solucion para vercel seria igual o parecida? eso tambien pasa con vercel
Juan Becerra
Les comparto mi proyecto: https://shoppi-bh.netlify.app/ Quise ir mas alla, hice logica para usarios y toda la informacion la guardo en localStorage para que el usuario pueda guardar sus direcciones, ordenes y cambiar su informacion. Este es el repositorio: https://github.com/JUAN-BH/simpleEcommerce
Esther Mary Mayorga Frias
Aquí les dejo mi proyecto
Tanto en GH pages como en Netlify da problemas al recargar (no he logrado solucionarlo)
Aun estoy mejorándolo, mas por los momentos:
Carlos Miranda
Saludos
Nicolás Felipe Pinto Vega
Hola, Carlos. Un pregunta:
¿Comó hiciste para que cuando se recargue la pagina de tu projecto no aparezca la página de "404 file not found" de GitHub Pages?
Gracias de antemano!
Kellbis Salazar
Les comparto el proyecto:
Deploy:
Alejandro Calderón
Proyecto finalizado, ire agregando mas detalles porque lo usare como trabajo estrella en mi portfolio. ⭐
Ideas de los compañeros:
Quiza o quiza nunca:
JOSE FABIAN BONILLA GUZMAN
me robe como haces el manejo del titulo, sin mirar tu codigo llegamos a la misma solucion xD
Alexander Moreno
Leonardo Fonseca
Hola, mi avance actual del sitio es el siguiente y este es el repositorio .
Conecté la búsqueda a la url y traté de realizar a mi manera la lógica de juntar el fltrado de categorías al tiempo de la búsqueda. El menú depende de un filtrado rápido de lo que devuelve el fetch la primera vez para que muestre las categorías, dado que el api cambia mucho su data y consideré interesante que se actualizara según los datos que recibe. En caso de que los resultados no devuelvan nada, Coloqué un mensaje amigable dando la opción de hacer clic en las categorías para que el usuario no se quede solo con que no encontró nada.
Espero sea de ayuda y considero que todo puede mejorarse, optimizarse, etc. por tanto, todos los comentarios son bienvenidos 🙂.
david jurado
hola veo que todos tienen el MISMO ERROR que me gustaría solucionar y no me deja dormir, cuando recargamos en una ruta /clothes o cualquier categoría en general da un error, lo ideal seria cargar la categoría normal, o llevarnos a la raíz "/", igual trataré de buscar la solución (lo hice con nextjs13) pero si alguien sabe le agradezco
Hildebrando Vargas
hola, me salia lo mismo y lo resolví con el siguiente comando
npm install -D tailwindcss postcss autoprefixer
Javier Jael Castillo
Aquí está mi proyecto finalizado, mi reto personal fue pasar todo con TypeScript así que espero que le pongan un ojo por si quieren revisar como está la lógica, los interfaces y toda esta magia del tipado fuerte:
Sitio deploy: https://dulcet-griffin-d705e5.netlify.app Github: https://github.com/Javier0727/platzi-course-react-vite
Rubén Ernesto Aragón Gil
Oscar Ramírez Abreu
por alguna razon con
se ve bien juas juas
Johan Sebastian
Aca esta mi repositorio en netlify
Vite + React
Diego Fernando Pallares Ramirez
Este proyecto se puede subir por medio de Git - pages ?
Maria Gabriela Rodriguez Cuevas
Hola Diego, yo lo hice así: entrar al enlace 👍
Andres Felipe Camacho Rodriguez
Ayuda:
Rodrigo Damián Martinez
Buenas platizinautas ¿Cada vez que edite el ejercicio tengo que hacer un deploy desde cero ó se puede modificar el deploy desde netlify?
Platzi
Se puede modificar el deploy desde Netlify sin necesidad de hacerlo desde cero.
Daniel Morales
¿Por qué mi proyecto queda en blanco cuando hago el deploy en GitHub?
Dylan Antonio Yampuezan Motato
A alguien le salió este error al desplegar?
[vite:esbuild-transpile] Transform failed with 2 errors:
7:43:26 PM: assets/index-!{001}.js:2599:19: ERROR: Top-level await is not available in the configured target environment ("chrome87", "edge88", "es2020", "firefox78", "safari14" + 2 overrides)
7:43:26 PM: assets/index-!{001}.js:2600:17: ERROR: Top-level await is not available in the configured target environment ("chrome87", "edge88", "es2020", "firefox78", "safari14" + 2 overrides)
Diego Fernando Pallares Ramirez
huy no que error mas loco, lo lograste solucionar ?
🚀 Pasos para hacer el deploy en Github 🚀
main (que es la que queremos hacer deploy) :git checkout main
npm run build
dist, para visualizar la app se corre:npm run preview
npm install gh-pages --save-dev
package.json, antes del cierre de la última llave, se
agrega:"homepage": "https://nombre_usuario.github.io/nombre_repositorio/"
scripts se agrega "deploy": "gh-pages -d dist" queda así:"scripts": { "dev": "vite", "build": "vite build", "lint": "eslint src --ext js,jsx --report-unused-disable-directives -- max-warnings 0", "preview": "vite preview", "predeploy": "npm run build", "deploy": "gh-pages -d dist" },
vite.congig.js y agregamos base: "./", el código queda:import { defineConfig } from 'vite' import react from '@vitejs/plugin-react' // https://vitejs.dev/config/ export default defineConfig({ plugins: [react()], base: "./", })
npm run deploy
Published es que todo salió bien. ✅
main y gh-pages.
gh-pages seleccionó por nosotros la
opción de la rama gh-pages y la carpeta raíz: /root.