Deploy de React en Netlify
Clase 30 de 31 • Curso de React.js con Vite.js y TailwindCSS
Contenido del curso
Maria Gabriela Rodriguez Cuevas
student•
hace 3 años
Camilo Taborda
student•
hace 3 años
Julian David Alzate Cuervo
student•
hace 3 años
Maria Gabriela Rodriguez Cuevas
Camilo Taborda
Julian David Alzate Cuervo
Andres Eduardo Maneiro Antunez
JOSE FABIAN BONILLA GUZMAN
Alfonso Ricaurte Riveros
Bryan Enrique Garay Benavidez
Jesus Alejandro Gutierrez Guevara
Juan Becerra
Esther Mary Mayorga Frias
Carlos Miranda
Nicolás Felipe Pinto Vega
Kellbis Salazar
Alejandro Calderón
JOSE FABIAN BONILLA GUZMAN
Alexander Moreno
Leonardo Fonseca
david jurado
Hildebrando Vargas
Javier Jael Castillo
Rubén Ernesto Aragón Gil
Johan Sebastian
Diego Fernando Pallares Ramirez
Maria Gabriela Rodriguez Cuevas
Andres Felipe Camacho Rodriguez
Rodrigo Damián Martinez
Platzi
Daniel Morales
Dylan Antonio Yampuezan Motato
Diego Fernando Pallares Ramirez
Armando Cruz Vidal
Carlos Romero
sandy.moo
🚀 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.
Gracias , fue de mucha ayuda ...
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
interesante el estado de carga que le metiste mientras
Me gusto mucho, lo que has logrado. Gracias por compartir
🤖 Hola comunidad para resolver el problema:
sabes de casualidad si la solucion para vercel seria igual o parecida? eso tambien pasa con vercel
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
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:
Saludos
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!
Les comparto el proyecto:
Deploy:
Proyecto finalizado, ire agregando mas detalles porque lo usare como trabajo estrella en mi portfolio. ⭐
Ideas de los compañeros:
Quiza o quiza nunca:
me robe como haces el manejo del titulo, sin mirar tu codigo llegamos a la misma solucion xD
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 🙂.
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
hola, me salia lo mismo y lo resolví con el siguiente comando
npm install -D tailwindcss postcss autoprefixer
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
Aca esta mi repositorio en netlify
Vite + React
Este proyecto se puede subir por medio de Git - pages ?
Hola Diego, yo lo hice así: entrar al enlace 👍
Ayuda:
Buenas platizinautas ¿Cada vez que edite el ejercicio tengo que hacer un deploy desde cero ó se puede modificar el deploy desde netlify?
Se puede modificar el deploy desde Netlify sin necesidad de hacerlo desde cero.
¿Por qué mi proyecto queda en blanco cuando hago el deploy en GitHub?
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)
huy no que error mas loco, lo lograste solucionar ?
Al entrar dice NotFound. Debe haber un problema con las rutas.
Puedes agregar basename en el componente BrowserRouter de index.jsx <BrowserRouter basename="/nombre-repo/"> para ubicar la ruta base antes de cada ruta
