Añadiendo React A Una Aplicación De Electron JS ⚛️

[@rossendmercader8965]

Qué bien explicado y directo al grano. Muchas gracias

[@Andromorfiaa]

npm install cross-env --save "electron-dev": "concurrently \"cross-env BROWSER=none npm start\" \"wait-on localhost:3000 && electron .\"" npm run electron-dev

[@AgustinNavarroGaldon]

Gracias por tu aporte :D

[@fabiosaac]

Hola, para que es el cross-env?

[@jimesierra]

Buenísimo! A mi no me andaba con windows 10 y con npm, y esto me lo solucionó. Haganlo después de todos los pasos del video, remplazando solamente el script que se agrega, por el que mencionan en este comentario. Saludos!

[@mikemixsosa4264]

y sirve para hacer todo dinamico ? el cambio de "paginas" etc

[@romarioyabar4430]

Un serie completa de 10 horas de esto porfa, a profundidad. 🤗

[@AgustinNavarroGaldon]

Lo tengo en la lista para crear un curso de Electrón con React js 💪

[@arturoriveroshernandez7699]

Añadiendo react a electron, programamos como lo haríamos normalmente en react y listo? O cambia mucho? (Nunca he utilizado electronjs)

[@alexisduarte3667]

Genial, tengo tus cursos de reactjs y react native. Sería genial de incluyeras un proyecto de dashboard administrativo en el curso de react.

[@AgustinNavarroGaldon]

Estoy trabajando en un nuevo curso donde tocaremos React, Node, Express y MongoDB y crearemos una web personal con blog y mucho más... también tendremos un panel de administrador con Login tokenizado, todo programador por nosotros para controlar posts, usuarios, respuestas, etc....

[@DAVIDIL81]

compré tu curso en UDEMY la semana pasada y llevo dos días horribles porque con npm me ha dado mil errores críticos y no se instala el builder... ahora encuentro este video que es tuyo (mi profesor) y consigo arreglarlo... gracias... -

[@AgustinNavarroGaldon]

Usa yarn te dará menos problemas

[@fabiosaac]

Para los que no les funciona con npm probablemente sea porque en el comando "electron-dev" pusieron "yarn" en vez de "npm". Yo puse el siguiente comando y me funciono perfectamente: "electron-dev": "concurrently \"BROWSER=none npm start\" \"wait-on localhost:3000 && electron .\"",

[@AgustinNavarroGaldon]

Gracias por tu aporte crack!

[@paollarce5137]

Me sale un error con tu línea: [0] "BROWSER" no se reconoce como un comando interno o externo, [0] programa o archivo por lotes ejecutable. [0] BROWSER=none npm start exited with code 1 ¿Sabes porque pueda ser?

[@fabiosaac]

@@paollarce5137 con BROWSER=none yo lo que hago es anular el valor de la variable BROWSER del os. Problemente tu estés usando Windows y sea diferente, averigua cómo cambiar el valor de una variable de entorno en una línea de comando

[@danielcosme5285]

@@paollarce5137 (uso npm) Yo lo solucione instalando la dependencia "cross-env" y ejecutando el comando que puso @Andromorfia arriba " electron-dev": "concurrently \"cross-env BROWSER=none npm start\" \"wait-on localhost:3000 && electron .\" " 👈 Este

[@sergioromero6646]

Excelente video sigue así 😉👍🏽 saludos desde Argentina

[@AgustinNavarroGaldon]

Muchas gracias 😊

[@bernipalomino55]

Ooooooo super muy bien 👍

[@AgustinNavarroGaldon]

Gracias :D

[@JoseDavid-kd4ff]

Hola,tus videos son super geniales,una pregunta hay alguna manera de electron lea archivos .jsx

[@AgustinNavarroGaldon]

Si, en este curso te enseño desde cero. tincode.es/cursos/electron-js-y-react-js-creando-un-spotify

[@jonathanbarrero1567]

Buenas, Tengo una duda sobre integracion de Electron js y React cual es la mejor practica iniciar con Electron e integrar react o empezar creando react con create-react-app e integrar electron? eso no me queda claro cual es la mejor practica.

[@AgustinNavarroGaldon]

Yo siempre he iniciado una aplicación de React y luego añadir Electrón.

[@franzmedrano8580]

Genial me pareció muy interesante esta integración con electrón buen video!

[@AgustinNavarroGaldon]

Muchas gracias 💪

[@isaacdiaz6134]

Hola Agustín, y como lo compilarias, yo he probado compilarlo y no me acabo de funcionar.

[@AgustinNavarroGaldon]

Con yarn build tendría que compilarte sin problemas.

[@isaacdiaz6134]

@@AgustinNavarroGaldon compilar compila, pero cuando crea el ejecutable no me funcionan las rutas y de desarrollo si

[@cdrman]

Agustin Navarro Galdon creo que se refiere a como empaquetarlo para su distribución.

[@AgustinNavarroGaldon]

Para crear el .exe o el .dmg hay que seguir un proceso y crear un nuevo script es un poco largo, pronto subiré un vídeo compilando la app en .APK y .DMG

[@isaacdiaz6134]

@@AgustinNavarroGaldon perfecto, a esto es a lo que me referia yo. De todas formas estoy investigando un poco nwjs y me esta gustando casi mas que electron. Es mas, para que veais de la potencia de nwjs, hay un chico que creo un sistema operativo completo con nwjs.

[@gonza8699]

Hola, el video me resultó muy util, pero cómo hago para crear los instaladores para poder instalar la version de producción?

[@AgustinNavarroGaldon]

