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 67

Preguntas 5

Ordenar por:

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

Yo realice el deploy con Vercel:

Live App
Repositorio

Agregue algunos estilos y funcionalidades

  • Autenticacion de usuario
  • Local storage
  • Rutas privadas
  • Animaciones

馃殌 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 鈥淪ettings鈥, luego en el panel izquierdo en la pesta帽a de 鈥淧ages鈥, en las
    opciones de 鈥淏ranch鈥 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)

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

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)
GG Lo realice con github, tuve que hacer cambios en las rutas pero de resto igual <https://ulternae.github.io/Shopi/>![](https://static.platzi.com/media/user_upload/image-217d6505-20e2-4564-8396-1483ba51d56b.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!
Aqui dejo mi deploy en Vercel. Agregue un navbar para mobile. Demo: <https://ecommerce-react-nine-mu.vercel.app/> Repo: <https://github.com/carlitoxe/ecommerce-react> Muy pronto pienso migrarla a Next.js
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 鈥淭U 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 鈥淎stro 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

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

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: 鈥榩ublic/_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 鈥淧age 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