Making modern GUIs with Python and ElectronJS

Learn to make a modern looking, cross platform desktop apps using ElectronJS with Python.
Use electronJS as a front end for your Python apps.
NodeJS: nodejs.org/en/
ElectronJS: electronjs.org
python-shell: www.npmjs.com/...
Code: github.com/Sou...

[@obamabinladen5106]

As far as I am concerned this is the only video of its kind . Helped me alot. Thank you sooo much .

[@thanatosor]

In a nutshell: use Python-Shell inside electron

[@pradhumnaguruprasad2418]

Hi. Thanks for the beautiful video on this one of a kind implementation. It would be helpful if you could show us on how to package the whole app and distribute it. As we use electron for cross-platform development. Thanks in advance for the packaging tutorial.

[@tech-preneurshipwithjeff5745]

Lovely post. I just learnt this new method of binding python and electron. I have been thinking of how to use python and electron for my new desktop application and you just came through with this perfect demonstration. Thanks alot

[@satyambhargav9661]

if you are referring the following video and using electron version 10 or above then you must add the following code in electron main.js: - const mainWindow = new BrowserWindow({ webPreferences: { nodeIntegration: true } }) otherwise electron will not be able to call your python file when you click a button on your HTML file.

[@mehulsolanki9435]

I referred a lot of videos and articles regarding electron to solve my problem. But, this was the best! Crisp and clear. Thank you soo much. Continue the good work 👌👌

[@valmormn]

Bro. I need to hang out more with smart people like you. Thank's a lot!

[@aryanshbhargavan2775]

@@justafighter1346 r/iamverysmart content

[@ElvenSkywalker]

An excellent tutorial. Possibly the only one online currently on using Python with Electron.

[@oxodao]

Yeah bc that's not how computer science works

[@Taki7o7]

If you see something on youtube, be sure it's not inefficient crap like this "combination" lmfao

[@revinprismane5476]

Finally I got the thing which I looking for centuries. Thanks!!!!!

[@FaizKhan-fm6kg]

lol

[@techcode6086]

Its just a toy code. won't be useful for production. You need to improve integration and then package software into installer package. if your code is not opensource, then you need to find a way to prevent other to view your code.

[@karantalwar9941]

How to package this python shell along with electron js in windows/linux ?

[@RobertLugg]

I think your question is most important. It seems a difficult task.

[@al_insight]

thanks for your idea and a lot more please don't let anyone comment discourage your efforts keep on helping other with your skills and knowledge.

[@davidturner1079]

Where is the LOVE button. This may be a little older, but this is AMAZINGLY PERFECT! Anyone starting should see this as one of their FIRST videos! THANK YOU!!!! THANK YOU! Thank You from the bottom of my heart!

[@CA_MKSingh]

Hello Sourav! Great job, Explained everything very clearly. Now, would you like to guide on how to pack this app as standalone installer. Thanks in advance bro

[@rafaelgpontes]

I also want this!!!! Please, answer!

[@minituff]

This is super helpful. How do I create a Windows installer that also includes the python code? I can only find tutorials that only include the gui folder.

[@Ladsyadsy]

Did you find solution to this?

[@mayanxoni]

Thanks a lot Sourav! Your video helped me a lot in turning my project beautiful in an easy way. Also, kudos to KZbin's algorithm 😁

[@martincastellon5701]

Great tutorial. Just left we with one question, what happens when you compile, does the engine folder compile together or the user has to manually place the folder along the builded .exe?

[@elliotth30]

Did you find the answer to this?

[@sandipbamrel2087]

lol this is pure genius ,, keep it up man we want more stuff like this.

[@iamakifislam]

I was finding a video like this for last 6 months!!

[@jagdishshetty4782]

Thanks for the explanation. Like the simplicity of the presentation.

[@manuzsanand]

Keep uploading such videos. You just earned a new subscriber.

[@manas_singh]

Is there a way to package everything into a single .exe or .msi using electron-packager? Including the python applets, specifically.

[@BoukariYameogo]

here is an explanation how to pack electron+python app to a standalone executable file medium.com/@abulka/electron-python-4e8c807bfa5e

[@techoxicated8933]

