Despliegue de TODO Machine en GitHub Pages

Henry Alexander Velásquez Rosas

student•

28. Despliegue de TODO Machine en GitHub Pages

Primero instalemos GitHub Pages

npm i --save-dev gh-pages

Entramos al archivo package.json y agregamos:

{
  "browserslist": {
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ],
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ]
  },
  "dependencies": {
    "react": "^18",
    "react-dom": "^18",
    "react-scripts": "^5.0.1",
    "web-vitals": "^2.1.4"
  },
  "eslintConfig": {
    "extends": [
      "react-app"
    ]
  },
  "homepage": ".", 👈👀✨
  "name": "platzi-intro-react-base",
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "predeploy": "npm run build", 👈👀✨
    "deploy": "gh-pages -d build", 👈👀✨
    "eject": "react-scripts eject"
  },
  "version": "0.1.0",
  "devDependencies": {
    "gh-pages": "^6.0.0"
  }
}

Ahora:

npm run build // Crea carpeta build
npm run deploy

Revisa tu repositorio en GitHub: Settings > Pages espera unos minutos y listo.

Chanel Mariannis Paredes Sánchez

student•

Mil gracias

John Davis Pablo Valverde

student•

Angel Emanuel Padilla Cotrino

student•

Hola, espero se encuentren bien, les comparto el link de mi repositorio y el deploy:

Demo:
Repo: https://github.com/Lenoxo/Taskit
Deploy: https://lenoxo.github.io/Taskit/

Cualquier sugerencia, aporte o pregunta la agradecería, para seguir mejorando el proyecto. Por supuesto, ¡Nunca pares de aprender!.

Jose lacruz

student•

Hola muchachos! les comparto mi repositorio y mi deploy!! la version mobile aun le faltan cosas por mejorar repro page

Juan Castro

teacher•

Me gusta mucho el concepto de notas :clap::100:

milton coronado

student•

hola, lo hize en WSL y abrirlo desde el navegador na da por nada, que es lo que tendria que hacer para esto?

Alan Cabrera

student•

A mí me pasó lo mismo con WSL y un broder dejó una solución aquí y me sirvió, espero a ti también. :))

Guillermo Prituluk

student•

Decidí hacer algo distinto por que me encanta hacerme la vida imposible y sufrir 🤣. La app consiste en crear es una lista de Ordenes por ejemplo de una pizzeria. Brinda la posibilidad de crear productos con nombres y precios, los cuales se agregan a cada Orden de compra con un nombre y el valor total de los productos agregados con persistencia de los mismos. Le falta mucho y tiene muchos errores los cuales dejare para solucionarlos con el tiempo ya que esta es una versión DEMO (dijo el mentiroso que no pudo solucionar los problemas y sorry por el Espanglish). https://prituluk.github.io/restaurant-orders/

Andres Badillo

student•

Les comparto mi Repositorio y mi Deploy 😎

Ricardo Alfonso Chavez Vilcapoma

student•

Mi repositorio es el siguiente: https://github.com/rica999/RICA-TASK-LIST-REACT/settings

La vista es: https://rica999.github.io/RICA-TASK-LIST-REACT/

Gracias por el curso profesor.

Zoe Valentina Zapotoczny

student•

Buenaas, después de vaaaarios errores pude hacer el deploy y estoy muy emocionada con el resultado!! Les dejo acá el link del Repo y de My Tasks App

Martin Pessini

student•

Encontre la respuesta. El problema era que tenia mal el origen en github, lo detecte con el siguiente comando git remote -v

Luego ejecute el siguiente comando para corregir el origen a mi repositorio. git remote set-url origin https://github.com/JcaPetri/ReactIntro.git

Cuando volvi a ejecutar npm run deploy, se publico la nueva rama en github

Saludos

Ferney Escobar Laguna

student•

muchisimas gracias

Marcelo Vinicio Chavarría Ugalde

student•

