Convierte sitios web en Aplicaciones de Escritorio con Nativefier

Nativefier es un comando de npm que puedes instalar usando Nodejs, y el cual te permite crear aplicaciones de escritorio a partir de un sitio web desplgado, de hecho lo que hace es que te permite colocar un sitio web en un contenedor de Chromium (creado en Electron), lo que en la practica significa que puedes convertir tu aplicacion web con un solo comando en una aplicacion de escritorio con tecnologia web.
Este no es un framework sino un simple programa de npm:
github.com/nativefier/nativefier
🎥 Videos Recomendados:
Github Pages npm ➜ • Github Pages | Sitios ...
Mongodb Visual Studio Code ➜ • Mongodb para Visual St...
Mongoose ➜ • Mongoose | Introduccci...
Curso de Nodejs ➜ • Nodejs Curso Desde Cer...
Thunder Client ➜ • Thunder Client - Postm...
Variables de Entorno en Nodejs ➜ • Variables de Entorno e...
Curso de Git ➜ • Git y Github | Curso P...
Rest client VSCode ➜ • Rest Client | Extensio...
Mongodb Atlas ➜ • MongoDB Atlas, NoSQL e...
👨‍💻 ¿Qué servicios y productos utilizo?
Ledger (Hardware Wallet) ➞ bit.ly/3ijsVNW
SiteGround ➞ bit.ly/31u9ZEk
DigitalOcean ➞ m.do.co/c/8ef261d77de5
Expo ➞ bit.ly/2WpYKtx
Cloudinary ➞ bit.ly/3ohNlJ7
Namecheap ➞ namecheap.pxf.io/ErDe9
#electron #desarrolloweb #javascript

[@elrafineitorxd5400]

Fatz, no conocía tu página y la verdad tiene un acabado muy limpio, felicidades!

[@noeltaverascastillo3677]

Gracias por todo tus aportes y excelente forma como explica en todo los videos. son de gran ayuda

[@mateoandrescano3685]

Gracias por la información. 👍

[@MetalxD117]

Bro buenisima esa herramienta si que puede sacar de un apuro, se agradece!!

[@SonGoku-pc7jl]

impresionante nativefier! :D Muchas gracias Fat

[@renzobarca]

Muchas gracias bro, justo lo que necesitaba.

[@ChrisJosJC]

Super útil, tengo mucho tiempo esperando un vídeo cómo esto!!

[@davidlunamontilla]

Excelente aporte.

[@user-pk5eu5yl5p]

Excelente aporte y video muchas gracias Una pregunta, ¿Hay una función que permita guardar el usuario y contraseña una vez inicia sesión?

[@jesus_84_]

Maestro de maestros.

[@elkindiaz8200]

Sería bueno que realizara un video de como se un programa para instalar con esta opción que explicas en este video 😊

[@jwcasilimas]

it worked! thank you so much!!

[@floresnelson]

Hola, Fazt, me gusta el nuevo logo del canal

[@esteban4699]

Hola Fazt gracias por tus aportes, una pregunta, crees que Microsoft store acepte una app con Nativefier?

[@lautaroriveiro]

Muchas gracias!

[@jonathancoder]

Profe excelente video como siempre, pregunta: es un webview o descarga el sitio completo?

[@Holri]

Master 🤯

[@andreseduardohernandezmont5426]

Gracias crack!

[@guskit]

Como siempre, directo al punto, felicitaciones, tengo una pregunta, Como puedo empaquetar para hacer un instalador para windows 10? Un fuerte abrazo, tienes todo lo que se requiere para ser un ink master, sigue adelante.

[@edwincalero7550]

Y se podria integrar el .exe con un proyecto rasberry como proyecto fisico con la idea por ejemplo de una especie de miniconsola con ese programa descargado?

[@urielantoniopedrazavazquez7083]

Muy buen video tutorial amigo, pero disculpa en la parte de la documentación donde puedo buscar que apareszan las flechas de regresar, avanzar y recargar la página, es que no me aparecen, gracias y suerte.

[@joseluisgutierrez1317]

Muy súper, quiero saber si puedo hacer lo mismo pero para convertir de web a app de Android y iOS. O principalmente android, gracias... Saludos!

[@marloncamacho501]

Hola saludos tengo una duda si hago eso con mi pagina wed cada actualización que yo haga o cada cosa que suba se actualizaría también allí en la aplicación de escritorio?

[@danielclow]

