No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Curso de Introducci贸n a React.js

Curso de Introducci贸n a React.js

Juan David Castro Gallego

Juan David Castro Gallego

Deploy con GitHub Pages

22/23
Recursos

Existen varias maneras para hacer deploy de nuestras aplicaciones, una de las m谩s populares es GitHub Pages.

GitHub Pages es un servicio de GitHub que nos permite alojar nuestros proyectos y mostrarlos en vivo en una p谩gina web est谩tica sin necesidad de pagar por hosting o tener conocimientos en servidores, aunque tiene algunas limitantes.

Para inicializar nuestro proyecto con Create React App, utilizamos el comando npm start, lo que hace este comando, es que iniciar un servidor de node.js para poder compilar nuestro c贸digo de React a JavaScript, tambi茅n para poder estar al pendiente por cambios y refrescar autom谩ticamente nuestro proyecto al hacer alg煤n cambio, entre muchas otras cosas.

La principal desventaja de GitHub Pages, es que no podemos correr un servidor de node.js, solamente soporta archivos est谩ticos:

  • HTML
  • CSS
  • JavaScript
  • Im谩genes

Para hacer el deploy de nuestra aplicaci贸n, necesitaremos hacer lo siguiente:

  1. Instalar la dependencia gh-pages con npm.
  2. Modificar un poco el package.json
  3. Y utilizaremos otros comandos de Create React App para construir una versi贸n de producci贸n de nuestro proyecto.

Instalar gh-pages

Para instalar esta dependencia en nuestro proyecto, necesitamos ejecutar este comando en la terminal, dentro de la carpeta root en la que est谩 nuestro proyecto: npm install --save-dev gh-pages o npm i -D gh-pages que es lo mismo.

鈿狅笍 Si a煤n no tienes tu proyecto en un repositorio de GitHub, es el momento perfecto para subirlo, con todos tus cambios.

Modificar nuestro package.json

Primero necesitamos agregar la regla como la siguiente:

"homepage":"https://tu-usuario-de-github.github.io/nombre-del-repositorio"

Para que funcione necesitas poner los datos necesarios en la URL.
Y ahora agregamos unos scrips de gh-pages para el deploy, estos scripts preparar谩n nuestra aplicaci贸n para el deploy.
Dentro de npm podemos utilizar los prefijos: pre y post para decir que ejecute cualquier cosa que queramos antes o despu茅s de ejecutar el script que necesitamos.

Nuestro package.json quedar铆a como el siguiente:

{
  "homepage":"https://brandonargel.github.io/todo-app"
  "name": "curso-intro-react",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.11.4",
    "@testing-library/react": "^11.1.0",
    "@testing-library/user-event": "^12.1.10",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-scripts": "4.0.3",
    "web-vitals": "^1.0.1"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "predeploy": "npm run build",
    "deploy": "gh-pages -d build"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "gh-pages": "^3.2.3"
  },
}

Deploy de nuestra aplicaci贸n

Ahora solo necesitamos ejecutar nuestros scripts: npm run deploy.

隆Al hacer esto, si no nos aparece ning煤n error, quiere decir nuestra p谩gina ya est谩 en vivo!

Si te aparece alg煤n error, no dudes en dejar tu pregunta para que podamos ayudarte, tambi茅n puedes revisar los pasos anteriores o revisar esta Gu铆a para subir tus proyectos de React con gh-pages{target="_blank"}.

驴C贸mo puedo ver mi aplicaci贸n en la web?

Para poder ver tu aplicaci贸n ya en la web puedes entrar a la URL que escribiste en el homepage de tu package.json,

Otra forma es entrar al repositorio de tu proyecto en GitHub -> Ajustes, y en el men煤 de la izquierda, en Code and automation te aparecer谩 una secci贸n de Pages, ah铆 estar谩 un link para ver tu proyecto.

Encontrar link de deploy de aplicaci贸n con gh-pages

Contribuci贸n creada por: Brandon Argel.

Aportes 175

Preguntas 54

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

o inicia sesi贸n.

Hola 馃榾