how would you install dependencies for python on client machine

[@theophilejr886]

Compilation

[@kagwad_in]

first install npm installl pip then pip install (dependencies)

[@senthilkumarpalanisamy365]

Excellent video bro. Please post more.

[@manoharkoya2524]

browser console error is "require is not defined " can anyone help it isn't working in electron window

[@jinhanaura]

how to export excutable file?

[@girishmohanas]

iam getting unable to reference python-shell even though it is installed and getting listed

[@SyfulIslamSharif]

Amazing! Thanks for sharing with us.

[@jsdfsfasfs]

Beware that electron apps consume lots of memory! Just something to consider

[@freemind108]

That's right

[@RamiAwar]

For the object detection, you could use TCP for message passing, running both a python process and the electron app, and allowing IPC using something like ZeroMQ, ZeroRPC, ... This would decrease the overhead of running the flask server by a bit.

[@SouravJohar]

Thanks, I'll try it out!

[@tgrem]

What about compile the app? There 15:30 you are seting a static path for python on your computer, if run this app in another comuter it wont run correctly. The same for compiling, i need to install python in the same exactly path you put in tha config object. Solution? Need i bundle python with electron?

[@rashidmehmood5008]

I am getting an error, require is not defined (uncaught reference error)

[@rookiesforwork3887]

Thanks for this great video. I just want to know about it's performance if it's kind of a inventory management app with lots of requests in realtime.

[@mauritiusholidays3564]

Hi there, I have same question. Have you find any answer in this regard ? Kindly do share with me, thanks.

[@天风-z6z]

I had installed requests,but it cannot find the module , events.js:182 Uncaught PythonShellError: ModuleNotFoundError: No module named 'requests'

[@privetvastutnestoyalo2339]

Qt is not ancient-looking. You can style it just like any web-based UI. There's also QML.

[@ttk-ainil]

qt is not free (for commercial use) though

[@chironlionel6770]

Qt is unhappily platform dependent..

[@vmohakrish]

Nice video Sourav!! .I would like to know what is the level of expertise I would need on NodeJs to do this.

[@nitinkumar29]

It is so confusing, there are so many JS based thing going on...AJAX, NodeJS, React and this and that ... ElectronJS. What to learn? Btw amazing video!

[@princedey6536]

Hey i did everything same as you, installed python-shell using command "npm install python-shell" but when executing, i get python is not a constructor. Any help will be highly appretiated.

[@donnyself5168]

check my comment, I had the same issue.

[@gkilm]

Nice. How do you deploy and package it into a working app? It worked until I deployed mine

[@danyalzaki4364]

i dont understand , is he changing the image file to bytes can't we just pass in the image value .... someone please help

[@amolkale1158]

Is it possible to bundle a flask application inside electron??

[@learnapplybuild]

You do not have all files in the GitHub repo....please add them

[@SouravJohar]

It's all there. I recently removed the face recognition part due to some technical reasons. If you want those files, you can get them from an earlier commit

[@granand]

Can I integrate this with database and excel ..I have a requirement & inspired by this I want to follow you but my end users use this app ..but one path should go to excel & other should write into database

[@Blure]

Awesome work, mate. Please more Python tutorials!

[@ramjadav1190]

if i create separate folders like you, i am getting error, please help!!

[@adrianmanuelorayeabrasaldo]

Hi is it possible to embed the camera/video to the GUI/Interface? instead of showing another window for the camera/video.

[@manjunathnagendra9014]

A great tutorial. I tried publishing app on the desktop with an icon. Once I click the icon app opens but only front-end works. the back-end python script not working.

[@SouravJohar]

I was able to successfully package this app as an executable. I plan to make a video about it in the coming days.

[@FranVarVar]

@@SouravJohar Hi Sourav, did you finally make the video?

[@abhishek-kapoor]

Local package.json exists, but node_modules missing, did you mean to install?

[@pushpendraverma1554]

I understood nothing, but i liked it...

[@lakshbk]

the git repo doesnt have the face detection files

[@rishavs1998]

Awesome and unique tutorial ❤️❤️

[@HumbleHistorian]

The comments are awesome :). So I'll check your video out bro !

