Desplegar app react con vite usando github pages y github actions

En este vídeo te enseño cómo crear una app de react con vite y desplegarla en github pages automatizando el proceso con github actions

Como siempre, cualquier feedback es bienvenido, así que no olvides dejar tu comentario y suscribirte para más Programación en español.

¡Que tengas buen código!

Contenido del vídeo:
▬▬▬▬▬▬▬▬▬▬
00:00 – Introducción
00:14 – Creando la app con vite
01:05 – Modificando la app
03:05 – Creando el nav
04:45 – Definiendo las rutas
06:23 – Probando la app en local
07:13 – Creando el repositorio en github
07:50 – Agregando scripts al package.json
08:42 – Probando un deploy a github pages
11:21 – Automatizando el deploy
15:07 – Probando la automatización
17:01 – Consideraciones importantes
17:53 – Conclusiones

Referencias útiles:
▬▬▬▬▬▬▬▬▬▬
– Checkout action: https://github.com/actions/checkout
– Deploy action: https://github.com/JamesIves/github-pages-deploy-action
– Github actions docs: https://docs.github.com/en/actions

Repositorio:
▬▬▬▬▬▬▬▬▬▬
https://github.com/pedrovelasquez9/react-pipeline

Redes de Programación en Español:
▬▬▬▬▬▬▬▬▬▬
– Ve todas mis redes aquí: https://my.bio/prog-es

——————-TRANSCRIPCIÓN——————

Bienvenidos a un nuevo vídeo de promoción español en este vídeo te voy a mostrar cómo crear una aplicación con react riad reuters y es desplegar la guía con pages automatizando todo el proceso con informaciòn es así que puedes sin más preámbulo vamos a proyecto pero primero queremos será crear nuestra aplicación en este caso.

Voy a usar bien para hacer vamos a llamarla en este caso un proyecto de ley y como template vamos a utilizar react count script no es completo el proceso pues entramos un proyecto e instalamos todas las dependencias es que nada vamos a instalar dos cosas primero un paquete de 10 papeles para poder desplegar nuestra.

Aplicación a 10 o pages y en la segunda cosa que vamos a instalar será enric grau tartón así que vamos allá instalamos el paquete gh pages en este caso como dependencias de desarrollo y luego real con auto ron ya teniendo esto pues vamos a abrir nuestro proyecto en visor estudio code para estar.

Y vamos a hacer algunos cambios en el proyecto base que crea bit para empezar vamos aquí a nuestro app punto ts aquí esto lo caracteriza pues es una página inicial con un contador para poder usar las rutas lo primero que voy a hacer es crear dos archivos ts x más para simular pues dos rutas adicionales en este caso la ruta principal que será pues por.

Ejemplo un punto t s x y pues una bout punto 3 x si equipo debe tener simplemente todos vemos en el app vale aquí vamos a cambiar un poco los nombres exportados con y luego cambiamos un poco de información en el auto pues voy a quitar de aquí los lobos que muestran.

Y vamos a dejar solamente el título tampoco te queremos pues en este no sé que esto se va y este que creo que también lo podemos quitarle bien esta sería nuestra página de about y tendríamos aquí la página de home está si la vamos a mantener tal cual aquí pues he hecho en falta un par de tipos.

Así que vamos a tapar aquí el state esto sería una mujer y esto sería una función sí y aquí cada uno recibe su nombre ya está bien ahora si vamos a las rutas para las rutas vamos a reestructurar el aporte componente en este caso pues no utiliza las rutas como lo haría un navegador así que en vez de utilizar por ejemplo la.

Browser road vamos a utilizar jarraud de rea crowd orbán pero antes de eso vamos a estructurar el nada para ello pues voy a deshacerme de esto porque vamos a crear aquí un par de etiquetas main y aquí vamos a crear un contenedor aparte y aquí pues vamos a definir un par de links.

