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 47

Preguntas 3

Ordenar por:

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

o inicia sesi贸n.

Yo realice el deploy con Vercel:

Live App
Repositorio

Agregue algunos estilos y funcionalidades

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

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

馃殌 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. 鉁岋笍

馃 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

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

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

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 馃檪.