No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Deploy de React en Netlify

30/31
Recursos

Aportes 68

Preguntas 5

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

🚀 Pasos para hacer el deploy en Github 🚀


 

  • Ir a la terminal, cambiar a la rama main (que es la que queremos hacer deploy) :
git checkout main

 

  • En la terminal verificar si en modo de producción funciona la app:
npm run build

 

  • Se va a generar una carpeta llamada dist, para visualizar la app se corre:
npm run preview

 

  • Se abre el navegador y debe salir la app con todas las funciones. 🎉
     
  • En la terminal ejecutar:
npm install gh-pages --save-dev

 

  • Vamos a VS Code y abrimos el archivo package.json, antes del cierre de la última llave, se
    agrega:
"homepage": "https://nombre_usuario.github.io/nombre_repositorio/"

 

  • En la parte de los scripts se agrega "deploy": "gh-pages -d dist" queda así:
"scripts": {
	"dev": "vite",
	"build": "vite build",
	"lint": "eslint src --ext js,jsx --report-unused-disable-directives --
	max-warnings 0",
	"preview": "vite preview",
	"predeploy": "npm run build",
	"deploy": "gh-pages -d dist"
},

 

  • Abrimos el archivo vite.congig.js y agregamos base: "./", el código queda:
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

// https://vitejs.dev/config/
export default defineConfig({
	plugins: [react()],
	base: "./",
})

 

  • Guardamos, y en la terminal ejecutamos:
npm run deploy

 

  • Si sale Published es que todo salió bien. ✅
     
  • Vamos al repositorio en GitHub. En la página de GitHub, al recargarla, en la lista desplegable
    de las ramas deben salir al menos las ramas main y gh-pages.
     
  • Vamos a la pestaña de “Settings”, luego en el panel izquierdo en la pestaña de “Pages”, en las
    opciones de “Branch” ya la herramienta que instalamos de gh-pages seleccionó por nosotros la
    opción de la rama gh-pages y la carpeta raíz: /root.
     
  • Después de unos minutos debe aparecer la dirección del despliegue. 🙏
     
  • Al entrar a la url, debe estar el proyecto funcionando, probar con todas las funciones. ✌️
     

Les presento mi proyecto como va hasta ahora
a nivel de logica tiene muchos cambios con respecto al proyecto presentado por la profe

  • tiene lazy loding, y loading skeleton en las imagenes
  • cuando filtra por categoria lo que hago es una peticion al servidor paa que me traigas los productos por categoria
  • implemente varios Custom Hooks
  • en vez de inhabilitar el botn al agregar un producto, lo que hice fue que sumara la cantidad de productos del mismo producto
    Entre otro cambios que hice
    https://shopistore.netlify.app/

Aqui esta el repo por si le quieren echar un ojo
aun me falta implementar varias cosas que tengo en mente
https://github.com/amaneiro7/shopistore

🤖 Hola comunidad para resolver el problema:

Encontré un tutorial que explicaba básicamente que las rutas que nosotros manejamos con React, se conocen internamente en la aplicación pero que Netlify no las conoce, solo conoce la raíz, entonces al recargar la página o dirigirnos por medio de la url a otra ruta diferente a Netlify le llega una ruta que no existe para su entorno. La solución propuesta es redirigir la aplicación al index.html que contiene toda la app y nuestras rutas.
Pasos:
1.- Abren su proyecto y afuera de todo (donde está el package.json) crean un archivo con el nombre: netlify.toml
2.- En el agregan las siguientes líneas de código:
[[redirects]]
from = "/*"
to = "/index.html"
status = 200
3.- Guardan, hacen commit, push y Netlify ya debería gestionar correctamente todas las rutas.
A mi me funcionó, espero a ustedes también les funcione.

Les comparto mi proyecto:
https://shoppi-bh.netlify.app/
Quise ir mas alla, hice logica para usarios y toda la informacion la guardo en localStorage para que el usuario pueda guardar sus direcciones, ordenes y cambiar su informacion.
Este es el repositorio:
https://github.com/JUAN-BH/simpleEcommerce