Este link lo vamos a importar por cierto esto se van de actual terna y esto para redireccionar a la página principal y vamos a tener por aquí otro link que reducciones hacia la página de about este espectáculo son básicamente y esto sería nuestro app component necesitaremos acs así que lo podemos.

Sacar de aquí y como ya no lo vamos a usar aquí esto se podría llamar como puntos ese sí que vamos a reutilizar tanto aquí para resumir tanto aquí como en la página de about lo que nos falta aquí en nuestro app csx sería el outlet que es justamente lo menos vamos a realizar todas las rutas.

En este caso vamos a poner por qué y ya estaría esto lo importamos desde el récord perdón y listo ahora sí vamos a nuestro mail de ese x xi y aquí pues vamos a definir todo lo que serán las rutas como les había comentado pues vamos a utilizar aquí el hash router aquí podemos deshacernos de la llamada a.

La pt componente esto vamos a importarlo del real quarterback vamos a importar aquí rams y rand orden nuestra ruta principal tendrá el par inicial y llamará en este caso [Música] pero bolt dentro de esta ruta.

Pues vamos a regresar lo demás porque porque el outlet está justamente que la vez que componen así que aquí pues vamos a tener los rayos en este caso sería nuestro index y el element o no será aquí el home 6 que podemos importar la patata pakistán y lo mismo vamos a hacer para el sábado.

Este se tendrá un par de elementos y con esto tendremos nuestras rutas configuradas lo primero que vamos a hacer antes de comenzar a desplegar de automatizados despliegues obviamente probar nuestra aplicación vamos a probar que esto funciona si así que vamos a abrir la terminal grandes para levantar la aplicación con.

Beat veremos por aquí ella estaría el resultado de nuestra aplicación tenemos aquí el nac si vamos hacia bout tenemos aquí en la paot page este con page pues engloba todo así que pues esto lo podemos cambiar un poquito aquí aquí esto sería.

My por ejemplo y luego crearía más o menos así este sería con este sería el about pues mantenemos la con seguridad inicial de la aplicación así que ya funciona lo próximo que vamos a hacer es pues obviamente desplegar esto para asegurarnos de que funcionen dijo pérez.

Y para eso vamos a crear un repositorio de níjar así que vamos a ir y creamos por aquí en un repositorio esto lo hemos llamado por ejemplo bike line así que pues vamos a mantenerlo porque le damos al repositorio vamos a copiar la url y aquí a enseñarlo y aquí hemos asociado consistorio local.

Control remoto que hemos creado así que lo próximo que vamos a hacer es configurar un par de scripts vamos a los packers puntos jason y si nos fijamos aquí tenemos el script de implicaciones de el script de construcción que es el build y pues un simple previo vamos a hacer por aquí un script de the play.

Y este script de diplo iba a usar el paquete de hp y es que hemos instalado anteriormente aquí vamos a ejecutar un gh pages desde replay y este caso tenemos que indicar que carpeta vamos a desplegar bit 7 en una carpeta de tema artista así que pues aquí lo pondremos como visto y además voy a definir aquí un breve play.

Vale que será un comando que se ejecutará siempre antes del tipo y para ello vamos a ejecutar aquí una rom bien para que siempre siempre antes de desplegar pues ejecute el build y cree pues un nuevo paquete con vamos a probar esto ejecutando un primer round hoy creo por aquí el directorio visto.

Una vez a sentir y pues aquí ya nos ha indicado que se ha publicado si vamos aquí vamos a actions y aquí aparece dar pues el proceso de des previa y héctor pages si entramos aquí todavía no tenemos esto totalmente automatizado sin embargo podemos ver el avance directamente por el panel de actions ahí está siendo el view.

Y esperamos para ver si todos diploides albín ok ya ha desplegado y vamos aquí a la url de despliegue aquí pues también tenemos algo que nos da un pequeño error tengan en cuenta ninguno de los archivos porque porque está apuntando a la url raíz es decir está tratando de cargar todo desde esta url sin agregar.

