Yo realice el deploy con Vercel:
Agregue algunos estilos y funcionalidades
- Autenticacion de usuario
- Local storage
- Rutas privadas
- Animaciones
Introducción
Construye una tienda online con React
Enrutamiento y estructura base
Instalación de React con Vite y TailwindCSS
Análisis de rutas y componentes en React
Enrutamiento con React Router DOM
Componente Navbar
Componente de Layout
Componente de Card
Consumiendo la FakeStore API para pintar cards
Manejo de estado global con Context
Contexto global de la aplicación
Contador de productos en el carrito
Abriendo el detalle de cada producto
Reto: heroicons con TailwindCSS
Maquetando el ProductDetail
Mostrando productos en ProductDetail
Carrito de Compras
Agregando productos al carrito
SideMenu del carrito de compras
Componente OrderCard
Evitando productos duplicados en el carrito
Eliminar productos del carrito
Suma total de productos en el carrito
Checkout y Órdenes de Compra
Flujo para crear una nueva orden
Checkout de productos en el carrito
Página de MyOrders: lista de órdenes
Página de MyOrder: órden individual
Reto: órdenes de compra con TailwindCSS
Filtrando productos desde el frontend
Buscador de productos
Filtrando títulos con JavaScript
Filtrando categorías con JavaScript
Corrigiendo bugs de la aplicación
Próximos pasos
Deploy de React en Netlify
¿Preparada o preparado para un Laboratorio de React?
No tienes acceso a esta clase
¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera
Aportes 47
Preguntas 3
Yo realice el deploy con Vercel:
Agregue algunos estilos y funcionalidades
Les presento mi proyecto como va hasta ahora
a nivel de logica tiene muchos cambios con respecto al proyecto presentado por la profe
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
main
(que es la que queremos hacer deploy) :git checkout main
npm run build
dist
, para visualizar la app se corre:npm run preview
npm install gh-pages --save-dev
package.json
, antes del cierre de la última llave, se"homepage": "https://nombre_usuario.github.io/nombre_repositorio/"
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"
},
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: "./",
})
npm run deploy
Published
es que todo salió bien. ✅main
y gh-pages
.gh-pages
seleccionó por nosotros lagh-pages
y la carpeta raíz: /root
.🤖 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!
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.
La navbar o menú principal de la aplicación debe cambiar su estructura dependiendo de si el usuario está autenticado o no:
Así quedo el mio, utilice la API que un compañero comento (fakestoreapi)
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:
Gran curso y, gran explicación:)
https://tiendafy.netlify.app/
Muchas gracias
https://carlostoroshoppy.netlify.app/
Siempre es emocionante cuando se puede compartir un deploy exitoso:
mi aplicación mega re pro OMG que felicidad haber terminado sin problemas.
Dejo por acá el repo del proyecto, lleno de machetazos, pero completo.
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
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
Les presento el proyecto: https://rainbow-pastelito-da17c2.netlify.app/
Proyecto finalizado, ire agregando mas detalles porque lo usare como trabajo estrella en mi portfolio. ⭐
Ideas de los compañeros:
Quiza o quiza nunca:
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
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
Proyecto finalizado:
https://higiniecito-frist-site.netlify.app/
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/
Les dejo el mio 😃
A mi proyecto le agregué varias funcionalidades extras:
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 🙂.
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?
o inicia sesión.