[@ubaid9173]

This tutorial is very amazing and helpful but how we will build these files to turn it to exe.

[@ramjisubedi1991]

how can we create a Python Electron Database (mysql) app

[@mr_daru]

This is so cool, but i have a question, How can i protect source code? for example, if i want other people use my app but i don't want anyone can copy my code, what will be the best way to protect this?

[@thomh7434]

Good work man thank you for the tutorial ! Keep it up !

[@kayderl]

But can we compile this to become an app? Will the python program still run when we export electronjs to .exe or .app?

[@vishnusaibhonsle7367]

What about os module it will work?in this method

[@about2mount]

I like your presentation but I would question your use of Electron JS for anything related to IT GUI development. The whole point is security for Banking, Business Privacy and to prevent Foreign Espionage Hacks. If you have seen Googles Search Engine, it does this without Electron or JS. How? By Serving itself and searching websites with internal Bots and formatting that data back into itself. And is extremely fast. You can do this without Electron by simply serving a Python website localhost server and reading Post, Get and JS onclick events directly from forms or hyperlinks directly into Python without all these extra methods or bloated libraries and while being able to secure the back-end through Post fetching escape methods. Basically you had to write two entire files with several Classes and methods to do the handshake callbacks where Python itself only needs two to four lines per page for any form, button, hyperlink or onclick events to fetch data using the Post Method which is secure. Then all, it requires is Python with a few JS onclick events working the front end HTML without having to parse and secure data or without needing to implant a whole library within Python to do it. Electron is nearly as large as the Wx GUI Library besides. In fact you can do this much easier with Django and JS normally within the HTML only. Microsoft long ago did this with PowerPoint and Type Script for IT and the problem with using JavaScript for any IT GUI is security vulnerabilities which would be wide open for attack being on any server. And why they stopped using them. Even if using the Google Chrome API are still using a bound Port IP. Also Php has already tied into web GL, that allows it to work inside the server from the HTML5 Canvas and served by Php. And it is very secure. This only requires Php with the GL Library on any server and it allows JS also to do its magic on the HTML side. You can see this in use now within many Microsoft and Facebook Games. But for Gaming Electron is neat to use, but it will still work outside of Python which is not as Python Bloating. No Offence ! My advice is to latch onto Python's Kivy and GL because when this WASM converts everything over to Web-Assembly, JS is No More,, It is being replaced by the rapid Rust and C++ both running the browsers GUI, Nodes, and Dom directly from inside all browsers on the client side and server side. The whole reason for this is JS security injection issues costing businesses and Governments billion's of dollars and the bloating of all Browser Engines having to add new Parser methods for newer JS methods as Strings for these added securities, and having to convert all of these into their back-end language as pre loaded GUI Triggers which hampers request performance, optimization and has been a constant source for Hackers to do injection hacks without letup also. Soon it's Goodbye to JS !

[@sknfer]

Your comment is very interesting, may I follow you on Twitter?

[@DanielRios549]

The Electron works as an alternative to Qt and GTK, right?

[@ferrinheight]

Slightly misleading title. Whats actually going on is web based gui running python logic which also requires this to be hosted somewhere. For those looking to achieve this with just python take a look at Kivy which supports (win,lin,mac,android,ios). You can then use the ridiculously easy to use pyinstaller for win or mac. It is however good examples of how to integrate python as logic for web apps.

[@kkfreakko105]

hi, if i want to build an executable for this app, is it straightforward with an electron-packager? i was previously working on python app and created an exe with pyinstaller... just wondering if on an electron-python app, does an electron packager manages the packaging on the python part as well...?

[@techcode6086]

Appreciate Your efforts. nice work. But, This thing need much more improvements. keep it up.

[@kristypolymath1359]

Where is the GUI???

[@matteoaldrigo3810]

Ehy man, which do u used to create the html structure with button exc...?

[@Lucas-gg9yb]

Is this multiplataform?

[@arjunpukale3310]

Hi, please help me. I have a dependency model.pkl (pickle file) and my python script name is FinalModel.py which needs model.pkl. please tell me the command line code. Im getting errors.

[@meetravi007]

