Introducción a Vite, mas Deploy en Github Pages (Por si no lo vite)
HTML-код
- Опубликовано: 6 июн 2022
- Esta es una introducción Practica a Vite. Vite es una herramienta de generacion de proyectos de Frontend, similar en la practica a create-react-app, vue-cli, o angular-cli: de hecho todos estos modulos estan basados en Webpack, sin embargo Vite, esta desarrollado para ser mucho mas veloz que webpack tanto en desarollo como al momento de hacer el build. Ademas soporta multiples frameworks y bibliotecas como Vue, React, Solid, Svelte, Preact, Lit y Vanilla Javascript.
En este video haremos una comparacion de Vite con create-react-app para generar un proyecto de React, y tambien aprenderemos a desplegarlo con Github Pages
Documentacion de Vite: vitejs.dev/
Github pages npm: www.npmjs.com/package/gh-pages
🎥 Videos Recomendados:
Github Pages npm ➜ • Github Pages | Sitios ...
Mongodb Visual Studio Code ➜ • Mongodb para Visual St...
Mongoose ➜ • Mongoose | Introduccci...
Curso de Nodejs ➜ • Nodejs Curso Desde Cer...
Thunder Client ➜ • Thunder Client - Postm...
Variables de Entorno en Nodejs ➜ • Variables de Entorno e...
Curso de Git ➜ • Git y Github | Curso P...
Rest client VSCode ➜ • Rest Client | Extensio...
Mongodb Atlas ➜ • MongoDB Atlas, NoSQL e...
👨💻 ¿Qué servicios y productos utilizo?
Ledger (Hardware Wallet) ➞ bit.ly/3ijsVNW
SiteGround ➞ bit.ly/31u9ZEk
DigitalOcean ➞ m.do.co/c/8ef261d77de5
Expo ➞ bit.ly/2WpYKtx
Cloudinary ➞ bit.ly/3ohNlJ7
Namecheap ➞ namecheap.pxf.io/ErDe9
#vite #javascript #react 
Наука
Buena esa calamardo ... (Por el titulo)
Chistaco de los buenos 😂
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 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?
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.
Llevas un ritmo espectacular y una claridad acorde. Excelente video!
Grande Fazt como siempre excelente información. Ya es una biblioteca el canal. Saludos!
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 👏🏻👏🏻👏🏻👏🏻
Excelente introducción a vite, todo es tan claro y conciso🤍.
Ahora voy a ver tus vídeos de react.
Muchas gracias.
gracias por enseñarnos esta nueva forma de instalación de react, estaba teniendo problemas con la instalación tradicional
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.
Justo estaba x empezar un projecto con vite, gracias yt x recomendarme este video. 🙂
A heartfelt thanks. You saved me a few hours, maybe even days.
Genial, gracias por compartir fazt!
Muchas gracias me funciono seguir la parte del deployd, muy bien explicado
Exelente informacion, Gracias bro! ya porfin soy Senior Front-End Developer
Excelente como siempre, gracias.
jaja por si no lo vite. Excelente tutorial agradecido con la intro
Gracias por este fantástico 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!
OMG, is amazing, I learned a lot with ur video, now i want to be a frontend developer. Good luck with ur next video
Excelente fazt, y gran titulo jaja, es algo que los gringos no entenderían
Muchisimas gracias, super util!
Jajaja fazt me hiciste el día con el () del título 😅😅
Muy bueno y útil. Saludos
Que buen titulo jajajajaja y que buen video como siempre
fazt no se que hice pero fue despues de pasar por aqui, por fin pude desplegar mi pagina de portafolio. gracias
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
Al fin alguien encontró el momento perfecto para hacer el chiste que todo programador latinoamericano ha querido hacer desde que Vite salió.
gracias, fue muy util, pense que era mas dificil pero es casi lo mismo que un html con css.
tremendo crack, gracias :)
Humor fino señores 💻🙏
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
Jajaja el título xD grande Fazt gracias
Belico.!!!! 10/10
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?
Buenísimo el título❤️❤️❤️💜💜👏👏👏😭😭😭🤣🤣🤣🤣🤣
Por si no lo vite... Entendí esa referencia jajajaj
Gracias Master
Buenisimo
genial! merci!
Se ganó mi like por el titulo jajaja
Genial!
buen video
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?
JAJAJAJAJAJAJAJJAJ Por si no lo Vite JAJAJAJAJAJAJAJAJJA Este parcero es el mejor ome , Fazt la buena parcerito
una pregunta: entonces como uno desarrolla la app no es como se vera en produccion?
hola estoy aprendiendo react y php (laravel 9) usando viteJS como severa el directorio dist ya incluyendo laravel ???
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!
"no lo vite" ajajajaj buenísimo!!!
En el caso de querer hacer una PWA con Vite y React como seria?
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é?
No entendí na'... Pero ya voy a entender, muy pronto 😬
Buen video, directo al grano c:
Como puedo modificar la carpeta de destino de los CSS?
Alguien tendra la solucion del error 404 en github pages cuando refrescas la pagina?
es necesario tener instalado algo de vite primer? no me reconoce los comandos
wow es increiblemente rapido
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?
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?
Muchas gracias, si se desplegó en GitHub pages, pero no se cargan las imágenes
por que liarse con github pages si es mas facil hacerlo en vercel ? u otro similar
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?
Maldi tasea fazt me veo en la obligación de darte un like
a mi no me deja seleccionar el framework a la hora de instalarlo, cual tecla utilizan? puede ser un error de mi consola?
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.
Alguien sabe porque no puedo selecionar conque framework trabajar las flechas no funcionan :(
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?
lo del deploy sh ya no esta en la documentación ya no es necesario?
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
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
compo se instala?
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
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 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
Gracias por otro excelente video! Como pregunta adicional qué sistema operativo estás usando?
Hola Leonardo, este sistema es Xubuntu
Hermano, ¿cómo se llama la extensión de VSC para el tema?
Ayu
Fazt que grandeeee eresss!! Que S.O. usas?
Actualmete estoy usando Xubuntu :)
gracias :,V
"Por si no lo vite" xD
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.
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
Gracias fazt, una pregunta, que terminal usas
Hola Dan, el que se muestra aqui es Alacritty, hice un tutorial hace meses:
ruclips.net/video/9ttxDIolNBo/видео.html
@@FaztCode gracias
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?
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.
A ver cuando RUclips inventa el botón de "Me encanta!"
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!
Que distro de linux utilizas?
Se llama Xubuntu
Cómo se llama el tema que estás usando fast?
Se llama Ayu:
marketplace.visualstudio.com/items?itemName=teabyii.ayu
Sigo esperando electron + lowdb!!! no existe un buen video de eso!
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 :)
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
El título JAJAJAJAJAJAAJAJAJ
si lo vi, vite xD
¿Algún tuto para hacer SSR en vite?
Aún no he creado uno pero voy a desarrollar un ejemplo, es buena idea 👍🏼
"por si no lo vite" 😁😁😁
y sino tenemos NODE JS instalado?
deberias explicar eso desde el principio tambien
Jajja que buen título, y tú ya lo vite?
I see what you did there, vite?
muerte a webpack, larga vida a viteeeeeee
Mato el chiste jajajaja