Aquí les dejo mi proyecto <https://main--idyllic-nougat-3e6e61.netlify.app/> <https://maryemf.github.io/react-ecommerce/> Tanto en GH pages como en Netlify da problemas al recargar (no he logrado solucionarlo) Aun estoy mejorándolo, mas por los momentos: * Ajuste un poco el responsive (reconozco que el css no es mi fuerte :( ) * Tiene registro, login y edición de datos en my account (usando localstorage)
Les comparto el proyecto: <https://github.com/KellbisJ/my-ecm> Deploy: <https://fakeshopiecm.netlify.app/>

Proyecto finalizado, ire agregando mas detalles porque lo usare como trabajo estrella en mi portfolio. ⭐

Ideas de los compañeros:

  • Lazy loding
  • Loading skeleton
  • Loading initial state
  • El Shopping Cart aside
  • Mas estilo

Quiza o quiza nunca:

  • Paginas no encontradas
  • Sign In & Sign up

Hola, mi avance actual del sitio es el siguiente y este es el repositorio .

Conecté la búsqueda a la url y traté de realizar a mi manera la lógica de juntar el fltrado de categorías al tiempo de la búsqueda. El menú depende de un filtrado rápido de lo que devuelve el fetch la primera vez para que muestre las categorías, dado que el api cambia mucho su data y consideré interesante que se actualizara según los datos que recibe. En caso de que los resultados no devuelvan nada, Coloqué un mensaje amigable dando la opción de hacer clic en las categorías para que el usuario no se quede solo con que no encontró nada.

Espero sea de ayuda y considero que todo puede mejorarse, optimizarse, etc. por tanto, todos los comentarios son bienvenidos 🙂.

hola veo que todos tienen el MISMO ERROR que me gustaría solucionar y no me deja dormir, cuando recargamos en una ruta /clothes o cualquier categoría en general da un error, lo ideal seria cargar la categoría normal, o llevarnos a la raíz “/”, igual trataré de buscar la solución (lo hice con nextjs13) pero si alguien sabe le agradezco

Aquí está mi proyecto finalizado, mi reto personal fue pasar todo con TypeScript así que espero que le pongan un ojo por si quieren revisar como está la lógica, los interfaces y toda esta magia del tipado fuerte:

Sitio deploy: https://dulcet-griffin-d705e5.netlify.app
Github: https://github.com/Javier0727/platzi-course-react-vite

