Automatizando el despliegue con GitHub Actions

Clase 28 de 30 • Curso de React 17 con Webpack 5 y Sass

Tan Zuñiga

student•

🚀 Holaaa hice este tutorial para quienes que desean desplegar su app de React en GitHub Pages, pero ya tienen otros proyectos usando GitHub Pages.

Es decir, quieren esta app en user.github.io/repo o mi-dominio.com/repo

Jorge David Martinez Hoil

student•

Muchas gracias por el aporte, de gran ayuda!

:heart:

Sebastian Rodriguez

student•

Este tutorial es Dios gracias a este pude hacer esto posible: https://bashs117.github.io/react-eshop/ repositorio: https://github.com/BashS117/react-eshop

Sergio Maury

student•

Usar GitHub Pages:

npm install —save-dev gh-pages
Agregar reglas al package.json:
1. “homepage”:”https://SergioMaurySterling.github.io/NOMBRE_REPO”
Crear nuevos scripts en package.json
1. "predeploy":"npm run build", :Este ejecutara automáticamente después el “deploy”
2. "deploy":"gh-pages -d build"
npm run deploy (Crea nueva carpeta llamada build que tiene todos nuestros archivos del proyecto)
En GitHub ingresamos a:
1. Settings
2. Pages
3. Podemos ver el link de publicación

David Castro

student•

Que bueno, gracias por compartir ;)

Rodrigo Andrés Moreno Pertúz

student•

listo ya pude.... tutorial para deploy 08/02/2022

npm install gh-pages --save-dev

luego de instalar esta dependencia entonces en package.json:

{
  "name": "reactpractico",
  "version": "1.1.0",
  "description": "react eshop",
  "homepage": "https://rroderickk.github.io/reactPractico", //! lo importante
  "main": ".src/index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "predeploy": "npm run build",
    "deploy": "gh-pages -b master -d dist", //! -b para espeficar otra rama donde subira los archivos estaticos, -d para especificar la carpeta generada por el comando build
    "start": "webpack serve",
    "build": "webpack --mode production"

en webpack:

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
  entry: "./src/index.js",
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "bundle.js",
    publicPath: "./", //! para el despliegue lo importante es el punto
  },
  mode: 'development',
  resolve: {
    extensions: [".js", ".jsx"],
		alias: {
			'@components': path.resolve(__dirname, 'src/components/'),
			'@containers': path.resolve(__dirname, 'src/containers/'),
            '@hooks': path.resolve(__dirname, 'src/hooks/'),
            '@pages': path.resolve(__dirname, 'src/pages/'),
            '@routes': path.resolve(__dirname, 'src/routes/'),
            '@context': path.resolve(__dirname, 'src/context/'),
            '@moneyIn': path.resolve(__dirname, 'public/moneyIn/'),
            '@styles': path.resolve(__dirname, 'src/styles/'), 
            '@icons': path.resolve(__dirname, 'public/icons/'),
            '@img': path.resolve(__dirname, 'public/img/'),
        '@logos': path.resolve(__dirname, 'public/logos/'),
		},
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
        },
      },
      {
        test: /\.(png|jpg|svg|jpeg|web|svg)$/,
        type: 'asset/resource',
        generator: {
          filename: "public/[hash][ext]",
        },
      },
      {
        test: /\.html$/,
        use: [
          {
            loader: "html-loader",
          },
        ],
      },
      {
        test: /\.(css|scss)$/,
        use: [
          "style-loader",
          "css-loader",
          "sass-loader",
        ],
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: "./public/index.html",
      filename: "./index.html",
    }),
    new MiniCssExtractPlugin({
      filename: '[name].css',
    }),
  ],
  devServer: {
    static: {
      directory: path.join(__dirname, 'public'),
    },
    compress: true,
    port: 64340,
    historyApiFallback: true,
  }
}

y en tu router:

	<BrowserRouter basename='/reactPractico'>

luego de estas configuraciones correr el comando:

npm run deploy

y luego en settings de tu repositorio setear la rama que habias configurado con el comando -b deploy

Rodrigo Andrés Moreno Pertúz

student•

y listo... a desplegar como locos los portafolios :D PlatziCards y bueno con nodemachine automatizan este curso jaja NODEMACHINE

Enmanuel Josue Sarmiento Benitez

student•

Gracias compañero, me ayudo este tutorial para hacer el deploy

Leonardo Gabriel Puebla

student•

Logré hacer el deploy. Lo malo es que ya tengo 80 años

ccardenasg cardenas

student•

#porlotanto

Rodrigo Andrés Moreno Pertúz

student•

#obviamente

Luis Angel Olivárez Estrada

student•

#esteRecurso

German Cavani

student•

Les dejo el script que el profesor usa en el minuto 2:32.

name: Build and Deploy
on: [push]
jobs:
  build-and-deploy:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout 🛎️
        uses: actions/checkout@v2.3.1

      - name: Install and Build 🔧 # This example project is built using npm and outputs the result to the 'build' folder. Replace with the commands required to build your project, or remove this step entirely if your site is pre-built.
        run: |
          npm install
          npm run build

      - name: Deploy 🚀
        uses: JamesIves/github-pages-deploy-action@4.1.6
        with:
          branch: gh-pages # The branch the action should deploy to.
          folder: build # The folder the action should deploy.

