Deploy de React en Netlify

Clase 30 de 31 • Curso de React.js con Vite.js y TailwindCSS

Maria Gabriela Rodriguez Cuevas

student•

🚀 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. ✌️

Camilo Taborda

student•

Gracias , fue de mucha ayuda ...

Julian David Alzate Cuervo

student•

gracias, no había podido ahcerlo con netlify

Andres Eduardo Maneiro Antunez

student•

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

JOSE FABIAN BONILLA GUZMAN

student•

interesante el estado de carga que le metiste mientras

Alfonso Ricaurte Riveros

student•

Me gusto mucho, lo que has logrado. Gracias por compartir

Bryan Enrique Garay Benavidez

student•

🤖 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.

Jesus Alejandro Gutierrez Guevara

student•

sabes de casualidad si la solucion para vercel seria igual o parecida? eso tambien pasa con vercel

Juan Becerra

student•

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

Esther Mary Mayorga Frias

student•

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)

Carlos Miranda

student•

https://carlosarturomt.github.io/Store_React/#/ Saludos

Nicolás Felipe Pinto Vega

student•

Hola, Carlos. Un pregunta:

¿Comó hiciste para que cuando se recargue la pagina de tu projecto no aparezca la página de "404 file not found" de GitHub Pages?

Gracias de antemano!

Kellbis Salazar

student•

Les comparto el proyecto: https://github.com/KellbisJ/my-ecm

Deploy: https://fakeshopiecm.netlify.app/

Alejandro Calderón

student•

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

🔴 LIVE: https://ecommerce-logo.netlify.app/
📅 REPO: https://github.com/mt-alejo/pj-ecommerce-react

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

JOSE FABIAN BONILLA GUZMAN

student•

me robe como haces el manejo del titulo, sin mirar tu codigo llegamos a la misma solucion xD

Alexander Moreno

student•

Mi proyecto: https://apps.alexanderweb.cloud/shopi/

Leonardo Fonseca

student•

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 🙂.

david jurado

student•

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

Hildebrando Vargas

student•

hola, me salia lo mismo y lo resolví con el siguiente comando

npm install -D tailwindcss postcss autoprefixer

Javier Jael Castillo

student•

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

Rubén Ernesto Aragón Gil

student•

https://main--gilded-malabi-00223d.netlify.app/

Johan Sebastian

student•

Aca esta mi repositorio en netlify

Vite + React

Diego Fernando Pallares Ramirez

student•

Este proyecto se puede subir por medio de Git - pages ?

Maria Gabriela Rodriguez Cuevas

student•

Hola Diego, yo lo hice así: entrar al enlace 👍

Andres Felipe Camacho Rodriguez

student•

Ayuda:

Rodrigo Damián Martinez

student•

Buenas platizinautas ¿Cada vez que edite el ejercicio tengo que hacer un deploy desde cero ó se puede modificar el deploy desde netlify?

Platzi

student•

Se puede modificar el deploy desde Netlify sin necesidad de hacerlo desde cero.

Daniel Morales

student•

¿Por qué mi proyecto queda en blanco cuando hago el deploy en GitHub?

Dylan Antonio Yampuezan Motato

student•

A alguien le salió este error al desplegar?
[vite:esbuild-transpile] Transform failed with 2 errors: 7:43:26 PM: 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) 7:43:26 PM: assets/index-!~~{001}~~.js:2600:17: ERROR: Top-level await is not available in the configured target environment ("chrome87", "edge88", "es2020", "firefox78", "safari14" + 2 overrides)

Diego Fernando Pallares Ramirez

student•

huy no que error mas loco, lo lograste solucionar ?

Armando Cruz Vidal

student•

https://armandocruzv.github.io/react-shop/

Carlos Romero

student•

Al entrar dice NotFound. Debe haber un problema con las rutas.

sandy.moo

student•

Puedes agregar basename en el componente BrowserRouter de index.jsx <BrowserRouter basename="/nombre-repo/"> para ubicar la ruta base antes de cada ruta