No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Curso de Webpack

Curso de Webpack

Oscar Barajas Tavares

Oscar Barajas Tavares

Deploy del proyecto con React.js

27/28
Recursos

Aportes 37

Preguntas 9

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

Si pude… I did ❤❤

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

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: "./",
    },

¿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?

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

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

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

Muy buena la parte de react …aqui el mio

Online baby! 👉 URL

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

Listo

App

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.

excelente curso

Reto completado, migre el proyecto a react e hice el deploy en nerlify. Proyecto

Aprendí mucho en este curso.

(https://sparkly-pie-882534.netlify.app/)

Lo logre!!!

Aquí mi proyecto hecho en React!!!
Portfolio

Les comparto la migración a React.
app
repositorio

Vean el comentario de Oscar Oros.
Yo tuve problemas para desplegar la app con los elementos de Path y Alias en los webpack.config, pero como aún no estaban en uso los eliminé y funcionó perfecto.
No encontré en la documentación ninguna, claro, porque el error está en la linea anterior a Alias…

hola paso a dejar un comentario, si no les abre del deploy en “https://netlify.com”, borren en “webpack.config.js” la linea donde colocamos: publicPath ‘/’, y hay si lo publica bien…

LO LOGREEEEEEEEEEEEEE

Más deploy

Gracias a la perseverancia lo pude publicar en Netlify , me daba un error porque le faltaba una s al archivo styles.
Aqui el link : https://willowy-blini-c0cd1e.netlify.app.
Aqui el repo: https://github.com/villerca/curso-webpack-react.git

it works!
link

Deploy AQUI

Lo logreee Link

🤩 site

Conseguido 👉 Click!

Si se pudo!

👌