Hay que añadir una dependencia, en mi curso de Electron + React lo explico todo paso por paso.

[@zeroes5237]

Bro, me parece o instalaste dos veces electrón, uno de forma global y otro para desarrollo?

[@AgustinNavarroGaldon]

Voy a revisarlo.

[@tebarei]

Gracias!

[@AgustinNavarroGaldon]

Es un placer

[@fabiosaac]

Muy buen video, me funciono.

[@AgustinNavarroGaldon]

De nada 😁

[@Acron59]

Hola! Disculpa, tengo un problema. A la hora de ejecutar el comando "yarn electron-dev" me aparece: [0] "BROWSER" no se reconoce como un comando interno o externo Y no se ejecuta nada. Gracias!

[@AgustinNavarroGaldon]

¿En que SO estas trabajando?

[@LeonelRequiem]

@@AgustinNavarroGaldon a mi me aparece "error Command "electron-dev" not found." Estoy en windows 10 pro

[@hectoralvarezarciga7480]

@@LeonelRequiem disculpa, lo solucionaste?

[@MenesesG2]

Como le podría hacer para hacer una webview de una URL pero con un menú desplegable que quiero crear?, soy novato en electrón

[@AgustinNavarroGaldon]

Piensa que es css, html y js puedes hacerlo igual como lo haces en web

[@juantevez9267]

hola en medium dice 5). Crea un nuevo archivo en, /public/electron.js, con el siguiente contenido. y vos decis Crea un nuevo archivo en, /src/electron.js, con el siguiente contenido. cual de los es válido?

[@AgustinNavarroGaldon]

Ponlo en public mejor

[@juantevez9267]

@@AgustinNavarroGaldon OK, pero me carga una pagina en blanco y sale un error "failed to load resource: net:: ERROR_CONNECTION_REFUSED

[@AgustinNavarroGaldon]

Haz el import correctamente apuntando a la carpeta public

[@juantevez9267]

@@AgustinNavarroGaldon ok

[@juantevez9267]

@@AgustinNavarroGaldon ya está pero me salio dos warning uno lo solucione con y el otro no tengo idea de como quitarlo es este (electron) Security Warning: webFrame.executeJavaScript was called without worldSafeExecuteJavaScript enabled. This is considered unsafe. worldSafeExecuteJavaScript will be enabled by default in Electron 12.

[@nocturno7887]

Gracias amigo! particularmente no me funciona, no tengo yarn en el ordenador del trabajo, es posible que sea por eso y no puedo instalarlo por problemas de privilegios de admin.

[@AgustinNavarroGaldon]

Si no tienes privilegios de admin te da igual usar NPM que YARN no vas a poder instalarlo

[@smith123456789ist]

Excelente Video, como sabes tanto?

[@AgustinNavarroGaldon]

Al final si controlas un lenguaje, aprender nuevos es muy sencillo, todos tienes una estructura y lógica parecida.

[@javierallendes1361]

hola gracias por el video, tengo un problema al compilar la aplicación en producción me aparece en blanco, pedo en modo desarrollo funciona sin problema

[@AgustinNavarroGaldon]

Eso es un componente que revienta en la importación cuando compila, ves quitando importación y compilando y así verás cuál falla

[@javierallendes1361]

@@AgustinNavarroGaldon muchas gracias revisaré, a ver qué puede ser, igual estube buscando y creo que react router Dom en su versión 5 genera ese problema

[@AgustinNavarroGaldon]

Puede ser revisa las issue en GitHub

[@javierallendes1361]

@@AgustinNavarroGaldon compre tu curso en udemy de react y electron esta buenísimo

[@AgustinNavarroGaldon]

Muchas gracias me alegro mucho que te esté gustando 😊

[@juantevez9267]

lo mismo se puede hacer con vuejs?

[@AgustinNavarroGaldon]

Si también le puedes añadir Vue Js a Electrón.

[@cesartorres9247]

Holaa no me funciona el scripts Tengo este error concurrently "BROWSER=none yarn start" "wait-on localhost:3000 && electron ." [0] "BROWSER" no se reconoce como un comando interno o externo, [0] programa o archivo por lotes ejecutable. cual seria el problema?

[@cesartorres9247]

Estoy usando windows

[@cesartorres9247]

Encontre una solucion para windows tiene scripts "electron-windev" : "concurrently \"set BROWSER=none&& yarn start\" \"wait-on localhost:3000 && electron .\""

[@waltnj]

@@cesartorres9247 Muchas gracias! Era lo que buscaba :D

[@helion054]

@@cesartorres9247 gracias

[@AgustinNavarroGaldon]

¿Ya lo tienes solucionado?

[@hectormendez7290]

Gracias, se ve interesante, pero no me funciono quizas sea por que utilizo npm y no yarm, de todas formas gracias.

[@AgustinNavarroGaldon]

Te tiene que funcionar igual da igual que usar yarn o npm

[@damiansoriaweb]

Tuve un error al correct el script electron-dev con npm, tuve que instalar la lib cross-env, dejo el scrip "electron-dev": "concurrently \"cross-env BROWSER=none npm start\" \"wait-on localhost:3000 && electron .\""

[@trippybunn]

me sigue iniciando el proyecto en web, no en una ventana de electron :c

[@carlos8234714]

@@trippybunn Me pasa lo mismo, la solución fue dejar corriendo el comando "electron-dev", abrir otra ventana y correr el comando "electron ."

[@Fxiques]

@@carlos8234714 me funciono, gracias, pero ahora tengo la duda si es una buena solución, al momento de compilarlo sirve el sin problema?