Introducción a Vite, mas Deploy en Github Pages (Por si no lo vite)

Подписаться 253 тыс.

Просмотров 76 тыс.

50% 1

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

Наука

Опубликовано:

6 июн 2022

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 158

@JamsMendez 2 года назад

Buena esa calamardo ... (Por el titulo)

@AndresSaaN 2 года назад

Chistaco de los buenos 😂

@christianenriquevillamoral6140 2 года назад

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 👏👏👏

@felipearismendi6730 2 года назад

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

@moisessantanav1514 Год назад

quienes son tus otros dos?

@danilsonbaez Год назад

ya trabajando?

@VictorSalaberry Год назад

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.

@Black_Coding Год назад

Llevas un ritmo espectacular y una claridad acorde. Excelente video!

@christianboy8034 2 года назад

Grande Fazt como siempre excelente información. Ya es una biblioteca el canal. Saludos!

@sol____-_- 4 месяца назад

Excelente introducción a vite, todo es tan claro y conciso🤍. Ahora voy a ver tus vídeos de react. Muchas gracias.

@ariel18012 Год назад

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....!!!!!

@miguelvazquezmx 11 месяцев назад

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 👏🏻👏🏻👏🏻👏🏻

@ladimirobaquero6149 Год назад

gracias por enseñarnos esta nueva forma de instalación de react, estaba teniendo problemas con la instalación tradicional

@agustincristobo9634 Год назад

Justo estaba x empezar un projecto con vite, gracias yt x recomendarme este video. 🙂

@davidjacobs7966 2 года назад

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.

@angramanyu1869 Год назад

A heartfelt thanks. You saved me a few hours, maybe even days.

@migueljurado6783 2 года назад

Genial, gracias por compartir fazt!

@atpayero 10 месяцев назад

Excelente como siempre, gracias.

@125ol Год назад

Muchas gracias me funciono seguir la parte del deployd, muy bien explicado

@user-ku6zw5ve8y 8 месяцев назад

Gracias por este fantástico video!!!

@LumbreraEnMiCamino 2 года назад

Exelente informacion, Gracias bro! ya porfin soy Senior Front-End Developer

@jorgefelipefloresmaque7747 6 месяцев назад

OMG, is amazing, I learned a lot with ur video, now i want to be a frontend developer. Good luck with ur next video

@The_Caesar6186 2 года назад

jaja por si no lo vite. Excelente tutorial agradecido con la intro

@valeriaanabeldeprado3122 Год назад

Muchisimas gracias, super util!

@heartless1238 2 года назад

Excelente fazt, y gran titulo jaja, es algo que los gringos no entenderían

@TechCisne Год назад

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!

@dan1294xx 7 месяцев назад

fazt no se que hice pero fue despues de pasar por aqui, por fin pude desplegar mi pagina de portafolio. gracias

@carlos9484 Год назад

Muy bueno y útil. Saludos

@lindltaylor4093 2 года назад

Jajaja fazt me hiciste el día con el () del título 😅😅

@andremarti7884 2 года назад

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

@lock_9983 Год назад

Belico.!!!! 10/10

@againstretrotopy 2 года назад

Al fin alguien encontró el momento perfecto para hacer el chiste que todo programador latinoamericano ha querido hacer desde que Vite salió.

@amestris324 2 года назад

Que buen titulo jajajajaja y que buen video como siempre

@joroheos90 Год назад

tremendo crack, gracias :)

@ardillatexana1844 8 месяцев назад

gracias, fue muy util, pense que era mas dificil pero es casi lo mismo que un html con css.

@tidyodooy 2 года назад

Humor fino señores 💻🙏

@laurapaolaruiz Год назад

Genial!

@gabrieli.s.s.7151 9 месяцев назад

Por si no lo vite... Entendí esa referencia jajajaj

@CMIARG Год назад

Gracias Master

@Deus-lo-Vuilt 2 года назад

Buenisimo

@adrymateoramon7087 2 года назад

Buenísimo el título❤️❤️❤️💜💜👏👏👏😭😭😭🤣🤣🤣🤣🤣

@matiasdg01 2 года назад

Jajaja el título xD grande Fazt gracias

@BarberoPablo Год назад

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

@SonGoku-pc7jl 2 года назад

genial! merci!

@GiancarloCarccamo Год назад

buen video

@elvis_gastelum 2 года назад

Se ganó mi like por el titulo jajaja

@MrJorjantas Год назад

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?

@emmanuelareiza9699 Год назад

JAJAJAJAJAJAJAJJAJ Por si no lo Vite JAJAJAJAJAJAJAJAJJA Este parcero es el mejor ome , Fazt la buena parcerito

@leeanpr95 2 года назад

No entendí na'... Pero ya voy a entender, muy pronto 😬 Buen video, directo al grano c:

@gow4vr 2 года назад

Maldi tasea fazt me veo en la obligación de darte un like

@juanandresperez1582 2 года назад

"no lo vite" ajajajaj buenísimo!!!

@FrankGP.com. 2 года назад

wow es increiblemente rapido

@joaquinrodriguez7632 Год назад

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!

@sandrosimon 2 года назад

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.

@FaztCode 2 года назад

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 :)

@domandoelmercado8195 Год назад