Elber Liebermen

student•

Muchas gracias!

Sergio Maury

student•

GitHub Actions / Pages

https://github.com/marketplace?type=&verification=&query=deploy+github+page+
Deploy to GitHub Pages script
Crear folder llamado “.github”, adentro otra llamada workflows, y adentro un archivo llamado deploy.yml
Copiar el primer recurso y pegarlo de forma manual, personalizado en el archivo deploy.yml
Cambiar el nombre de la carpeta “build” a “diste” ya que esa acciona todo
Tener el repo actualizado y todo en la rama main o principal
Podemos revisar en el repo, en actions que el workflow corra y finalice exitosamente
Settings -> pages: Cambiar el source a la rama gh-pages y guardar
Configurar dominio:
1. Se pone el dominio en Custom Domain
2. Ingresamos al dashboard de Cloudflare -> DNS
3. https://docs.github.com/en/pages/configuring-a-custom-domain-for-your-github-pages-site/managing-a-custom-domain-for-your-github-pages-site
4. Agregamos en Cloudflare los 4 apuntadores A que nos entrega GitHub
5. Agregamos CNAME, con nombre www, que apunte a nuestro dominio personal

Luis Alejandro Vera Hernandez

student•

Muy bien explicado los items!

Julio Barrios

student•

Hice mi deploy solo en GitHub Pages. Mi pagina de mostraba en blanco, no cargaba el bundle.js. Para solucionar ese problema se debe agregar en webpack a la ruta publicpath un punto:

Tambien debemos agregar al package.json "homepage"

Con el ink de nuestra cuenta, barra, nombre del repositorio.

Despues no me cargaba las rutas.
Investigando encontre este video del por que no lo hacia y como solucinarlo.
Basicamente debemos cambiar el BrowserRouter por HashRouter en la App. Para ir a las paginas agregamos una#/nombreDeLaPagina al final de la url. Ejemplo: https://juliobarriosdev.github.io/react-shop/#/login

jose maria garcia

student•

a mi me funciono, gracias :D

Ricardo Manuel Solis Vizurraga

student•

Si alguien desea ir mas aya con su proyecto ,me refiero a que los botones de my account , cerrar sesion , login etc los lleve a otra ruta como normalmente funciona en el localhost , les recomiendo que hagan deploy con netlify, ya que gh-pges no funciona bien con reactrouter da un error 404 (solo da error cuando esta desplegada en internet). esto solo seria si su pagina aun no tiene backend y solo sea frontend como lo mia . aqui dejo mi pagina desplegada con netlify y funcionando las rutas pagina con netlify

César Palma

student•

Si aun quieren poder desplegarlo en github pages tienen que usar la estrategia de hash routing para react-router de esa manera el enrutado se hará posible en github pages.

Lucas Aristizábal

student•

cómo así hash routing?

Rodrigo Andrés Moreno Pertúz

student•

que aburrido y decepcionante es querer tener una app para tu portafolio y que de ninguna forma ningun tutorial en platzi de deploy funcione o algo estoy haciendo mal..... alguna ayuda? en mi localhost funciona perfecto.... esta es la rama gh-pages

esto es lo que despliega

Alejandro Javier Zeballos Aguilar

student•

Si aún tienes el problema, note que podrías añadir al webpackconfig algunas configuraciones extra de este modo

//webpack.config.js
module.exports = {
  entry: "./src/index.js",
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "nombre-de-mi-repo/bundle.js",
    publicPath: "/nombre-de-mi-repo/",
  },

y verificar estos pasos link espero te sirva.

Kenneth Angulo L

student•

Me paso igual desde las 11am (ya son las 7:pm) no lograba por ningun lado hacer funcionar la publicacion en GHpages. La respuesta de el companero y el articulo que comparte al final fueron la solucion.

Gabriel Hernández Valdez

student•

Hola, ¿Qué herramienta seria mejor para hacer deploy?, tome el curso de Travis CI y veo que es lo mismo que usar GH

Oscar Barajas Tavares

Team Platzi•

Gabriel, existen muchas más herramientas que te permiten desplegar, en lo personal utilizo mucho GitHub Pages, Netlify y también Vercel, porque permiten tener un desarrollo con grandes capacidades y con una capa gratuita.

Gabriel Hernández Valdez

student•

Vale vale, netlify ya lo hemos ocupado en cursos previas también , me toca revisar Vercel , gracias :D

Rigoberto Maldonado

student•

Que tal campeon, buen dia... gIThuB pAges. tiene problemas al momento de visualizar la pagina en la web, asi que use Netlify.

Web shop ecommerce ...

Oscar Frías Zavalza

student•

configuraste el package.json? a mi me aparece pagina no encontrada

Carlos Daniel Revetti Narvaez

student•

Build and Deploy

Acá anexo mi proyecto desplegado y en producción. Mi proyecto fue desplegado en Netlify y dominio obtenido mediante Hostinger.