Comparto el resultado
Repo: GitHub
page: Todo-App

resultado:

Hola! 馃槃
Yo decid铆 a帽adir dos funcionalidades m谩s aparte de las que se trabajaron en el curso:

  • editar todos
  • eliminar todos los todos

Este es mi proyecto, est谩 deployado en Vercel.

Hola [email protected]
Por ac谩 vengo a dejarles una app sencilla de ingresos y egresos para controlar un poquito nuestras finanzas.
Trabajar con esta librer铆a es simplemente maravilloso!

Repo
Pagina
Resultado:
![](

Este es el m铆o compa帽eros, logre hacer un challenge de frontendmentor todo con React

GitHub: https://github.com/EliabLM/todo-app
Live: https://eliablm.github.io/todo-app/

A煤n me falta el light mode y agregar la funcionalidad de drag and drop

Hola anexo mi repo y mi deploy, hay una peque帽a sorpresa para los amantes de dragonball鈥

Repo: GitHub
page: DragonBall-TaskList

npm i gh-pages -D
 "scripts": { 
//...
"predeploy":"npm run build",
"deploy":"gh-pages -d build"
}

Hola, aqu铆 les comparto mi proyecto.

El deploy esta hecho con Netlify, solo es necesario enlazar netlify con github y realizar el despliegue en New site from github y listo!

Aqu铆 mi repositorio por si desean ver los peque帽os cambios.

Hola muchachones!

Aqui les dejo mi reto completado, el dise帽o y assets los encontre en la pagina frontendMentor, esta pagina te provee de los assets y colores necesarios para que solo te concentres en codificar 馃檲, tambi茅n le cambie un poco la funcionalidad:

1) le agregue la posibilidad cambio de tema entre claro y oscuro

2) La manera de crear los todos en un poco distinta, lo haces directamente desde el input鈥 y la forma de eliminarlos es con un modal de confirmaci贸n(para que no se eliminaran directamente por si hay un miss click o algo asi)

