Fazt creo que a ti y a otros dos profesores de youtube debo agradecerles mis conocimientos de desarrollo, enserio lo agradezco cuando empiece a trabajar juro unirme al canal :3
Desde hace un año empeze a recibir un pequeño ingreso por mis servicios de programación, pero todo lo debo a ti fazt, igual a nuestro amigo de Programación ATS, que descanse en paz, a ustedes dos principalmente estoy súper agradecido, todas mis bendiciones Fazt, eres el mejor 👏👏👏
Fazt un genio total, rebien explicado, hice la prueba en leer la doc de vite me llevo su tiempo, y ver tu video, directo al hueso. Me ahorre muchos dolores de cabeza. No aflojes....!!!!!
Profe, muchas gracias y mis respetos. Apenas voy entrando al mundo de Vite y React y con su video despejé muchas dudas, gracias por compartir su conocimiento y ser tan explícito. Por más profes como usted 👏🏻👏🏻👏🏻👏🏻
Gracias por la informacion valiosa Fatz quiero aprender mas de vite por que estoy aprendiendo Svelte como primer framework de javascript y este se actualizo hace unos dias para funcionar con Vite.
vos vite que vite facilita la construcción de sitios estáticos?! Jaja, videazo Fazt ojalá lo hubieras enseñado antes debido a que se me complicó subir un proyecto de la uni en Pages, un gran abrazo, eres un Craaack!!! Por cierto, te quería decir que puedes usar el browser interno que tiene Vscode, lo buscas en la paleta de comandos y escribes simple browser, ahí te pedirá una URL y ya te pone el preview de un proyecto, espero y te sirva
Siempre he tenido la curiosidad si este tipo de herramientas (create-react-app y ahora vite) se usan en entornos de producción o solo se usan en la etapa de aprendizaje. O si por el contrario cada companía o equipo de desarrollo personaliza su propia plantilla. En lo personal a mi me gustaría saber como se construye una React app a mano y estas herramientas te ahorran trabajo pero también te ocultan lo que ocurre detrás del escenario. Gracias por el contenido que publicas, soy tu hincha. Slds.
Hola Sandro. La respuesta como siempre es un dependen, pero sí, estas herramientas son usadas en producción, aunque depende de la empresa, algunas desarrollan sus propios componentes e internamente hacen builds de cada uno de estos usando estos programas. Aunque tambien hay empresas que configuran sus propias herramientas usando Wepback debido a que quieren integrar progresivamente algunos de estos componentes en aplicaciones ya creadas, aunque por lo general muchos desarrolladores no lo configuran, solo los clonas, asi que siempre es recomendado aprender el framework primero y luego dedicarle un tiempo a las herramientas de construcción. Un Saludo :)
@@FaztCode una pregunta a mi no me corre el proyecto en el puerto por defecto, me corre en otro, creo que era en el puerto 5100 o algo asi. Saber xq pasa eso?
che muy buen video, esos micro cortes que haces para que la explicacion sea mas fluida estan muy buenos, se ve que te tomas el tiempo de editar bien los videos, gracias por estos tutoriales que me sirven un monton pregunta, esto lo puedo combinar con una base de datos en heroku u otro servidor y hacer mis proyectos de front y backend sin problemas verdad? gracias
Actualmente solo es necesario copiar todo el codigo del punto 2 de la seccion GitHub Pages y con eso sera suficiente para mostrar nuestra web con configuraciones predeterminadas.
Cuando hago el nmp run preview me sale que no se pudo cargar el recurso localhost/:1 Failed to load resource: the server responded with a status of 404 (Not Found) y no me muestra las imágenes, las tengo en una carpeta img en assets. ¿por qué pasa esto?
gracias por toda la info fazt, lo único malo de gh-pages es que no soporta nativamente las spa y cuando recargas la pagina en una una ruta especifica te tira 404, he tenido varias problemas con esto y todavía no pude solucionarlo.
@@co_developer260 En teoria si, es crear un HTML404 que redireccione al usario a una ruta x, pero se me hizo complejo aplicacar eso en mi app. La inf esta en github, busca el problema y te va a aperecer.
Excelente tutorial, muchas gracias fazt, me surge la duda de ¿por qué al tratar de abrir el index.html de la carpeta dist en el navegador, el proyecto aparece como una blank page?
Excelente! Una consulta, como subo nuevos cambios al repo ya deployado?. Intente a hacerlo con --> git add . , git commit -m "", npm run deploy . La terminal me indica "published" pero no lo veo reflejado en la branch gh-pages ni en la web creada.
Fazt me gusta vite pero no se que pasa con local host, el de webpack podias ver la funcionalidad de mi proyecto desde mi celular o una tablet, pero ahora el servidor local que me crea vite no puedo, alguien sabe algo que me pueda ayudar pera poder verlo aceder en mi red local?
Fazt el deploy con gh-pages no funciona cuando se manejan rutas con react.router.dom, allgun consejo de que debo hacer para realizar el deploy y que me muestre las rutas que estableci en mi app?
Hola crack, como va? te hago una consulta... ahi la carpeta principal no seria "react-vite"? porque veo que usas la carpeta "dist" pero veo que esta cerrada y no se q contenido almacena, espero tu respuesta, saludos!
Hola, subi mi sitio usando React Router, pero no funciona bien, me manda a las otras urls, pero cuando refresco la pagina dice error 404 alguien sabe por que y como solucionarlo? tampoco me cargan los svg's
Muy buen tutorial disculpa como puedo integrarlo en un proyecto existente que utiliza php jquery javascript quisiera agregar esto en algun modulo nuevo no se si me hago entender
Como vite generar proyectos de Frontend, lo que pudes hacer es crear una REST API en PHP, quizas usando tu framework favorito, y el frontend consumiria la aplicacion. Una vez terminado sinplemente puedes cargar el archivo HTML que genera vite en una pagina de PHP, y eso sería practicamnte todo
@@FaztCode ok muchas gracias vere como hago algo como crear el package json instalar dependencias y crear componentes o vistas para ocuparlas en agunas partes del sistema donde este trabajando como es grande el proyecto y estoy actualizando algunas partes por eso le comentaba.
Olá amigo, segui tu vídeo a la perfección y todo funcionó correctamente a la verdad. Pero Tuve el inconveniente de Página no encontrada al cambiar de la ruta principal a alguna otra ruta de mi sitio Web, no entendí ese error. Algún vídeo asociados a estos error de página no encontrada al subir app a Producción
Basicamente cuando usas npm run buiild, este genera la carpeta dist, solo tendrias que subir esa carpeta a tu www y basicamente eso seria todo, lo anoto para crear un video esta semana :)
Sabes como implementar CI/CD con gh-pages? me gustaria que cada que quiera integrar un nuevo cambio pase algunas pruebas unitarias antes de hacer el gh-pages -d dist
por favor digame cómo se prueba en modo development una web app con https! gracias de antemano: cómo se crea un certificado para poder probar localmente en development y usar vite y después hacer el deploy: bueno yo sé que es mucho pedir, pero de pronto no. gracias de antemano. Al buscar encontré el nombre del tema: self signed localhost ssl certificate. Por favor dígame.
Hola fazt, muy buen video. Tengo una pregunta y espero alguien pueda responderla... Iniciando mi proyecto con vite para react puedo instalar material ui? Recientemente lo hice con create-react-app y no me dejó instalarlo, me decía que no podía resolver los módulos, esto específicamente con material/icons y aunque en el package.json ya se encontraba instalado el material/core y el material/icons
Si puedes usarlo sin problemas, de hecho te da ese error porque el nombre de los paquetes han cambiado creo que ahora se llama mui, te recomiendo revisar la documentación
Por lo general los module bundlers son los relacionados a proyectos web, pero lo que si hay en otros lenguajes es frameworks que compilen a un proyecto web, Lenguajes como Kotlin, o proyectos como Flutter en Dart, o Yew en Rust por ejemplo al final compilan a una aplicación web, no estoy seguro si a esto te referías :)
Buena esa calamardo ... (Por el titulo)
Chistaco de los buenos 😂
Fazt creo que a ti y a otros dos profesores de youtube debo agradecerles mis conocimientos de desarrollo, enserio lo agradezco cuando empiece a trabajar juro unirme al canal :3
quienes son tus otros dos?
ya trabajando?
Desde hace un año empeze a recibir un pequeño ingreso por mis servicios de programación, pero todo lo debo a ti fazt, igual a nuestro amigo de Programación ATS, que descanse en paz, a ustedes dos principalmente estoy súper agradecido, todas mis bendiciones Fazt, eres el mejor 👏👏👏
El mejor tutorial que vi en mi vida. Me estaba arrancando la cabeza tratando de hacer esto y me lo mostraste tan rápido y conciso. Mil gracias.
Excelente introducción a vite, todo es tan claro y conciso🤍.
Ahora voy a ver tus vídeos de react.
Muchas gracias.
Fazt un genio total, rebien explicado, hice la prueba en leer la doc de vite
me llevo su tiempo, y ver tu video, directo al hueso. Me ahorre muchos dolores de cabeza.
No aflojes....!!!!!
Profe, muchas gracias y mis respetos. Apenas voy entrando al mundo de Vite y React y con su video despejé muchas dudas, gracias por compartir su conocimiento y ser tan explícito. Por más profes como usted 👏🏻👏🏻👏🏻👏🏻
fazt no se que hice pero fue despues de pasar por aqui, por fin pude desplegar mi pagina de portafolio. gracias
OMG, is amazing, I learned a lot with ur video, now i want to be a frontend developer. Good luck with ur next video
Llevas un ritmo espectacular y una claridad acorde. Excelente video!
Moro no Brasil e seu video explicando como subir o projeto vite com o github-pages foi o melhor mesmo não entendendo direito seu idioma. obrigado!
Al fin alguien encontró el momento perfecto para hacer el chiste que todo programador latinoamericano ha querido hacer desde que Vite salió.
Excelente fazt, y gran titulo jaja, es algo que los gringos no entenderían
gracias por enseñarnos esta nueva forma de instalación de react, estaba teniendo problemas con la instalación tradicional
Jajaja fazt me hiciste el día con el () del título 😅😅
Justo estaba x empezar un projecto con vite, gracias yt x recomendarme este video. 🙂
Gracias por la informacion valiosa Fatz quiero aprender mas de vite por que estoy aprendiendo Svelte como primer framework de javascript y este se actualizo hace unos dias para funcionar con Vite.
vos vite que vite facilita la construcción de sitios estáticos?! Jaja, videazo Fazt ojalá lo hubieras enseñado antes debido a que se me complicó subir un proyecto de la uni en Pages, un gran abrazo, eres un Craaack!!!
Por cierto, te quería decir que puedes usar el browser interno que tiene Vscode, lo buscas en la paleta de comandos y escribes simple browser, ahí te pedirá una URL y ya te pone el preview de un proyecto, espero y te sirva
jaja por si no lo vite. Excelente tutorial agradecido con la intro
gracias, fue muy util, pense que era mas dificil pero es casi lo mismo que un html con css.
Exelente informacion, Gracias bro! ya porfin soy Senior Front-End Developer
JAJAJAJAJAJAJAJJAJ Por si no lo Vite JAJAJAJAJAJAJAJAJJA Este parcero es el mejor ome , Fazt la buena parcerito
A heartfelt thanks. You saved me a few hours, maybe even days.
Muchas gracias me funciono seguir la parte del deployd, muy bien explicado
Excelente como siempre, gracias.
Gracias por este fantástico video!!!
Buenísimo el título❤️❤️❤️💜💜👏👏👏😭😭😭🤣🤣🤣🤣🤣
Humor fino señores 💻🙏
Por si no lo vite... Entendí esa referencia jajajaj
Se ganó mi like por el titulo jajaja
Genial, gracias por compartir fazt!
Siempre he tenido la curiosidad si este tipo de herramientas (create-react-app y ahora vite) se usan en entornos de producción o solo se usan en la etapa de aprendizaje. O si por el contrario cada companía o equipo de desarrollo personaliza su propia plantilla. En lo personal a mi me gustaría saber como se construye una React app a mano y estas herramientas te ahorran trabajo pero también te ocultan lo que ocurre detrás del escenario. Gracias por el contenido que publicas, soy tu hincha. Slds.
Hola Sandro. La respuesta como siempre es un dependen, pero sí, estas herramientas son usadas en producción, aunque depende de la empresa, algunas desarrollan sus propios componentes e internamente hacen builds de cada uno de estos usando estos programas. Aunque tambien hay empresas que configuran sus propias herramientas usando Wepback debido a que quieren integrar progresivamente algunos de estos componentes en aplicaciones ya creadas, aunque por lo general muchos desarrolladores no lo configuran, solo los clonas, asi que siempre es recomendado aprender el framework primero y luego dedicarle un tiempo a las herramientas de construcción. Un Saludo :)
@@FaztCode una pregunta a mi no me corre el proyecto en el puerto por defecto, me corre en otro, creo que era en el puerto 5100 o algo asi. Saber xq pasa eso?
Muchisimas gracias, super util!
tremendo crack, gracias :)
No entendí na'... Pero ya voy a entender, muy pronto 😬
Buen video, directo al grano c:
Jajaja el título xD grande Fazt gracias
Que buen titulo jajajajaja y que buen video como siempre
Belico.!!!! 10/10
Muy bueno y útil. Saludos
"no lo vite" ajajajaj buenísimo!!!
en el minuto 3:00, en mi terminal no se cambia de opción cuando oprimo las flechas del teclado ¿que debo hacer?
Usa la terminal de Visual Studio Code.
Disculpen a la hora de hacer el preview de no me redirecciona hacia las otras paginas html creadas! Me las marca como error.. Alguien sabe por qué?
che muy buen video, esos micro cortes que haces para que la explicacion sea mas fluida estan muy buenos, se ve que te tomas el tiempo de editar bien los videos, gracias por estos tutoriales que me sirven un monton
pregunta, esto lo puedo combinar con una base de datos en heroku u otro servidor y hacer mis proyectos de front y backend sin problemas verdad?
gracias
Hola Fazt, gracias siempre por tus videos, una consulta, ¿cómo puedo subir si mi página tiene rutas, se sube normal?
Gracias Master
es necesario tener instalado algo de vite primer? no me reconoce los comandos
por que liarse con github pages si es mas facil hacerlo en vercel ? u otro similar
Maldi tasea fazt me veo en la obligación de darte un like
Actualmente solo es necesario copiar todo el codigo del punto 2 de la seccion GitHub Pages y con eso sera suficiente para mostrar nuestra web con configuraciones predeterminadas.
lo del deploy sh ya no esta en la documentación ya no es necesario?
Cuando hago el nmp run preview me sale que no se pudo cargar el recurso localhost/:1 Failed to load resource: the server responded with a status of 404 (Not Found) y no me muestra las imágenes, las tengo en una carpeta img en assets. ¿por qué pasa esto?
A ver cuando UA-cam inventa el botón de "Me encanta!"
Genial!
una pregunta: entonces como uno desarrolla la app no es como se vera en produccion?
Muchas gracias, si se desplegó en GitHub pages, pero no se cargan las imágenes
Alguien sabe porque no puedo selecionar conque framework trabajar las flechas no funcionan :(
"por si no lo vite" 😁😁😁
hola estoy aprendiendo react y php (laravel 9) usando viteJS como severa el directorio dist ya incluyendo laravel ???
gracias por toda la info fazt, lo único malo de gh-pages es que no soporta nativamente las spa y cuando recargas la pagina en una una ruta especifica te tira 404, he tenido varias problemas con esto y todavía no pude solucionarlo.
Voy a revisarlo a fondo, y a ver si con un ejemplo tomo en cuenta estos casos, para que quede mas claro. Gracias por comentarlo Agustín :)
Hay alguna solucion practica para esto?
@@co_developer260 En teoria si, es crear un HTML404 que redireccione al usario a una ruta x, pero se me hizo complejo aplicacar eso en mi app. La inf esta en github, busca el problema y te va a aperecer.
@@co_developer260 Si lo tiene, recuerdo que tuve ese problema, no recuerdo la solución
Pero recuerdo que es algo que se debe a react-router
wow es increiblemente rapido
a mi no me deja seleccionar el framework a la hora de instalarlo, cual tecla utilizan? puede ser un error de mi consola?
Debería de salirte normal y los seleccionas con las flechas del teclado
buen video
Excelente tutorial, muchas gracias fazt, me surge la duda de ¿por qué al tratar de abrir el index.html de la carpeta dist en el navegador, el proyecto aparece como una blank page?
Buenisimo
Excelente! Una consulta, como subo nuevos cambios al repo ya deployado?. Intente a hacerlo con --> git add . , git commit -m "", npm run deploy . La terminal me indica "published" pero no lo veo reflejado en la branch gh-pages ni en la web creada.
Tengo la misma duda, lo pudiste resolver?
genial! merci!
Sigo esperando electron + lowdb!!! no existe un buen video de eso!
Fazt me gusta vite pero no se que pasa con local host, el de webpack podias ver la funcionalidad de mi proyecto desde mi celular o una tablet, pero ahora el servidor local que me crea vite no puedo, alguien sabe algo que me pueda ayudar pera poder verlo aceder en mi red local?
Tengo una duda... En caso de hacer cambios a mi código, ¿que se necesita hacer para que se vean reflejados estos cambios?
Tengo la misma duda, lo pudiste resolver?
Fazt el deploy con gh-pages no funciona cuando se manejan rutas con react.router.dom, allgun consejo de que debo hacer para realizar el deploy y que me muestre las rutas que estableci en mi app?
Uh que mal, estaba perdiendo un montón de tiempo entendiendo por qué no me funcionaba, ahora me queda claro, gracias por la data :D
y sino tenemos NODE JS instalado?
deberias explicar eso desde el principio tambien
Hola crack, como va? te hago una consulta... ahi la carpeta principal no seria "react-vite"? porque veo que usas la carpeta "dist" pero veo que esta cerrada y no se q contenido almacena, espero tu respuesta, saludos!
Hola, subi mi sitio usando React Router, pero no funciona bien, me manda a las otras urls, pero cuando refresco la pagina dice error 404 alguien sabe por que y como solucionarlo? tampoco me cargan los svg's
Depende de donde lo estes hosteando, tienes que buscar la sección de redirects y configurar que siempre haga un rewrite a la raíz ("/")
@@tutorialesTACHABI ya lo resolví el problema era que debía usar HASHROUTE en vez de BROWSER ROUTE
En el caso de querer hacer una PWA con Vite y React como seria?
Muy buen tutorial disculpa como puedo integrarlo en un proyecto existente que utiliza php jquery javascript quisiera agregar esto en algun modulo nuevo no se si me hago entender
Como vite generar proyectos de Frontend, lo que pudes hacer es crear una REST API en PHP, quizas usando tu framework favorito, y el frontend consumiria la aplicacion.
Una vez terminado sinplemente puedes cargar el archivo HTML que genera vite en una pagina de PHP, y eso sería practicamnte todo
@@FaztCode ok muchas gracias vere como hago algo como crear el package json instalar dependencias y crear componentes o vistas para ocuparlas en agunas partes del sistema donde este trabajando como es grande el proyecto y estoy actualizando algunas partes por eso le comentaba.
Fazt que grandeeee eresss!! Que S.O. usas?
Actualmete estoy usando Xubuntu :)
Olá amigo, segui tu vídeo a la perfección y todo funcionó correctamente a la verdad.
Pero
Tuve el inconveniente de Página no encontrada al cambiar de la ruta principal a alguna otra ruta de mi sitio Web, no entendí ese error.
Algún vídeo asociados a estos error de página no encontrada al subir app a Producción
También adicionó que en NPM run preview todo funciona correctamente, pero al hacer El Deploy solo la ruta principal funciona
Puedo crear archivos jsx utilizando create react app?
Si también, solo en Vite son requeridos, pero en create-React-app son opcionales :)
@@FaztCode y como puedo crear los archivos jsx usando create react app?
Como puedo modificar la carpeta de destino de los CSS?
compo se instala?
Graacias por el video fazt, sabes cómo implementar vite pero ya a producción, en cpanel? jajaja
Basicamente cuando usas npm run buiild, este genera la carpeta dist, solo tendrias que subir esa carpeta a tu www y basicamente eso seria todo, lo anoto para crear un video esta semana :)
Sabes como implementar CI/CD con gh-pages? me gustaria que cada que quiera integrar un nuevo cambio pase algunas pruebas unitarias antes de hacer el gh-pages -d dist
Me parece que hay algo llamado Husky el cual permite hacer lo que buscas
"Por si no lo vite" xD
por favor digame cómo se prueba en modo development una web app con https! gracias de antemano: cómo se crea un certificado para poder probar localmente en development y usar vite y después hacer el deploy: bueno yo sé que es mucho pedir, pero de pronto no. gracias de antemano. Al buscar encontré el nombre del tema: self signed localhost ssl certificate. Por favor dígame.
Hola fazt, muy buen video. Tengo una pregunta y espero alguien pueda responderla...
Iniciando mi proyecto con vite para react puedo instalar material ui?
Recientemente lo hice con create-react-app y no me dejó instalarlo, me decía que no podía resolver los módulos, esto específicamente con material/icons y aunque en el package.json ya se encontraba instalado el material/core y el material/icons
Si puedes usarlo sin problemas, de hecho te da ese error porque el nombre de los paquetes han cambiado creo que ahora se llama mui, te recomiendo revisar la documentación
muerte a webpack, larga vida a viteeeeeee
Alguien tendra la solucion del error 404 en github pages cuando refrescas la pagina?
gracias :,V
Cómo se llama el tema que estás usando fast?
Se llama Ayu:
marketplace.visualstudio.com/items?itemName=teabyii.ayu
Gracias fazt, una pregunta, que terminal usas
Hola Dan, el que se muestra aqui es Alacritty, hice un tutorial hace meses:
ua-cam.com/video/9ttxDIolNBo/v-deo.html
@@FaztCode gracias
Gracias por otro excelente video! Como pregunta adicional qué sistema operativo estás usando?
Hola Leonardo, este sistema es Xubuntu
si lo vi, vite xD
Jajja que buen título, y tú ya lo vite?
Hey fazt, ya probaste Cyclic para desplegar proyectos?
No lo he probado, vero voy a revisarlo para crear un video del tema. Gracias por la idea :)
@@FaztCode Genial Fazt!
El título JAJAJAJAJAJAAJAJAJ
Que distro de linux utilizas?
Se llama Xubuntu
¿Algún tuto para hacer SSR en vite?
Aún no he creado uno pero voy a desarrollar un ejemplo, es buena idea 👍🏼
I see what you did there, vite?
Hola fazt discúlpame el atrevimiento pero, sabes si existen otras tecnologías parecidas pero en otros lenguajes o algo por el estilo???
Por lo general los module bundlers son los relacionados a proyectos web, pero lo que si hay en otros lenguajes es frameworks que compilen a un proyecto web, Lenguajes como Kotlin, o proyectos como Flutter en Dart, o Yew en Rust por ejemplo al final compilan a una aplicación web, no estoy seguro si a esto te referías :)
@@FaztCode creo que explique mal me refería a herramientas de creación de proyectos, pero gracias por responder :3
por si no lo vite jaksja