Despliegue de Aplicaciones React en Netlify

Resumen

¿Cómo desplegar tu aplicación de React en Netlify?

Llevar tu aplicación de React a producción puede parecer un desafío, pero con plataformas como Netlify, el proceso se vuelve más sencillo y eficiente. Con Netlify, puedes desplegar tu aplicación y tenerla corriendo en una URL en cuestión de minutos. Aquí te mostramos cómo hacerlo.

¿Qué pasos debes seguir para subir tu proyecto a la nube?

Antes de comenzar con el despliegue, asegúrate de que tu proyecto esté alojado en un servicio de repositorio en la nube. GitHub es una opción popular y será el servicio que utilizaremos en este caso. Si aún no has subido tu proyecto a la nube, sigue estos pasos:

Sube tu repositorio a GitHub:
- Inicia sesión en tu cuenta de GitHub.
- Crea un nuevo repositorio.
- Sube tu proyecto local al nuevo repositorio usando Git.

Una vez que tengas tu proyecto en la nube, estarás listo para continuar con Netlify.

¿Cómo conectar Netlify con GitHub?

Una vez que tu proyecto está disponible en GitHub, puedes integrarlo fácilmente con Netlify:

Inicia sesión en tu cuenta de Netlify.
Selecciona 'New Site from Git': Esta opción te permitirá crear un nuevo sitio desde tu repositorio.
Autoriza a Netlify para acceder a GitHub:
- Si es la primera vez que usas Netlify con GitHub, necesitarás autorizar la conexión.
Selecciona tu repositorio:
- Ubica tu repositorio dentro de la organización o la cuenta personal en GitHub.

¿Cómo configurar el despliegue?

El proceso de configuración en Netlify es bastante sencillo. A continuación, te mostramos cómo definir los parámetros clave para un despliegue exitoso:

Elige la rama adecuada:
- Si bien main suele ser la opción por defecto, puedes seleccionar la rama que desees desplegar. Por ejemplo, podría ser una rama como React 04.
Inicia el despliegue:
- Haz clic en "Deploy" para comenzar el proceso. Netlify configurará un servidor y preparará todo lo necesario para poner tu aplicación en producción.
Monitorea y corrige errores:
- Mientras ocurre el despliegue, utiliza los logs de Netlify para ver los procesos en tiempo real. Esto te permite identificar y corregir cualquier posible error en tu proyecto antes de que llegue al entorno de producción.

¿Qué hacer después del despliegue?

¡Excelente! Tu aplicación está desplegada y disponible en una URL. Ahora, considera esto:

Revisión automática:
- Netlify ofrece integraciones automáticas para revisar las actualizaciones que subas, lo que facilita mantener tu aplicación funcionando correctamente.
Participación en la comunidad:
- Considera enviar pull requests con tus proyectos o mejoras en repositorios comunitarios. Esto te permitirá recibir feedback valioso y contribuir a la comunidad de desarrolladores.

¿Aceptar el reto de migrar un portafolio a React?

Finalmente, aquí tienes un reto tentador: migra el portafolio que creaste anteriormente en el curso a React. Si no has tomado el curso de React, no te preocupes, puedes hacerlo y luego regresar para aceptar este desafío. A través de esta tarea, fortalecerás tus habilidades de React y desplegarás una aplicación más compleja. Además, tendrás la oportunidad de recibir retroalimentación y comentarios a través de pull requests en nuestro repositorio comunitario. ¡Buena suerte y sigue explorando el fascinante mundo de React y el desarrollo web!

Edgar Lopez Arroyo

student•

Si pude... I did ❤❤

Irving Juárez

student•

Ya no carga tu pagina

Richard Fernando Jiménez

student•

404 jajaja

Rony Porraz Vargas

student•

Si lo quieren desplegar en caliente solo arrastra en la parte de /sites la carpeta de dist OJO no la carpeta del proyecto si no la de distribution

Irving Juárez

student•

Buen dato, socio

Cesar Oros Soto

student•

Para los que tengan un error en el path de los archivos que se generan deben cambiar esto:

output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js',
        publicPath: "/",
    },

Por esto:

output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js',
        publicPath: "./",
    },

Jenny Aguilar

student•