Visita Yard Sale yardsaleofficial.store

Visita mi repositorio en Github

Sigueme en Github

Kevin Salazar

student•

Hola, ¿No tuviste el error de page not found?. En mi caso sí, y no e podído arreglarlo.

Carlos Daniel Revetti Narvaez

student•

Saludos amigo Kevin,

En el repositorio de este proyecto en github específicamente en el archivo package.json (link) en el scripts del Build esta agregado una solución que indican en Netlify si no mal recuerdo.

!Verifica y prueba a ver si te funciona¡

Jorge Díaz

student•

Buenas noches, realice el deploy pero no me muestra el proyecto:

Kenneth Angulo L

student•

Ayuda, despues de la carga la pagina sale en blanco, tengo este error: . Dice que falla en cargar el bundle

Loading failed for the <script> with source “***ruta***/bundle.js”.

. El proceso de carga de acuerdo a como lo explica el profesor funciona bien, al final salen las flechas verdes para cada proceso del workflow: pages-build-deployment Build and Deploy . En otros comentarios leo el mismo probelma pero cuando aplico las soluciones que alli proponen, todo se rompe y empieza a fallar cuando se ejecutan las acciones del workflow. . Alguna idea, sugerencia ?

Julio Barrios

student•

En Webpack en publicPath coloca ./. Revisa si esta bien. Me paso lo mismo y era que no le habia puesto el punto, entonces no encontraba el bundle.js.

Daniel Alejandro Avila Zambrano

student•

Pude subir a Github pages esta app en el 6 de octubre de 2022 https://github.com/daniel-avilaxd/curso-practico-react02 . Y esto fue lo que cambie para poder subirlo. Ojala alguien me pueda explicar por qué funciona la 3 XD(Lo encontre en un comentario en Github)

instalar > npm i --D @jamesives/github-pages-deploy-action
En el webpack

module.exports = {
  entry: "./src/index.js",
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "curso-practico-react02/bundle.js",
    publicPath: "/curso-practico-react02/",
    clean: true
  },

En App.jsx

<AppContext.Provider value={initialState}>
      <BrowserRouter basename={document.baseURI.substring(document.baseURI.indexOf(window.location.origin) + window.location.origin.length, document.baseURI.lastIndexOf('/'))}>

-Todavía no me funcionan las rutas jeje despues las arreglo. Lo que me importaba era que se viera. -No se rindan compañe@s🖖

Gustavo Alonso Aguilar Acuña

student•

Muchas gracias! su respuesta me ayudó a ver que en el package.json necesitaba colocar dist en vez de built

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack serve --open",
    "build": "webpack --mode production",
    "predeploy": "npm run build",
    "**deploy": "gh-pages -d dist"**
  },

Jesús Ramon

student•

lo logre https://jesusramon2192.github.io/reactshop/

con ayuda de los comentarios y uno que otro video adicional de youtube pero lo logre el profe Oscar es muy bueno pero creo que igual estos ya son temas complejos que merecen la pena tomarse su tiempo para repasarlos hasta comprenderlos mejor

Edmundo Salamanca Villa

student•

Para los que tienen problemas con el deploy (Que veo que ya son personas de hace meses) el tema es por el public path, si hacen exactamente lo que Oscar dice (Comprar el dominio y todo) no creo que tengan problemas, para poder usar solo gh pages necesitan hacer algunas cosas más para el deploy en el archivo de webpack, ya que sino no funcionará correctamente, tal vez aquí puedan entender que hacer

David Gustavo Lopez Figueroa

student•

Profe, al parecer su sitio web no esta disponible 😣 www.https://www.reactshop.co/

Leonardo Gabriel Puebla

student•

xd tiene varios errores en el código

Julian David Alzate Cuervo

student•

Les recomiendo que lean los comentarios de los compañeros, me fueron utiles para desplegaqr mi protecto https://juli6464.github.io/my-react-store/

Automatizando el despliegue con GitHub Actions

Introducción a React

¿Qué es React.js?

Conceptos fundamentales de React

Configurando el entorno de desarrollo para React

Análisis de dependencias en proyectos de React

Instalación de React y React DOM

Configuración de Webpack y Babel

Cambios en tiempo real con Webpack

React con CSS y Sass

Maquetación en React

Transformando HTML y CSS en componentes de React

Estilos en los componentes de React

Páginas, rutas y componentes

React Router DOM

Navegación entre rutas

Header en todas las rutas

¿Qué es Atomic Design? Conoce los beneficios

Solución al reto: componentes y rutas de React Shop

Tipos de componentes en React: stateful vs. stateless

Imágenes y alias en Webpack

Lógica con React Hooks

React.useState

Toggle del menú

useEffect y consumo de APIs

Custom Hooks para la tienda

useRef y formularios

React Context

Completando el carrito de compras

Orden de compra

Calculando el precio total

Eliminando productos del carrito

Deploy

Cómo comprar tu dominio y conexión con Cloudflare

Automatizando el despliegue con GitHub Actions

Próximos pasos

Retos de React.js (bug hunters)

Continúa con el Curso Práctico de Next.js