Si creo mi app del sitio de Fazt con Nativefier y luego Fazt sube una actualización al sitio, mi app tendrá esa actualización o tendré que crear una nueva? :O

[@downtinho2829]

Te hago una consulta, yo quiero modificar un juego web para añadirle cosas pero no estaria sabiendo donde y como hacerlo, tienes un video sobre ello? Podrias explicarme?

[@JossMariaca]

Hola amigo! ¿Se podría personalizar lo que se ve dentro de la web con esto? es decir bloquear algunas secciones, limitar accesos, personalizar imágenes.

[@code_castle]

Interesante... 🤔

[@4everzapy]

perdon por la ignorancia pero no queda igual que en el navegador google ir a crear acceso directo y activar ejecutar en ventana?

[@lucasbarrientos8778]

Hola es posible realizar esto mismo, pero con algún sitio web en código nativo?

[@pablomateo8652]

Hola que tal? Que comando puedo usar para que me permita ventanas emergentes de mi pagina web??

[@angel-lc5eq]

Se puede usar para una aplicacion que no esta desplegada!? Que tengo en local!? Para empaquetarla de manera rapida!?

[@pedromorel5614]

Si mi aplicación web la tengo local puedo hacer la conversion de todos modos?

[@DienerNoUta]

Nice, Por cierto, aprovecho que mencionas electron para preguntar algo y es que hace un tiempo vi una discusión en un foro de Linux que decían que no recomiendan usar programas creados electron, ya que consume mucho. Es realmente cierto o es una exageración?

[@FaztCode]

Ese tema siempre se menciona porque electrón como se ejecuta dentro de un navegador de chromium, tiende a consumir mucha ram si no se optimiza, pero esto es así por el diseño de chromium. Al día de hoy hay aplicaciones que están muy bien optimizadas, como vscode y que manejan bien el uso de recursos por lo general. Aunque si se compara con native el código nativo siempre será más rápido. El problema es la experiencia de desarrollo, en nativo tienes que desarrollar todo desde cero, mientras que en web ya tienes módulos y apis del navegador que ya te dan prácticamente todo hecho, como reconocimiento de voz, comunicación en tiempo real, y la interfaz puede ser con tu framework favorito. Es al final elegir rendimiento o Experiencia de desarrollo

[@victorgenao1968]

Buenas noches líder, he realizado estás acciones para convertir una web de gestión de ventas en la que debo iniciar sección, pero cuando voy a iniciar me envía a la web al ingresar los datos me da error y no me abre en la app creada, ¿Que hago?

[@victorgenao1968]

Hola Fazt pues espero tu respuesta, por qué no puedo iniciar seccion luego de convertir una web en weapp, osea si la pagina requieres de un inicio se sección no me lo permite y me redirige a una web y luego me da error, ¿Que puedo hacer?

[@andrest.7625]

ORO

[@eduardogz1422]

Esto puede funcionar con una página creada de manera local?

[@Deus-lo-Vuilt]

Bien , primer comentario , gracias por el video fazt , un saludo !

[@juanduenas2337]

Gracias, como herramienta no está mal la verdad, El WhatsApp Web me va 1000 veces más rápido que la aplicación nativa.

[@gordosjuguetesycoleccionables]

tengo instalado nodejs y toda esa onda pero al momento de abrir la app solo parpadea pero se queda en gris! ayuda porfa

[@JhonnyPrz]

Excelente

[@Nicomicosis]

buenas, no conozco nada sobre lenguaje queria saber si podia convertir una web (ya no actualiza contenido) como una aplicacion para poder visualizarla offline, si bien conozco el metodo de cualquier navegador "clic derecho> guardar pagina" quiero darle una mejora para que resulte mas "compacta" es decir solo debo ingresar a un .exe y no a una carpeta para acceder a ella. espero que se entienda. gracias

[@adrianwilliams8220]

Hola alguien lo probo?, en mi caso lo hago desde una aplicación hecha con react, en ubuntu va perfecto, pero en windows surge un problema, la aplicacion muestra algunos alert con mensajes para el usuario pero luego de dar aceptar la interfaz pierde el foco y no recibe nada desde teclado en los inputs a menos q la minimize y la maximize algo muy molesto.

[@fantasma1754]

y se puede convertir una aplicacion de escritorio a web ?

[@NegusMarko]

Hola, estoy creando un juego en Html y JS, esto podría funcionar para hacer ese juego offline? O debería trabajar primero con manifest y con pwa para luego convertirlo a ejecutable?? Gracias de antemano