Pues el nombre del repositorio en este caso esto se arregla muy muy fácil vamos por aquí a build y aquí vamos a indicar el beige para de lo que será el despliegue nuestro proyecto en este caso utilizamos el parámetro page y aquí indicaremos el nombre que teme ambos por egipto vale con ambos slash inclusive al notar que así si esto es el equivalente.

A venir aquí el bid config sí y agregar aquí veis con el mismo valor vale sería lo mismo sí pero para hacerlo de forma dinámica justamente cuando damos el pib pues simplemente lo ponemos comprando y estado ok si volvemos a ejecutar todo en este caso el diploma.

Aquí se ejecuta el build con el beige y vamos a ver qué tal va por aquí vamos actions y esperamos que termine el proceso de nuevo ya terminado vamos de nuevo por aquí vamos a ver qué nos dice así que pues recargo eliminando pues en este caso de leche aquí lo único que lo carga es el bit lobo pero que sé por qué.

Y aquí podemos ver que la aplicación funciona bien el routing funciona bien así que pues ya estamos casi listos para automatizar nuestro despliegue lo único que falta es este luego por aquí que no lo carga en este caso como lo estamos llamando del componente si no me equivoco vamos a bajar por allí y aquí pues justamente está buscando un bit.

Punto svg para arreglarlo pues simplemente podemos aquí un punto para que le guste a partir de la directora actual volvemos a hacer un display de debería de funcionar vale pero antes de hacer el tipo y vamos a automatizar lo ha podido canalizar todo el proceso de despliegue por ejemplo con un cuc supongamos que.

Vamos automatizar todo al hacer un putsch sobre la rama master si para hacer esto pues necesitamos lo primero crear un archivo para definir todo el workflow de automatización de la pipeline para ello pues vamos a abrir con visión estudio por su archivo que vamos a crear en un directorio punto vieja a su vez como sacaremos un.

Directorio workflow y aquí vamos a crear un archivo llamado virus y ante floyd punto gmail.com sí y vamos a ver cómo vamos a definir todo el workflow lo primero que vamos a hacer es darle un nombre si vamos a llamarlo.

Por ejemplo bueno y el partido hoy vamos a definir la acción que va a disparar todo el proceso en este caso esto es con una propiedad on aquí vamos a definir pues en qué acción cuando se va a disparar todo el país line este caso se da en un bus al repositorio.

Específicamente en la rama más luego de esto tenemos que indicar pues todos los pasos que va a ejecutar nuestra planta en este caso con la propiedad shops y vamos a tener un john review es indicar que esto se ejecuta en por ejemplo una imagen de ubuntu lakers y esto va a indicar pues la máquina donde se está ejecutando el.

Ronald de nuestra pipeline estos son básicamente máquinas virtuales estancos tiendas dentro del hijo sí que nos permiten aparte que tiene el software preinstalado nos permiten ejecutar todas las acciones que necesitemos para completar nuestra ejecución se ha revisado en shutter a partir de aquí ya sabemos dónde se va a ejecutar o bajo.

Qué imagen se va a ejecutar esquema que nos ha valido para esto vamos a definir los pasos los este es el primer step vamos a nombrarlo cal y aquí podemos utilizar steps predefinidos que están disponibles en distintos repositorios públicos y en este caso voy a utilizar un step un step perdón y el staff se.

Llama check out y vamos a utilizar la última versión que es v 3 los enlaces a estas estos actions que están disponibles en infectar los dejo una descripción del pib esto lo que tiene básicamente son una serie de casos predefinidos para ahorrarnos un poco de trabajo luego que demos otro step vamos a llamarlo install.

A cambio que lo que vamos a hacer aquí es ejecutar comandos en este caso en fm y nm bien esto va a ocupar básicamente lo que tenemos en el comando pin definieron el parque es pintoresco poco más o traemos otro que será el plane.