Hi, I want to create a frontend UI which can run bash script in background and show output in that UI, How can I make it , any guidance

[@jay199334]

"npm install python-shell" is not working, it is giving error.

[@sots_music]

Cool tutorial man... Nice work

[@nobisstudio8497]

bro how send multiple argument here: var _option={ scriptPath:path.join(__dirname,""), args:["1"]["2"] } and hwo to recieve multipla data : import sys,json,numpy as np temp1=sys.argv[1] def myfun(num1,num2): i=num1+" hello world !"+num2 return i print(myfun(temp1)) sys.stdout.flush()

[@himanish2006]

Thank you.. Good video.. Please connect Vue Js at the frontend ..

[@100Jim]

Hello my brother is creating a trading bot he wants me to create a GUI front end. would this be a good way?

[@Netbase2000]

Very helpful. Thank you

[@urmilshroff]

Very nice video man!

[@amreshgiri4933]

I was sick of PyQt. Thanks for introducing this.

[@artyomostrikov]

Hello, i got this message in dev console -- Failed to load resource: net::ERR_FILE_NOT_FOUND in weather.py:1. This is the line where i import requests. How can i install requests or any other python library in electron?

[@bennguyen1313]

Whether it's linux, mac or pc, after building the app to an .exe, does the end-user have to install electron or python for this to work? Or is the .exe file itself an install file rather than a portable .exe, that will install any (server-side) software needed to run?

[@PaperBenni]

How to make a simple utility take 3gb of ram.

[@sps014]

4gb now

[@thiagoa1851]

this app can be transformed in a electronjs desktop application? with a simple .exe installer

[@sknfer]

How can I compile it ??

[@daveried9616]

How would I test if it is connected to python and see the python errors?

[@saurabhjain3937]

My python script is not getting called and is not executing. If I execute python script directly it is working fine

[@roytex9901]

same

[@polyviospatseadis9777]

how to pass javascript elements on python fuction?

[@PrakashPrakash-sn3do]

Thankyou so much : awesome information man

[@helloworld8428]

Thank you so much! Great video!

[@hirenpatel6118]

What if you want to distribute the app to windows? You can't expect the end user to have node.js installed. Just curious how you'd go about doing it

[@chandherbb05]

Hiren Patel you should look up election-builder. I use it at work. They package the application to an installer. That you can you ship to your end users

[@StanleySalvatierra]

I think that I was seeing a python ReactJS tutorial :V until I recognize more carefully the electron icon.

[@TheWyntas]

lol

[@yohahnribeiro6029]

This is brilliant! Thanks a lot👍

[@harmeepatel]

how did u make those graphs move and that face detected animation....?? really interested in that....

[@SouravJohar]

Sweetalert.js and canvas.js respectively.

[@ZooZingZap]

Can we use same code for web app instead of desktop app? pls guide...

[@sallu21m]

Hi Saurav ....can you help in devp a desktop app for generating automatic question paper generator with python and mysql?? do let me know .....thanks

[@eirik857]

guys, i wanna use the facial recognition but i cant seem to get it to work on my pc.. any suggestions?

[@deepakkumaryadav24]

are you developing the web application or windows Desktop software? please excuse me if it sounds a silly question.

[@SouravJohar]

I'm developing a desktop application, using web development tools like HTML and JavaScript!

[@deepakkumaryadav24]

Can I deploy the same application as a window desktop app or download as exe file.

[@SouravJohar]

Yes certainly, electron works across various platforms as it runs on the Chromium engine. However, you would need to package the Python part as well. I recommend PyInstaller for that.

[@bluesdog88]

Will this work on a pc without flask/json etc?

[@viralvideos9227]

Bro, I have some doughts if we use that will it make our application run slower

[@helloworld8428]

AMAZING VIDEO! THANK YOU SO MUCH! ME TOO, FROM INDIA

[@ChumX100]

So Electron for the interface and some callbacks that start python processes. Not enough for more interactive apps. I still believe Jupyter + Ipywidgets create more powerful python apps in the browser.

[@arlindburnutciu1311]

Can you please update the Git, there is no face recognition... thnx

[@MJFernandoIII]

the installation process is a bit confusing for me