Si les salio el error error during build: Error: Transform failed with 2 errors: assets/index-!~{001}~.js:2599:19: ERROR: Top-level await is not available in the configured target environment ("chrome87", "edge88", "es2020", "firefox78", "safari14" + 2 overrides) al hacer deploy, agreguen a su archivo vite.config.js lo siguiente: export default defineConfig({ plugins: \[react()], build: { target: 'esnext', // Asegúrate de que sea compatible con top-level await }, })
Mi proyecto finalizado <https://resilient-lebkuchen-fa0e65.netlify.app/my-orders/2>
Mi proyecto: [Página](https://emily-shopi.netlify.app/) y [Repositorio](https://github.com/emilymenchu/shopi) ![](https://i.imgur.com/h1qlwaw.png) ![](https://i.imgur.com/1PTCens.png) ![](https://i.imgur.com/NdrlnTS.png)
yo desplegué y le agregue la herramienta contefull pero me sale un error en las enviroment
Así ha quedado el mi proyecto subido a y a Netlify GitHub pages <https://alfargenis.github.io/AletheiaExclusive> Netlify <https://musical-taffy-8337e8.netlify.app/shoes> ![](https://static.platzi.com/media/user_upload/Captura%20de%20pantalla%202024-06-13%20a%20la%28s%29%202.07.18%E2%80%AFp.%C2%A0m.-8770919e-20fa-475b-bcd1-2ee888a114d9.jpg)
Aqui mi resultado : \[Netlify Live Site]\(https://fabulous-lamington-8824d8.netlify.app/) ![](https://static.platzi.com/media/user_upload/Captura%20de%20pantalla%202024-05-28%20124532-5d476832-494d-48c5-bce5-fc0961906c92.jpg)
Mi proyecto <https://danniel917.github.io/react-shopi-store/> Falta hacerle muchas mejoras, pero por el momento lo voy a dejar así para seguir con el laboratorio.
<https://superb-pegasus-d604ac.netlify.app/> Les paso mi proyecto muchachos :D
como se hace responsive el proyecto , veo que en las pantallas mobiles no se ve bien y veo que no estamos utilizando clases para hacer responsive

Hola platzinautas, comparto con ustedes mi proyecto.


Acá dejo el deploy en Netlify de mi proyecto y el link de GitHub:

Además de lo visto en este curso, le agregue algunas cosas más:

  • Responsive Design
  • Skeleton Loading
  • UI de Sign In y Account
  • Otros estilos y pequeñas animaciones
Les comparto mi Web <https://shopioa.netlify.app/> Gran Curso de parte de Platzi y sobre todo el manejo que ha dado la profe Teff <3

Dejo mi proyecto terminado y mi github

Dejo una vista previa por si la API sigue rota, fue bueno aprender en el anterior curso a hacer una presentación en el repo, que se explique que se hizo.

Muy bueno el curso!

Realice el deploy con gh-pages. Además de lo visto agregue: * loading skeletons * contadores de productos <https://santiagoferrerb.github.io/Ecommerce-React/> ![](https://static.platzi.com/media/user_upload/image-5439fdab-7733-4371-862a-86c702b1f099.jpg)

Gente espero que este bien, dejo mi pequeńo proyecto, lo complementé con un backend desarrollado en node, viendolo finalizado entiendo que hay bastante por mejorar, pero entiendo tambien que esta forma de verlo se basa en lo que se aprende dia a dia, dejo link por si lo quieren visitar:

Proyecto to-do Teams

Me encantó! Gracias Teff sos la mejor!! ![](https://static.platzi.com/media/user_upload/image-80908c6a-2973-4e63-97c2-02ebf3e4fad3.jpg)![](https://static.platzi.com/media/user_upload/image-48669e32-70bc-4d17-9e99-b2cf83bae4f9.jpg)
<https://carlosarturomt.github.io/Store_React/#/> Saludos

esto es lo que cree
https://remarkable-pithivier-cd0fbd.netlify.app/electronics
luego lo voy a mejorar

Hola comunidad! Tengo problemas al realizar el deploy en GitHub Pages. Tengo configurado mi archivio vite.config.js, con la opcion base: "/" y en mi package.json tengo mi "homepage": <https://kevkarlion.github.io/Shop-Online-React-TailwindCSS-Vite/> es la url donde quedará alojada mi aplicacion. El problema es al abrir la página que está desplegada, me queda en blanco. Por favor, si alguien puede guiarme en como lograr el deploy y ver mi error, me ayudaría. Gracias!
comparto mi deploy en github pages le agregue la funcionalidad de la cantidad o unidades de los productos. demo: <https://nicodev-co.github.io/react-vite-shop/> repositorio: <https://github.com/nicodev-co/react-vite-shop>

Esoooooo!

los recursos no estan sirviendo en la nueva pagina :(

Aquí esta mi sitio:
master chef sv

No pude hacer deploy con github lastimosamente. Hice varios cambios y prove varias cosas, por suerte Netlify te deja hacer drag and drop de los build files.

Buen dato por si alguien le sirve 😉

Otra opcion es Versel que actualmente tiene mejores servicios.
Saurte a todos!!!

Les comparto el mío:
https://platzy-shop.netlify.app/

WEB: Click aquí
Repo: Click aqupi aqui

Cada usuario tiene sus productos de manera individual. y se gurada en local storage.
Lo único malo es que tocan demasiado la Fake API y suben cosas muy raras o borran todo.

Maquetación de las Vistas de Usuario

Flujo de Sign In:

  • Página para hacer login (si el usuario no está autenticado)
  • Página de Sign up para crear un nuevo usuario (si el usuario no está autenticado)
  • Página con la información del usuario y botón para hacer logout (si el usuario ya está autenticado)

Navbar Dinámica

La navbar o menú principal de la aplicación debe cambiar su estructura dependiendo de si el usuario está autenticado o no:

  • Mostrar el correo del usuario (si ya está autenticado)
  • Mostrar botón para hacer Sign (si no está autenticado)

Protección de Rutas

  • Hacer redirect a la página de login si el usuario no está autenticado
  • Mostrar común y corriente las páginas anteriormente mencionadas si el usuario ya está autenticado

Diseño

  • Responsive Design




Así quedo el mio, utilice la API que un compañero comento (fakestoreapi)

Repo

Les dejo la URL y el repo por si quieren mirar 🙃

Les comparto mi proyecto:
Live APP
Cosas por hacer:

  • Registro de usuarios

  • Vista de “TU CUENTA”

Así va mi proyecto: https://degiraldod-shopi.netlify.app/
Las cosas que tengo por hacer son:

  • Hacerlo responsive.
  • Implementar lazy loading y loading squeletons
  • Autenticación de usuario y vistas de My Account y Sign In.
  • Implementar una vista para cuando no se tiene ningún resultado.

Gran curso y, gran explicación:)
https://tiendafy.netlify.app/

https://juli6464.github.io/curso-practico-react/

Aquí dejo mi proyecto ya desplegado:
https://e-commerce-react-fjsb.netlify.app/
Aquí pueden acceder al código:
https://github.com/FranciscoJSB12/e-commerce-react

https://cesdevs.com

Excelente curso
saludos

Hola comunidad les dejo la información de mi e-commerce “Astro Place”. Lo personalicé a mi gusto, tiene un diseño responsive, una landing page y lo hice con mi propia API deployada en Render.
La página web la pueden revisar aquí: https://astro-place-bg.netlify.app/
La API: https://astroplace-fake-api.onrender.com/
Los repositorios en Github: https://github.com/BryanGaray99/Astro-Place-e-commerce y https://github.com/BryanGaray99/astroplace-fake-api

La mayoría de los proyectos veo que dan error si se accede directamente a una página que no sea el home, ojalá compartieran una solución :c

Encontré un Tutorial perfectamente explicado para subirlo a Github Pages.

Listo
https://courageous-puppy-70f706.netlify.app/
incluí un formulario para sign In
y uno de registro

Hola como están gracias por este gran curso

Demo

Les comparto mi proyecto:

  • Pueden ver mi repositorio aquí
  • Pueden ver mi deploy aquí

Para los que tienen problemas cuando se recarga la pagina directamente con una ruta en el navegador y netlify les arroja un 404, pueden agregar un archivo en la carpeta public bajo el nombre _redirects: ‘public/_redirects’ solo con el siguiente contenido:

/* /index.html 200

Luego corren el comando de build y con eso deberia funcionar el enrutamiento de la pagina.
fuente:
Netlify says “Page not found” upon reloading in Vite and React site

Hola, dejo el resultado de este curso, no le hice muchas modificaciones al producto final comparado con el que tiene la profe, lo pueden ver aqui tambien dejo la repo por aca

Le comparto mi deploy AQUI

https://6486586aad38cc643a1d3c72--cosmic-biscuit-e74852.netlify.app/
tarde me di cuenta lo de hacer que los estilos css sean responsive casi no tengo a quien mostrarles mis proyectos y quienes lo hacen desdes el cel para la proxima yo pararelo los hire haciendo,

El mío lo hizo en Next.js y usando TypeScript, es muy interesante el uso de rutas en Next.js, la funcionalidad de las rutas ya viene por defecto:
https://github.com/enrique1994mex/app-store
https://app-store-mk9wgh0nz-enrique1994mex.vercel.app/

A mi proyecto le agregué varias funcionalidades extras:

  • Local Storage
  • Transiciones y animaciones ante cada modal
  • Spinner animado antes de que carguen los productos para mejorar la experiencia de usuario
  • Paleta de colores personalizada
  • Tengo pensado en el futuro agregarle autenticación de usuarios

Hola a todos, les dejo mi aplicación y el repositorio

Demo

Git Hub