Estimado, muchísimas gracias... estuve pegada por horas y el puntito del "./" era lo que me faltaba... Me salvaste!!!

Sebastian Moreno Olivera

student•

Cesar, muchas gracias bro, estuve buscando por todos los lados el error y era este jajajá, eres un crack una pregunta me puedes explicar a que se debe, graciasss.

Nelly Arlet Bautista Hernandez

student•

¿Qué es lo que pasa con la carpeta dist?, ¿Por qué ya no fue generada en el segundo proyecto "Integración básica de React.js" como lo hicimos en el proyecto anterior?

Jefferson Vera

student•

La carpeta dis no se genera con el comando npm run start porque estamos utilizando el servidor que se crea con la libreria webpack-dev-server instalada que levanta un servidor en el puerto especificado.

Sin embargo, al ejecutar el comando npm run build si se genera la carpeta dist porque ya no usamos el webpack-dev-server. Espero haberte ayudado :)

Willy Emanuel Antunez Gonzales

student•

Parece que el comando para hacer el build es ejecutado automáticamente por Netlify

Christian Boffill

student•

Para los que no quieren complicarse la vida y quieran hacer un deploy directo a github pages en un rama gh-pages. Les recomiendo instalar la dependencia gh-pages y crear un scrip para hacer deploy.

npm install --save gh-pages

De ante mano tienen que haber subido todo a un repositorio en github y hacer build. Suponiendo que tenemos el build de nuestro proyecto en una carpeta build:

"script": "gh-pages -d build"

Agregar al package.json cual será la url del deploy en github, por ejemplo tiene esta estructura:

"homepage": "https://myusername.github.io/my-app",

Esta dependencia va a subir la carpeta build a github y va a hacer deploy automáticamente, luego va a aparecer en la consola el mensaje (Published)

Les dejo la guía completa, Nota: sirve para hacer deploy de lo cualquier sitio estático que estés haciendo. gh-pages

César Palma

student•

gracias por tu aporte

Fernando Xavier Mora Rázuri

student•

Hermano te pasaste! Mil gracias

Manuel Alejandro Martinez

student•

Todos podemos! :D si somos dedicados y perseverantes , Recuerden los errores son amigos.

José Armando Gutiérrez Araujo

student•

Veo que no se genera ningún archivo css en /dist pero los estilos están bien aplicados, alguien sabe que sera?

Juan David González Rodríguez

student•

si, tienes que cambiar la configuracion de tu webpack.config,js , quitas stylus-loader por MiniCssExtractPlugin.loader :D

 {
        test: /\.s[ac]ss$/,
        use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader'],
  },

José Armando Gutiérrez Araujo

student•

Gracias Juan, me ha servido :D

Juan Carlos Guaña Caiza

student•

Porque en este ejemplo no configura el archivo netlify.toml?

Alejandro Alberto Pachas Chavez

student•

misma pregunta

Sebastian Pedroza

student•

X3 🤔?

CARLOS RODRIGO DEL TORO ORTIZ

student•

Muy buena la parte de react ...aqui el mio

Irving Juárez

student•

Esta muy bien, también recuerda que le puedes cambiar el nombre del link de la pagina en los settings de la misma, desde Netlify

Rodrigo Martinez

student•

Online baby! 👉 URL

Randy Guerra

student•

Lo importante de esto,es tener todo anota,ya que webpack solo es configuracion mas que nada y estar pendiente de cada detalle.

Franklin Gerardo Pimentel Hernández

student•

Si se me hace un poco pesado por eso pero es una muy buena herramienta

Christian Michael Rosales

student•

Listo

App

Alonso Fabricio Samanez Nuñez

student•

:thumbsup:

Pablo Nicolás Alonso

student•

Tengo un problema. Cuando hago npm run build en mi consola de vs code me lo compila sin ningun error, pero a la hora de hacer deploy en netlify me da un error luego de usa el npm run build.