Les recomiendo VERCEL para desplegar sus app... es muy practica, se hacen una cuenta, es gratis, se conectan con GitHub y envían sus repos a deploy muy fácil 😎 https://vercel.com

JOSE FABIAN BONILLA GUZMAN

student•

planflow les comparto el link de deploy en mi caso pensé que no iba a funcionar en local salia un error gigante

menos mal en el pages funciono normal

Cristian Leonardo Castañeda Olarte

student•

Proyecto terminado! 😁

Repositorio - https://github.com/crisleoc/todo-machine
gh-pages - https://crisleoc.github.io/todo-machine/

Sebastián Peña

student•

Muchas Gracias Juan David por este increible curso, eres un excelente profesor, Aqui les dejo mi deploy, espero puedan darse un tiempo de revisarle y darme sus opiniones y feedback que lo recibiré con gusto Deploy y Repo

Rodrigo Melgarejo Alegre

student•

Si les sale un error al momento de ejecutar "npm run predeploy" para generar el build, deben actualizar el caniuse-lite con este comando:

npx browserslist@latest --update-db

Ricardo Alfonso Chavez Vilcapoma

student•

Pude desplegar pero github pages me muestra el siguiente error:

Mi repositorio es el siguiente: https://github.com/rica999/RICA-TASK-LIST-REACT/settings

La vista es: https://rica999.github.io/RICA-TASK-LIST-REACT/

Ricardo Alfonso Chavez Vilcapoma

student•

Logré solucionar el error, los cuales son los siguientes:

LA RUTA DE HOME PAGE ESTABA MAL
LA RUTA DE build/index.html en el valor del atributo src estaba mal

AMBOS ESTABAN CON UN NOMBRE DE REPOSITORIO INCORRECTO....espero les sirva a todos compañeros.

Jose Ever Muñoz Muñoz

student•

hey tengo el mismo error, pero no entiendo como lo solucionaste, puedes dar mas detalles?

Fernando Labastida Vázquez

student•

Mi repo: https://github.com/Labbbbas/curso-react-intro

Mi deploy: https://labbbbas.github.io/curso-react-intro/

<u>Agregué la opción de editar la tarea, además de otras mejoras</u>

Diego Badillo Aguilar

student•

De lujo bro

Daniel Fernando Reyes Vasquez

student•

A mi me salio un error y lo arregle en esta pagina

Diego Fernando Pallares Ramirez

student•

A mi se me queda en blanco el navegador y sale este error, esté es mi repositorio por si acaso

https://github.com/DiegoPallares/ControlTaks/settings/pages

Diego Fernando Pallares Ramirez

student•

Por si le sirve a alguien, creo que este error sale por un error con la URL en package.js, en mi caso es que deje un / al final de mi homepage, si les sigue en blanco actualicen la pagina con control + f5 o borren cache y intentan de nuevo

Martin Pessini

student•

Gracias me paso lo mismo y me salvaste

Sergio Ojeda

student•

Buenas, les dejo mi repo y deploy.

Repo: https://github.com/kekojeda/React-Todo-V18/tree/main Deploy: https://kekojeda.github.io/React-Todo-V18/

Me falta seguir trabajando en el proyecto pero por ahora va así. Los cambios más importantes que hice son:

Titulo principal 1- Si todavía no hay todos creados, muestra de título un msj de bienvenida ¡Bienvenido! Parece que aún no tienes tareas pendientes 2- Si ya tenemos todos creados muestra de título. ¡Vas por buen camino! Has completado N de N tareas 3- Si ya se completaron todos los todos, muestra el titulo Has completado todas tus tareas pendientes. ¡Buen trabajo!

Sección principal debajo del searchbox Además del loading y msj de crear todo cuando no existen, agregue una verificación para que, cuando busquen un todo que no existe, en lugar de mostrar el msj de crear primer todo muestre q no se encontraron todos con ese nombre