Y que vamos a usar otro pariente predefinido u otro action predefinido que está en este repositorio se llama hawtai desde wine action de en este caso la opción 4.1.1 y esto recibe algunos parámetros como por ejemplo el brunch bien que brunch estamos desplegando en este caso vamos a utilizar el mismo brunch que tenemos.

Ahora mismo radio for payless que sería el brunch h payless y el folk del escritorio que estamos desplegando pues es distinto esto sería todo en principio de lo que tenemos que configurar para utilizar kit actions esto es un flujo bastante bastante sencillo muy directo vale pues las referencias a más documentación.

Sobre el robo actions y sobre estas dos actions que tenemos de ponerse en gijón las dejo en los enlaces en el sección del vídeo ahora vamos a probar este plomo y para ello no tenemos que hacer demasiado lo único que tenemos que hacer es un bus a master como lo hemos definido aquí así que lo que voy a hacer es hacer un guitar de todo lo que.

Tenemos aquí pero inicial comment bien puede ser un máster si vamos ahora a entrar en actions que haber ejecutado vamos a ver porque no lo ejecutado total tenemos de aumento todo lo que desee porque aquí no debería ser el directorio workflow sino workflows en plural vale.

Vamos a hacer pues cualquier otro cambio por aquí vamos a ver qué pasa aquí para que comienza a validar nuestro llamar aquí creo que me falta alguna y esto tiene que estar al mismo nivel que ramsan ya está y esto debería estar corregido ya listo vamos al auto cambio pues para notar que todo se despliega bien y que todo se despega correctamente.

Por ejemplo podremos ir al lavado y que podemos poner otro párrafo indicando pues esto así podemos volver a ser un estatus por aquí y añadimos hip hop y short about todo lo que modificamos esto sería un box hacemos un puesto a master y ahora si.

Vamos de nuevo el hip hop vamos a actions y le daremos por aquí que ha disparado nuestra acción recuerda que pues se dispara cada vez que hacemos un pulso a master y ya estaría nuestro y vamos a ver si se ha aplicado nuestros cambios correctamente aquí pues de verdad si vamos a los bout a esto del primer caché vamos a ver.

Ahorramos y aquí está nuestro logo de vida renderiza y si vamos al auto aquí tenemos el texto promoción en español una cosa súper importante a considerar cuando utilices info max jones vale va a ser el token personal que tenga síndico recuerda que desde ese tiempo pues dice necesita o requiere de un token personal para iniciar sesión en vez de pues las.

Típicas credenciales el token personal lo puedes crear y configurar en settings de tu perfil si aquí en de velo percings impersonal access tokens asegúrate de que este personal access token tenga la opción habilitada workflow si no la tienen pues te dará un error cuando hagas el push si a por cuestiones de permisos no podrá.

Iniciar todo lo que es el workflow de la pipeline como es el router de riad funciona todo está desplegado en 10 papeles y lo hemos hecho con pasión así que aquí a partir de aquí cada vez que yo haga un pulse asia master pues se va a desplegar de forma automática todos los cambios que yo haya hecho si te ha sido útil este vídeo pues no olvides.

Dejar tu electo comentario o suscribirte al canal obviamente si quieres algún otro ejemplo por el estilo puedes dejarlo en los comentarios y me anoto grabarlo recuerda que también te dejo en medición del vídeo el enlace al repositorio que acabamos de usar por si quieres utilizar pues el workflow como plantilla o la aplicación de realidad.

Convive como plantilla así que pues todo estará allí y además agregarle un ritmo con los pasos que hemos seguido para desplegar todo y configurar todo en el mismo repositorio recuerda también unirte al resto de las redes de formación español las tienes en la descripción del vídeo y será hasta un próximo vídeo muchísimas gracias y que.

Devino el cuerpo digo

1 comentario en «Desplegar app react con vite usando github pages y github actions»

Deja un comentario