@@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?

@gerardopacheco9521 Год назад

hola estoy aprendiendo react y php (laravel 9) usando viteJS como severa el directorio dist ya incluyendo laravel ???

@danilsonbaez Год назад

una pregunta: entonces como uno desarrolla la app no es como se vera en produccion?

@kissshot Год назад

En el caso de querer hacer una PWA con Vite y React como seria?

@madao5722 Год назад

Muchas gracias, si se desplegó en GitHub pages, pero no se cargan las imágenes

@omarvictoria1229 Год назад

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é?

@olivercruz9957 10 месяцев назад

es necesario tener instalado algo de vite primer? no me reconoce los comandos

@eduardflores8420 Год назад

por que liarse con github pages si es mas facil hacerlo en vercel ? u otro similar

@enriqueyefersonvizarramatt3216 Год назад

gracias :,V

@noeliacaseres7567 Год назад

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.

@esaulurielmenesestorres4360 11 месяцев назад

Tengo la misma duda, lo pudiste resolver?

@yordiic.e2029 9 месяцев назад

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.

@jimesalas2184 2 месяца назад

a mi no me deja seleccionar el framework a la hora de instalarlo, cual tecla utilizan? puede ser un error de mi consola?

@eduardohernandezsoto785 Год назад

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?

@carminemaggio5464 Год назад

Como puedo modificar la carpeta de destino de los CSS?

@arolalonso5790 2 года назад

Sigo esperando electron + lowdb!!! no existe un buen video de eso!

@carlospaz3277 14 дней назад

lo del deploy sh ya no esta en la documentación ya no es necesario?

@nanchoromero7817 Год назад

A ver cuando RU-vid inventa el botón de "Me encanta!"

@LordVladimirAlex Год назад

Tengo una duda... En caso de hacer cambios a mi código, ¿que se necesita hacer para que se vean reflejados estos cambios?

@esaulurielmenesestorres4360 11 месяцев назад

Tengo la misma duda, lo pudiste resolver?

@tomasreyes7923 Год назад

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?

@paulox7461 2 года назад

si lo vi, vite xD

@danielsuescun3993 2 года назад

Fazt que grandeeee eresss!! Que S.O. usas?

@FaztCode 2 года назад

Actualmete estoy usando Xubuntu :)

@isaacgomez9580 Год назад

Alguien sabe porque no puedo selecionar conque framework trabajar las flechas no funcionan :(

@alvarobyrne 2 года назад

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.

@leonardovemos7490 2 года назад

Jajja que buen título, y tú ya lo vite?

@agustinperez8700 2 года назад

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.

@FaztCode 2 года назад

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 :)

@co_developer260 Год назад

Hay alguna solucion practica para esto?

@agustinperez8700 Год назад

@@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.

@cosmoscrew2 Год назад

@@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

@robotvivo5158 Год назад

"por si no lo vite" 😁😁😁

@omarbarraganmoreno6467 Год назад

Alguien tendra la solucion del error 404 en github pages cuando refrescas la pagina?

@TinoReyna1984 2 года назад

"Por si no lo vite" xD

@josecanul4547 Год назад

Graacias por el video fazt, sabes cómo implementar vite pero ya a producción, en cpanel? jajaja

@FaztCode Год назад

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 :)

@aHardReset Год назад

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

@cosmoscrew2 Год назад

Me parece que hay algo llamado Husky el cual permite hacer lo que buscas

@Uri.Sab. Год назад

compo se instala?

@KaiiKiller 2 года назад

Gracias por otro excelente video! Como pregunta adicional qué sistema operativo estás usando?

@FaztCode 2 года назад

Hola Leonardo, este sistema es Xubuntu

@Holri 2 года назад

Master 🫡

@dh4817 2 года назад

I see what you did there, vite?

@zagdog92 2 года назад

muerte a webpack, larga vida a viteeeeeee

@kevinayala7354 2 года назад

Ajjajaa se paso

@augustocarvalhochavez3192 Год назад

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

@FaztCode Год назад

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

@augustocarvalhochavez3192 Год назад

@@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.

@olivercruz9957 10 месяцев назад

y sino tenemos NODE JS instalado? deberias explicar eso desde el principio tambien

@co_developer260 Год назад

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?

@sergiobeltrangalvis3009 Год назад

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

@dantech9924 Год назад

Gracias fazt, una pregunta, que terminal usas

@FaztCode Год назад

Hola Dan, el que se muestra aqui es Alacritty, hice un tutorial hace meses: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-9ttxDIolNBo.html

@dantech9924 Год назад

@@FaztCode gracias

@jorgelopez1154 2 года назад

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

@FaztCode 2 года назад

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

@andykenway6401 2 года назад

El título JAJAJAJAJAJAAJAJAJ

@fabianlopez2650 Год назад

en el minuto 3:00, en mi terminal no se cambia de opción cuando oprimo las flechas del teclado ¿que debo hacer?

@RealizaEstudioschannel 18 дней назад

Usa la terminal de Visual Studio Code.

@leyserpinto107 Год назад

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

@leyserpinto107 Год назад

También adicionó que en NPM run preview todo funciona correctamente, pero al hacer El Deploy solo la ruta principal funciona