3 La manera de filtrar todos, funciona por estados en los todos(todos, completados , y sin completar), pero me quede sin buscador =(

4 Agrege la posibilidad de reordenar los todos con un drag and drop(d茅jalos presionados para poder moverlos libremente por la lista)


Aqui les dejo el Site y el Repo:

Repo RepoApp

Live-Site TodoApp

Listo el Deploy!
https://gustavolando.github.io/introduccionareactjs/
Repo:
https://github.com/Gustavolando/introduccionareactjs


Le puse un scroll al 鈥淭odoList鈥 para que no se pierda el 鈥淐reateTodoButton鈥 cuando hay muchos todos, y tambi茅n le puse un contador de caracteres al Todo para que no sean muy largos.
Tambi茅n us茅 el hook useRef para poner el foco en los input de texto del search y del textarea para el nuevo TODO.
Un mar de conocimiento adquirido con este curso!
Felicitaciones al developer chef!

Hola, les comparto mi proyecto, le agregue la opci贸n de editar y quise probar una librer铆a que encontr茅 para facilitar el UI: https://v2.grommet.io/ (f谩cil de usar, recomendada)
Live
GitHub

Me siento feliz por el resultado 馃コ
GitHub
happy-dijkstra-602915.netlify.app/

Aqu铆 dejo c贸mo es que qued贸 mi ToDo App:
P谩gina
Github

Les comparto mi proyecto del curso:
Repositorio: GitHub
Page: ToDo-Machine
Imagen de referencia:

Hello 馃槈
Comparto como quedo mi aplicaci贸n
Repo: GIthub
Page: App ToDo React
El resultado:

Le agregue la funci贸n Editar y responsive para movil. Me encant贸 el curso . Pronto subo el repo ;D

Les comparto mi proyecto 馃榿
Github
Deploy

Loading:

Ejemplo:

Me gustar铆a aportar que yo en lugar de Create React App utilic茅 Vite, y a la hora de hacer el deploy no me sal铆a nada en Github Pages y era porque ten铆a que agregar en el archivo de vite.config.js

base: '/nombre-de-tu-repo/'

Y ya con eso todo bien 馃憤

Un datazo curioso: En homepage si colocas

"homepage": "."

El deploy funcionar谩 igual 馃 . Sin no especifican el homepage, se har谩 un desastre xd Es importante indicarlo
.
Hace meses trat茅 de hacerlo con el npm de github (como mostraron en la clase), pero me perd铆 y nunca me mostraba el resultado que queria.
.
Solo hacia manualmente npm run build y lo desplegaba en Netlify

Repo: Github
Live: GithubPages
.

.

.

.

Comparto mi resultado, a煤n no lo he acabado, se me ocurrieron m谩s cosas que le podr铆a agregar, pero por ahora as铆 qued贸.
https://pablojl.github.io/TODO-App/
https://github.com/PabloJL/TODO-App

Que increible curso!
Aqu铆 dejo la versi贸n de mi app.
Repo: https://github.com/ivantdev/todo-app
Deploy: https://ivantdev.github.io/todo-app/

Les comparto como quedo la app
ToDo React App

Hola, les comparto mi resultado final:
P. D. Al final termin茅 trabajando con TypeScript, se me hizo m谩s controlable el c贸digo jeje. Excelente curso. 馃槃
Link a mi app

Despu茅s de sufrir con el Github pages!
https://juansebastiancondefarias.github.io/primerappreact/

Aqui esta mi version de la app, espero que les guste
https://juanpaferro.github.io/todo-machine/

Comparto mi resultado:
TodoApp
GitHub

馃殌 Les comparto mi proyecto!
Repo: GitHUb
Deploy: Todo

Comparto mi GitHub Page! Sin duda, lo mejorar茅 un poco m谩s e ir谩 para mi portafolio!
https://gustavoaguilar82.github.io/QuestsControl/

Tiene una animaci贸n de un cafecito caliente al completar todas las tareas!

Y una del perrito, que se duerme o despierta seg煤n se pase el mouse por el bot贸n agregar.
Adem谩s, si no se est谩 haciendo una busqueda, la barra no aparece~

Link Api: TODOs Api

Enlace Repo: Repo

Responsive Mobile

Hola dejo por aqu铆 mi app
Task Manager

Aqu铆 la m铆a en la Repo encuentran el link 馃槉

Repo: GitHub


隆Hola, Comunidad! 馃殌
Les comparto mi trabajo 鉁岋笍

隆Espero les guste mucho y espero sus comentarios!

Nunca Pares de Aprender 馃挌

Me encant贸 el Curso 馃槈

Proyecto en GitHub Pages.
https://deyvisnvg.github.io/curso-intro-react/

jejeje estrellitas solo para los creativos

Este es mi proyecto del curso 馃槃

Y el c贸digo

Amigos, mi proyecto es este: https://marcoalducinr5.github.io/curso-intro-react/, al contrario de Juan David, yo lo hice al reves, lo hice para Desktop (o escritorio) y no para moviles, por eso, si lo abren en su celular, se va a ver pesimo, pero no se preocupen, ya estare trabajando en ello proximamente,

Por si a alguien m谩s le sale que GH lee su archivo 鈥淩EADME鈥 es porque:

  1. En la secci贸n Pages de GH, no est谩 usando la rama donde est谩 la carpeta 鈥渂uild鈥 que cre贸 el comando 鈥渘pm run build鈥. Solo hay que cambiar a la rama que s铆 tenga esta carpeta.

  2. Si solo tienes la rama 鈥渕aster鈥 y no est谩 la carpeta 鈥渂uild鈥 como me pas贸 a m铆:
    a. Entra al archivo .gitignore y borra 鈥渂uild鈥. Vuelve a ejecutar 鈥渘pm run deploy鈥 y ya deber铆a funcionar.
    b. Borra el package de gh-pages y vuelve a descargarlo pero como package normal, no como dev (creo que eso hace que lo incluya en el .gitignore, no tengo pruebas pero tampoco dudas) e igual b贸rralo de .gitignore si es que sigue ah铆.

No s茅 si solo me pas贸 a m铆 o si hay otra soluci贸n pero esa es la que me sirvi贸.

Page

Tener en cuenta predeploy para futuras referencias

Hola! Comparto el resultado hasta ahora. Seguramente le agregue m谩s cositas y vaya mejorando.

Hola les comparto mi resultado. https://lizmadelyne.github.io/mi-proyecto-react/

Estoy Muy feliz, sjlfjslkfjsl鈥 GitHub Repo / Url-App

Ya tengo otras mil funcionalidades en mente para mejorar, est茅n atentos a ellas鈥

馃檶Comparto mi proyecto
馃搶Link Repo
馃搶Link Deploy

馃憞

Holaaa muy emocionado por lo que he aprendido en este curso aqui les dejo mi resultado鈥 agradezco el feedback.

ToDo_Machine

Aqu铆 mi App, me desvele un poco para terminar el dise帽o, pero se logr贸, aun se pueden pulir varios detalles, pero hasta este punto me agrada lo que logre en el curso, aprend铆 much铆simo 馃槃

Page: https://pabloquiroz-pq.github.io/ToDoList/
Repo: https://github.com/PabloQuiroz-PQ/ToDoList

Espero terminar m谩s cursos y mejorar mis habilidades con React JS.

隆Gracias Juan!

Hola ! Es la primera vez que comparto mis resultados, me gustar铆a agregar en el futuro filtros de 鈥淵a completado鈥, 鈥淪in completar鈥 y mejorar mis estilos.

Espero que les guste !
Link al website: https://jmrodriguez-work.github.io/to-do-app/
Link al repo: https://github.com/JMRodriguez-work/to-do-app

A mi me sal铆a este error:

Cloning into 'P:\Platzi\React\intro-a-react\node_modules\.cache\gh-pages\g[email protected]!leeansilva!React-curso-introductorio.git'...
[email protected]: Permission denied (publickey).
fatal: Could not read from remote repository.

Please make sure you have the correct access rights
and the repository exists.

PS P:\Platzi\React\intro-a-react>

En mi caso era porque tenia una passphrase configurada en github(cada vez que hacia un push me pedia ingresar esta pass por ejemplo). Luego de probar varias soluciones me di cuenta que ese era el problema, entonces mi soluci贸n fue removerla con el siguiente comando en gitBash:

ssh-keygen -p

apretas Enter, luego ingresas tu passphrase(porque te pide tu pass vieja), y luego te pide una nueva. Entonces ahi no escribes nada, presionas Enter y luego confirmas con Enter. Listo. Haces el run deploy y te deber铆a funcionar.

Mi humilde aporte: ToDoMachine

En el futuro le mejorar茅 el responsive design, y algunos detalles. Pero no me lo tom茅 tan en serio al dise帽o, ya que mi objetivo principal era aprender a usar React.

Aqui dejo un link de un video q muestra la maneras facil de hacer el deploy https://www.youtube.com/watch?v=Q9n2mLqXFpU

Hola!
Aqu铆 mi aporte:
repositorio en Github
Y la desplegue en Netlify:
Felicidades por el excelente curso, aprend铆 mucho!

Hola vengo a dejar mi proyecto
Repo: Github
Github page: Todo-app

Bueno chicos un placer compartir este curso ac谩 est谩 mi proyecto:::
REPOSITORIO鈥

https://github.com/KevinAndresG/to_do_project

PROYECTO鈥
https://kevinandresg.github.io/to_do_project/

gracias a todos y gracias al profe Juan David

https://yens-rosero.github.io/ReactProyectBasic-task/

No es mucho , pero es trabajo honesto 馃槮

Solucion Para el error:

git@github.com: Permission denied (publickey).
fatal: Could not read from remote repository.

Borrar su clave SSH y crear una nueva pero sin contrase帽a, es lo 煤nico que me funcion贸 a mi, espero que les ayude tambi茅n

Mi repo de Github.
Mi pagina. 馃榿
pd. Es la primera vez que hago una pagina completa con JavaScript

Build a Github Pages

Aqui esta el mio, el css es un poco inspirado porque no soy muy bueno en css pero agregue mas funciones QoL (Quality of Life)
Pagina
Repositorio

Deploy con GitHub Pages

Tuve que tomar el curso dos veces, pero ya funciona y entend铆 mejor 馃槀

https://ivisoftware.github.io/ivi_task/

A煤n debo pulir estilos pero ya ir茅 actualizando conforme avance en otros cursos.

Bueno despues de haber tenido algunos problemas con el deploy realice el proyecto de nuevo con Vite y lo desplegue en netlify, muchooooo m谩s facil, aqu铆 les comparto el link de mi proyecto, opinen pues !!
https://sparkly-cactus-52e198.netlify.app/

Hola, comparto mi To do List App.
Github: https://github.com/jhcueva/TodoList

Desktop View:

Mobile View:

Asi va el mio
repo de github por si gustan verlo

Make it App

Su feedback es bienvenido 馃槃

Hola, comparto mi resultado:
https://pere94.github.io/todo-machine/

Version desktop:

Version movile:

dejo mi proyecto, no hice un TODOs pero si algo medio parecido.

Repo

p谩gina

Espero les guste 馃槃
link

Link del proyecto click

Skeleton loader

En el min 7 hay un error, dice que vamos a agregar la carpeta build para el commit. Pero no es eso lo que se agrega, se agregan los cambios en el package.json. La carpeta build no se va a agregar porque esta en el .gitignore

Mi Deploy del todo
Dejo mi repositorio aqu铆 tambi茅n: repositorio

Aprend铆 bastante, algunas cosas no las hice debido a que por mi dise帽o no era necesario.

Le agregue para que pudiera ingresar la tarea con el Enter y para que se pueda Cancelar haciendo click afuera del form.
Repo

Les comparto un peque帽o proyecto que hice con React Js y Firebase para practicar lo aprendido.

URL DEMO
URL REPO

No puedo hacer el deploy, ayudaaa!
El build lo corre.

[email protected] predeploy
npm run build

[email protected] build
react-scripts build

Creating an optimized production build鈥
Compiled with warnings.

src\TodoContext\useLocalStorage.js
Line 1:8: 鈥楻eact鈥 is defined but never used no-unused-vars Line 27:6: React Hook useEffect has missing dependencies: 鈥榠nitialValue鈥 and 鈥榠temName鈥. Either include them or remove the dependency array react-hooks/exhaustive-deps

Search for the keywords to learn more about each warning.
To ignore, add // eslint-disable-next-line to the line before.

File sizes after gzip:

44.41 kB build\static\js\main.c24671b5.js
612 B build\static\css\main.78a9bdd6.css

The project was built assuming it is hosted at /LaureanoVera/todo-machine/.
You can control this with the homepage field in your package.json.

The build folder is ready to be deployed.

Find out more about deployment here:

https://cra.link/deployment

[email protected] deploy
gh-pages -d build

Failed to get remote.origin.url (task must either be run in a git repository with a configured origin remote or must be configured with the 鈥渞epo鈥 option).

Mi resultado hasta el momento,
Tengo pensando a帽adir categorias, que se pueda filtrar por categorias, por tareas completadas, etc.

Aqu铆 mi resultado usando Bootswatch
Repo: Github
Deploy: Live Preview

Este es mi trabajo terminado:

TodoApp

Yeeeep!! listo el deploy,
puede ver mi app aqu铆: TODO鈥檚 APP
y aqu铆 el repo por si quieren revisar el c贸digo: GH REPO
quiz谩s lo mas interesante es que yo utilice una organizaci贸n de archivos distinta, agrupe todos los componentes js en una cerpeta, los css de los componentes en otra y la de los providers

Aqui esta mi resultado: Live Demo

Mi primer proyecto!!!

馃檲馃檲馃檲

https://jjdabid.github.io/today-board/

Aun me falta mucho por delante con React pero por fin terminamos con este primer paso!
GH: https://github.com/ManuMxrales/TodoApp
Deploy: https://manumxrales.github.io/TodoApp/