Building Ionic Desktop Apps with Capacitor and Electron
HTML-код
- Опубликовано: 5 авг 2024
- Let's build an Ionic desktop application using Capacitor APIs and Electron! We'll use IPC, add some Capacitor plugins and finally create a native package.
🔥Learn Ionic faster with the Ionic Academy: ionicacademy.com/
🎉 Get my Practical Ionic Book: devdactic.com/practical-ionic/
#############################
👨💻Want to read instead of watch?
Here's the full Ionic tutorial: devdactic.com/ionic-desktop-e...
🤷♂️Want more Ionic tutorials?
There you go: devdactic.com/
⚡️Take my 7 Day Ionic 4 Crash Course
ionicacademy.com/ionic-crash-...
#############################
❤️You can also find me...
on / simongrimm_
on / schlimmson
on / devdactic
############################# 
Наука
Hey Simon, would love to see a Electron desktop app which gets the data from an API when online, but stores it in localstorage or ionic storage for offline use
I love this Simon! I've used electron a few months ago and really could have done with a solid tutorial like this. And yes! - making another practical tutorial on this would be really really great
Thanks Calvin, yeah looks like an interesting topic based on all the comments!
Very helpful, thank you Simon, Great tutorial!
Thanks Simon, i could build Desktop based on your guidance, It was very helpful
Thank you. I used electron with my startup and it works on Mac, Linux, Windows and even on Raspberrt Pi.
Excellent!
Would love a real world example, Simon. Thank you. Great video!
Nice idea around Electron as starter. Thanks Simon.
No problem 👍
Thank you!! Very useful tutorial. You're great!
You're welcome!
Nice video Simon!! Thanks
Glad you enjoyed it
Is this tutorial still valid in 2022? :)
im trying to reproduce every step you are making and I cant make it to work? if not, is there any update?
Thank you
Awesome! - I'll give this a crack on a current project
Have fun!
Super cool👍
Yeah! Thanks great tutorial.. 👍
Glad you liked it!
Great video and thanks for writing the even shorter article which has everything in it. My question is about the Apple notarization, how is this done in Capacitor when building an Electron app for MacOS? In my current setup (using Meteor-desktop package) I use the "electron-notarize" package. TIA!
Thank you so much....you are the best
You're welcome!
wow, God like developer!! more electron desktop app video pls!!
I will try my best
@Ionic/Angular ❤
14:28 : You can use the Macs own recording program by typing all buttons together: command + shift + 5. Then you will come into the video recording mode. One the macbooks with touchbar you can use the touchbar to switch between area recording or full screen recording.
Do you recommend I need a MBP? :D Right now I need to record a tiny box on my iMac screen with code editor zoomed in 4 times since the screen resolution is way too big and there's no good option to easily downscale it on an iMac. Yeah I'm thinking about a lot of different options for a new setup, my fav is right now to get a powerful mac mini and purchase perhaps 1 big curved monitor instead of 2. But still waiting for Apple to update the MacMini CPU..
Awesome tutorial, but like the other commenters, it would be amazing if you can show us a more real world application. Maybe an app where you can sign in into google, connect to firebase or load some maps :)
Great tutorial Simon, I would personally really like a more real world example of an electron app 🙂
Vs code?
I guess, MS Teams is also built on this.
@@prafullajoshi8453 In the video Simon asks if we'd like to see a more real world example implemented, hence my comment.
Of course there are applications made using this technology.
@@luismpcunha I am trying to build one though for one of my client. Still in pilot phase, but hope it will be rolled out.
@@prafullajoshi8453 Good luck! I've also been testing Flutter desktop recently and it's very promising
great video
Thank you Zudha!
Hi Simon.. I'm trying to make a desktop app that use tcp socket (plane, no http stuff involved). So I can't find any tcp library in node or where else that I can use for it and work with electron. If you could give any comment .. I would appreciate it. .Regards
Hey Simon, i have uses electron app but we have to call method of electron app and get data to ionic / capacitor app can you please help me
Great Video Simon. Why do I see "[warn] The electron platform is deprecated!" when I run "npx cap add electron"?
They are currently not working on that part and will put it into a community maintained plugin in the next release AFAIK.
top!
Hi Sir, Can you help out me to reduce the build size of desktop app ??
Thanks Simon - great tutorial. Now Electron looks to be deprecated in Capacitor. There is a community project and it seems to be able to build MacOS Apps too, but I cannot get live reload working. Have you looked into that?
Yeah they focus on the other platforms for now and let this part be handled by the community. Might take another look at it in the future and see how it's going!
Another great advantage of using hybrid for some desktop applications, one question, all elements and typescript will be available on this electron platform?
Sure all Ionic components can be used!
We wanted an Electron application with ionic 5
please make a video on it.
with some use case like accessing maps and camera
Is Ionic Desktop App consumes more memory usage into your RAM?
Tanks for the tutorial and also: hoooly shiet batman, 192mb!
Hi @Simon, I am working with Ionic since years and when we have multiple applications build over time with multiple versions of Ionic/Angular I face the challenge of maintaining same with common Node and NPM versions on different machines. Specifically bundling applications for various platforms becomes very fragile when you setup a new machine altogether which has lates node environment...
Could you please share your thoughts on best strategies to handle these situations?
There are multiple programs that manage npm and node versions such as 'nvm'
Thank you Simon... Please, I'll love to see something more "real" using Electron.
Noted!
Does anybody know how to avoid the windows smart screen defender to pop up ?
Can anyone help me with this ?
I have problems with the routes that are executed by events, does anyone have an idea of how to fix it?
that is, links that use href work, but links that use the onclick event do not work.
I'd always recommend to use routerLinks instead of href with Angular!
How compile ionic capacitor electron atomic bomb for Linux & Windows tell me please.
where is this source? i want get it.
Hello Simon, an example of how to install an electron app on a device, and then update it on that device when a new version is published, would also be fantastic. You're the best :)
What plugin in installed on the code editor that puts icons next to file types ?
I just have VSCode Icons for my icon theme!
@@galaxies_dev thank you so much!
hey simon do you have any idea how to do it for cordova ?
No not really, best idea is Capacitor imho!
Hi Simon , I Really Want To Ask About Ionic Seriousness About Desktop Development.As in the New Capacitor Release Electron Is Not Even Touched
Yes Capacitor desktop support is back to beta, they focus for now on the other more important areas and afterwards again on desktop!
Hi, how can I create a DMG file?
What is the command to create the installer?
There's a package for that although I don't know if it's still up to date: github.com/electron-userland/electron-installer-dmg
hey simon, does it support with M1 chip?
I do think so, I have one as well .)
how to create electron plugin for capacitor?? are we seeing any video soon???
Hi, We are developing an Ionic app with sqllite, which is working fine, but when we convert it into desktop app we are getting error core.js:9110 ERROR Error: Uncaught (in promise): TypeError: Cannot read property 'openDatabase' of undefined
TypeError: Cannot read property 'openDatabase' of undefined
We really need help how to make ionic electron app with sqllite database. Please help.
I'm actually not sure if the SQLite db is available inside Electron, you might have to install an additional sqlite package to actually have the DB available!
LocalNotifications in capacitor is slightly diferent....
CAN YOU UPDATE THIS VIDEOS SO THAT WHEN I CONVERT THE IONIC APP TO ELETRON IT CAN CONNECT TO THE INTERNET
What reasons could lead a dev to make a desktop app instead of an online app ? I only see disadvantages (updates etc...). what are the advantages ? I think I miss something 🤔
I guess the driving force would be enterprise requirement. I'm also not a huge fan of it, but having the ability to go that route adds more power to the dev!
Could you do an update since Plugins are now deprecated? I'm having the most frustrating time.
Hi Simon, I tried to use your guide, but I think it is not relevant anymore, because a lot of things have changed in the Ionic platform. Can you upload a new tutorial on how to make a desktop application with Ionic?
Agree a lot has changed around Electron, will see what I can do!
@@galaxies_dev Thank you very much! love you videos!
i followed your steps but electron folder is not creating , i run this command
ionic start electronDesktopApp blank --type=angular --capcitor
cd electronDesktopApp
npm install ngx-electron electron
npm install electron-packager --save-dev
npx cap add electron
ionic build && npx cap copy
npx cap open electron
I'm facing the same problem. I don't know what to do. I made every tutorial and still have the problem with electron...
But how to automate this application using Java?
When I run my ionic project on android it work fine, but when I run it in electron it shows me error that "cordova_not_available" Did any one knows how to solve it??
did you find any solution ? i used electron packager andd electron winstaller but im getting corova not available
@@hannatawk106 type
npx cap sync
Then build and run, hope this will solve your problem
electron doesn't open and never shows any error
plz help
electron is not working, not creating electron folder using ionic 6
15:45 : Do you use Parallel Desktops? You can buy there a standalone licence and pay just once (don't buy the subscribtion ones!)
I used both bootcamp and parallels in the past but wasn't really happy back then.. Would like to get a regular (cheap) win pc next to a mac mini (what I described in the other comment). I think that would be a decent setup where I could also easily switch to Windows, not while recording but in general.
isnt there a desktop theme ? the buttons and all elements are way to big for a desktop app
Ionic 6 will come with better desktop support!
Hey Simon, would love to see a Electron desktop app which gets the data from an API when online, but stores it in localstorage or ionic storage for offline use