3:48:36 PM: > webpack --config webpack.config.js
3:48:41 PM: [webpack-cli] [Error: EISDIR: illegal operation on a directory, open '/opt/build/repo/dist/index.html/'] {
3:48:41 PM:   errno: -21,
3:48:41 PM:   code: 'EISDIR',
3:48:41 PM:   syscall: 'open',
3:48:41 PM:   path: '/opt/build/repo/dist/index.html/'
3:48:41 PM: }
3:48:41 PM: npm ERR! code ELIFECYCLE
3:48:41 PM: npm ERR! errno 2
3:48:41 PM: npm ERR! webpack-react@1.0.0 build: `webpack --config webpack.config.js`
3:48:41 PM: npm ERR! Exit status 2
3:48:41 PM: npm ERR!
3:48:41 PM: npm ERR! Failed at the webpack-react@1.0.0 build script.
3:48:41 PM: npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
3:48:41 PM: npm ERR! A complete log of this run can be found in:
3:48:41 PM: npm ERR!     /opt/buildhome/.npm/_logs/2021-05-03T18_48_41_748Z-debug.log
3:48:41 PM: ────────────────────────────────────────────────────────────────
3:48:41 PM:   "build.command" failed                                        
3:48:41 PM: ────────────────────────────────────────────────────────────────
3:48:41 PM: 
3:48:41 PM:   Error message
3:48:41 PM:   Command failed with exit code 2: npm run build
3:48:41 PM: 
3:48:41 PM:   Error location
3:48:41 PM:   In Build command from Netlify app:
3:48:41 PM:   npm run build
3:48:41 PM: 
3:48:41 PM:   Resolved config
3:48:41 PM:   build:
3:48:41 PM:     command: npm run build
3:48:41 PM:     commandOrigin: ui
3:48:41 PM:     publish: /opt/build/repo/dist

Alejandro Alberto Pachas Chavez

student•

En mi terminal no me aparece ningún error, sin embargo en netlify sí

10:30:55 PM: $ npm run build
10:30:55 PM: > proyecto2@1.0.0 build /opt/build/repo
10:30:55 PM: > webpack --config webpack.config.js
10:30:55 PM: sh: 1: webpack: not found
10:30:55 PM: npm ERR! code ELIFECYCLE
10:30:55 PM: npm ERR! syscall spawn
10:30:55 PM: npm ERR! file sh
10:30:55 PM: npm ERR! errno ENOENT
10:30:55 PM: npm ERR! proyecto2@1.0.0 build: `webpack --config webpack.config.js`
10:30:55 PM: npm ERR! spawn ENOENT
10:30:55 PM: npm ERR!
10:30:55 PM: npm ERR! Failed at the proyecto2@1.0.0 build script.
10:30:55 PM: npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
10:30:55 PM: npm ERR! A complete log of this run can be found in:
10:30:55 PM: npm ERR!     /opt/buildhome/.npm/_logs/2021-06-19T03_30_55_393Z-debug.log

alguien sabe por qué?

Héctor Eduardo López Carballo

student•

Hola!

Ahí dice que webpack no está instalado. Puede estar relacionado con el cache

intenta npm install
intenta npm cache verify y después correr el comando de nuevo
intenta npm cache clean o npm cache clean --force e intenta de nuevo.

Alejandro Alberto Pachas Chavez

student•

vaya que sorprendente respuesta, muchas gracias

José Armando Gutiérrez Araujo

student•

Para que sirve exactamente el publicPath en el output? al tenerlo puesto y hacer build para verlo localmente hay un error en las rutas y me dice que el bundle no se encuentra, pero al hacer deploy si se muestra de manera correcta.

Ahora, si le quito el public path, el build funciona bien tanto local como en el deploy, alguien sabe que pasa?

Eduardo Kusznieryk

student•

al cambiar el publicPath de "/" a "./" me funcionó

Andres Martinez

student•

con repositorio de bitbuket : git clone https://Andy00@bitbucket.org/Andy00/curso-webpack-react.git sitio aun valido : https://reliable-dasik-00c6cc.netlify.app/

Christian Eduardo Figueroa Sandoval

student•

No me fue bien con las publicaciones en Netlify, ni con el de portfolio ni con el de react. Con el primero salía un error permanente en Netlify que no se pudo corregir y con este proyecto, Netlify ni siquiera encuentra el repositorio estando correctamente creado en Github. No entendí porque este proyecto no tiene el archivo netlify.toml y porqué hay un path haciendo referencia al dist pero no existe este directorio dentro del proyecto.