[@bryanflores4284]

Si pusiste hacerlo? tambien ando batallando con eso

[@franciscorojas7273]

puedo usar esto pero con una pagina que tengo en local?

[@kantyDarius]

es posible configurar el puerto? eej: locahost:3002 etc

[@albino9370]

bro estaba empezando aprender React, pero me entro una duda, que recomiendas tu aprender primero Nodejs, Angular o React ?

[@FaztCode]

Personalmente te recomendaria aprender Nodejs primero y luego React. Porque este ultimo usa muchos conceptos y herramientas de Nodejs que tarde o temprano te encontraras.

[@adriantorres8440]

Podrias hacer una para movil.

[@scriptload1993]

FAZT podrás crear un Crud expo-sqlite ??

[@yeralandre8627]

Yo usé ese módulo hace un tiempo jaja, lo único que me disgustó de ello es el hecho de que no tiene botones de regresar o recargar la página, a mi punto de vista eso es muy útil, por lo demás me parece algo más profesional o estético para una web.

[@pierrecadeaudolce9507]

Los botones de la ventana están ocultos, si quieres mostrarles tienes que usar la tecla Alt, en view están esas opciones que dices.

[@dantech9924]

Gracias fazt, que tecnologías utilizaste para tu web?

[@FaztCode]

Mi web usa Nextjs, Mongodb, GraphQL, Typescript :)

[@andriodenavarrete4495]

Y si necesito usar una variable de entorno?

[@user-it3et9dl2i]

Se puede hacer con un localhost?

[@TheErudito]

Intenta hacer un video con djando mongo un crud estaba yo intentado pero me dice q el motor de mongo no esta disponible en djando busque muchas ayuda y ninguna funciono

[@josejuniorlalupuiman3833]

Y de escritorio a web?

[@tonofalco12]

Funcionará con app creadas con React también? Supongo que primero debería subirla a un servidor

[@zuludev]

Si no la quieres subir podrías probar con esto kzbin.info/www/bejne/jWbQiXppo5eMo68

[@LittleMicho]

Hola fazt :D. Una preguntita :'3 Hay forma de poder crear interfaces así en aplicaciones de escritorio pero sin herramientas web? Tengo entendido que así el rendimiento es mejor :' 3

[@zuludev]

Mira intenta con esto kzbin.info/www/bejne/jWbQiXppo5eMo68

[@cainimintesao]

Enséñenos cómo recibir notificaciones de estas aplicaciones en el escritorio, por favor!

[@jostingrados3526]

Puedes hacer un video de como empaquetar todo y añadir un instalador?

[@FaztCode]

Este proyecto actualmente ha sido archivado, por lo que ahora la unica opcion para poder crear apps de escritorio es usando Electron o Tauri kzbin.info/www/bejne/iILce2aXq86ZibM github.com/nativefier/nativefier

[@Alex.Two_]

Quiero hacer uno con arquitectura x32bits me pueden ayudar no medeja.

[@carlosramos-yn4yb]

Hola Fazt.. me sale este mensaje cuando ejecuto el exe.. "No se encuentra el punto de entrada del procedimento Discard\VirtuaMemory en la biblioteca de vínculos dínamicos C:\User\asus\desktop\Google-vin32-x64\Google.exe".... Tengo instalado el Visual C++ Redistributable para Visual Studio 2015 14.0.23026

[@mauriciomich]

Espectacular el video pero creo que NativeFier quedo sin mantenimiento desde Sep-2023 en github

[@Ruelast]

como seria si la apppweb está protegida con un login?, los componentes que están despues del login no los empaqueta? o simplemente no funciana?

[@FaztCode]

Si lo notas lo unico que hace la herramienta es colocar un sitio desplegado dentro de un navegador, asi que a partir de alli, cualquier ruta protegida, o pagina es lo mismo.

[@cristiansosa6608]

Está muy bueno, pero no me deja iniciar seción con mí cuenta de Google en la web que convertí con esto.

[@MauryConLimon]

Yo quiero hacer algo similar pero en viceversa quiero convertir mi software a web

[@edustreamimg]

es como hacer una spa embebida en un webview a partir de un sitio no?

[@FaztCode]

asi es :)

[@jairopr]

Sin embargo necesita de conexión a internet, hay alguna alternativa para que no sea necesaria la conexión?

[@FaztCode]

en ese caso tendrias que desarrollar con algun framework tipo electron o similares.

[@jairopr]

​@@FaztCodeMe podrías contestar esta pregunta. Ya que se esta ejecutando la aplicación desde el pc, pero funciona con la base de datos y la información de un hosting. La aplicación se consideraría hibrida?

[@lin-dq2up]

me sale el error de 56 packages are looking for funding run `npm fund` for details

[@Son_Goku504]

"npm" no se reconoce como un comando interno o externo, programa o archivo por lotes ejecutable. alguna solucion?

[@valle_na]

Para poder utilizar npm es necesario tener instalado node.js

[@jackyactayo7375]

Si es un sitio web estática , funcionaria sin internet la app ?

[@code_castle]

Y cuando hagas búsqueda de Google sin internet te saldrá el Dinosaurio 🦖

[@studioandreisweb]

Yo lo acabo de probar con mi app y me funciono sin internet

[@PterPmntaM]

Buen video, pero que diferencia tiene esto, de la posibilidad que ya tienen los navegadores, de permitir crear aplicaciones a partir de una página web como una opción del mismo navegador.

[@elrafineitorxd5400]

¿Podrías dar más detalles de esto por favor? No lo había oído antes.

[@PterPmntaM]

@@elrafineitorxd5400 Claro, todos los navegadores basados en chromium permiten eso, puedes instalar un sitio web como una aplicación de escritorio. Te vas a los tres puntos donde se despliega el menú del navegador con opciones, te va a salir una opción que se llama como aplicaciones, y ahí sale un submenú, ahí te va a salir una opción que se llama instalar como aplicación, y listo, eso es todo.

[@honeyboy_dev]

a lo sumo se puede diferenciar en que la app que creas con electrón se vuelve independiente en cambio usando un navegador conviertes una web en una app haces que esa app sea una extensión del navegador, haciendo que si desinstalas el navegador no se pueda usar la app, según lo que entendí tu comentario.

[@PterPmntaM]

@@honeyboy_dev Pero si usas electron, estas empaquetando la pagina en un navegador, y lo que digo yo, no es extension, es una web app como si fuera instalada. De igual forma si, que si quito el navegador, pero quien quitaria el navegadot

[@leonardofernandez8905]

pero termina siendo un .exe no mas que abre el nav y va ala web no es asi?

[@FaztCode]

Así es, es como colocar toda la web en un navegador y empaquetarlo. De hecho esto esta basado en electron, asi que lo unico que hace por asi decirlo es facilitarte empaquetar el proyecto y nada mas :)

[@victorgenao1968]

Espero me de respuestas por favor porque es importante

[@isaacmartinezrizo]

se podrá con una web que no este alojada?

[@FaztCode]

En ese caso seria ir mejor por electron, esta herramienta usa electron solo que lo hace con sitios desplegados :)

[@isaacmartinezrizo]

@@FaztCode Muchas gracias

[@TheAc24]

eso para mac?

[@FaztCode]

Pra cualquier sistema era en realidad, pero el proyecto ya está desfasado así que ya no es una opción viable

[@gerardopacheco9521]

tiene otro canal de youtube?

[@FaztCode]

Si amigo, son 2, este y kzbin.info :)

[@jorge1869]

Lo único negativo q le veo es q no funciona offline, pero igual es muy útil en algunos escenarios. Sldos

[@FaztCode]

Asi es, es un comando sencillo simplemente, si se requiere offline, estaria electron y similares :)

[@marcovelasquez3802]

wails, wails, usa wails XD

[@FaztCode]

👍

[@alejandrohernandezanguiano1248]

Comunidad como están , ¿Alguien sabe empaquetar todos esos esos archivos en un solo ejecutable .exe? 😅

[@tiwiinzo07]

No funciona

[@FaztCode]

Tienes algún error que te da la consola?

[@AT-rv7kt]

eso no es ilegal?

[@chefaku]

Por lo que tengo entendido funciona como un navegador web y solo accede a la url, asi que no veo la ilegalidad

[@TetradotoxinaOficial]

para eso esta la licencia. Revisar el apartado de distribución.

[@code_castle]

Acaso estas hackeando el Pentágono?? Es casi que darle al menú del navegador y decir convertir en App de escritorio...

[@Dory55s]

Muy buen video, excelente pero se puede hacer lo mismo en una aplicación app pls, saludos fazt salúdame. nice

[@fantasma1754]

y se puede convertir una aplicacion de escritorio a web ?