Creating DESKTOP apps with Angular is easier than you think
Вставка
- Опубліковано 22 чер 2024
- My Angular course: angularstart.com/
Getting a native desktop application up and running with Electron and Angular is surprisingly quick. In this video, we make use of these frameworks, in conjunction with Nx, to create the basic scaffolding required to create desktop applications with web tech
Get weekly content and tips exclusive to my newsletter: mobirony.ck.page/4a331b9076
Want to build mobile apps with Angular?: ionicstart.com
0:00 Introduction
1:01 Project structure
1:32 Setting up the project
2:27 Extra configuration
3:46 Improving DX
#angular #electron
- More tutorials: modernangular.com
- Follow me on Twitter: / joshuamorony
You can redefine angular's output not be nested in "browser" folder in angular.json using
"options": {
"outputPath": {
"base": "dist/META-INF/resources", //some java specific path - not important
"browser": "",
"server": "server",
"media": "media"
},
Thanks I'll give that a shot, I was under the impression it didn't work
Can confirm this works without needing to switch builders! (to anyone reading this, just set something like "dist/apps/renderer" as the base and "" as browser
I've already mentioned in my comment that it's working as expected with the below configuration:
"builder": "@angular-devkit/build-angular:application",
"options": {
"outputPath": {
"base": "public/web",
"browser": ""
},
...
},
An output example: is public/web/index.html.
@JoshuaMorony, did it work for you? If not, I can share with you my repository privately.
@@HishamButeen yes thank you, I was able to get it to work
Definitely want to see more about Electron and Angular!
Oh yes I hope we can use electron to build iPad app with angular
Yes i want to see much more of this nx electron and angular
Working on my own editor
YES PLEASE DEEP DIVE INTO BUILDING ELECTRON APPS WITH ANGULAR!
Next newsletter goes out tomorrow: mobirony.ck.page/4a331b9076
Please do continue making more videos on working with angular and electron (especially in an Nx monorepo env)
plus I'd love to see and learn working with native api's on electron
you're the best!
Such an awesome video, and such a relevant topic. Please continue with this topic
need more !!!! Nice video
Great stuff!!!
amazing video
really want to try it out myself now
pls more of this ❤
The explanation is so net & clean, thanks for the amazing video, please continue this series
Definitely it's a good idea "more Electron & Angular"
Great video! You can still use the application builder. "outputPath" will then be an object with a "base" property set to the folder you want, and a "browser" property set to an empty string. This will ensure it behaves exactly as you want and it won't create a browser folder anymore. On another note, the new media folder is internesting! Check it out if you haven't already. (N.B: Using latest angular release)
Thanks I'll check it out, I was under the impression setting it to an empty string didn't work but I'll try that
IDK what happend but recently something shot to my mind that i need to build an electron app, then this happen! Thanks man! Definitely need more of this!
I don't know why you have so few subscribers compared to these top notch quality angular content 👌
Yes Joshua, more electron stuff please!
Been using Angular for years. Need to try using it again with Electron. 👍
good timing, was already considering redoing our angular application with electron. Publishing application updates though can be a bit tedious.
Please more videos about Electron and Angular 👍👍
Nice video , can you tell what was the executable file size (.exe file size or whatever ur OS has) ? Also, will the app work without any setup steps if u just share the exe file with anybody ?
The empty/default project in the video creates a package that is 431MB, and I don't know all that much about distribution/approaches steps yet. This video doesn't include the make process (although there is configurations for it by default) which I believe handles creating the actual installers.
Great video. Nice to see there is a plugin for nx, back in the day, I built an electron app using angular 2, and it was a pain. Tks for sharing.
I was very happy to see this plugin existed, would have saved me *a lot* of time figuring out how to get it all set up nicely
Thanks for the video! Are you considering Tauri as a desktop app framework instead of Electron?
I'll probably see this project out with Electron, but I'll likely try Tauri out later (maybe I could try a rewrite)
Hi Joshua! Great content as always!
Can you please help me with my issue? Im trying to upgrade an application from Angular 16 to 17, and the problem is with new SSR approach i get "localStorage is not defined" error.
What would be the best solution for that? Wrapping all uses of localStorage in smth to use them on the client side, moving away from using localStaroage at all (i have it quite a lot in the project) or maybe something else will help?
Yes more Electron please 😊
Hi Joshua ,
Do u have any full stack.Course , if not please make it ,
Hey, no not really - Angular Start does include some stuff on integrating backends/Firebase/third party apis, but I wouldn't really call it a "full stack course"
What if you want ssr and a desktop app?
One gotcha i found when doing angular and electron together is ng test is broken if you import node packages in anything linked to any of your .spec tests. I ended up changing the name of tests of the electron portion of the app and testing those with jest. Let me know if you can find a better fix for that!
I added an explicit node_modules alias to tsconfig for a similar problem I had.
Good one. I wouldnt mind seeing how you integrate some of the native APIs into your app
I'll definitely do a follow up vid with my actual app
Can you do comparison video comparing electron and tauri?
Plz continue more on mono repo and electron JS
We will love Tauri + Angular too 🌝
I switched to tauri, because bundle size with angular with electron is huge
I forgot about Tauri, will definitely check it out at some point
Have you tried Tauri?
No I hadn't considered it initially for this project but I'll likely give it a try at some point
I always find electron very interesting but I always think what to build and what not to build, It would be nice to see a series starting with a good research about what to build what are the limitations etc, I always run to this channel to learn about the better way to do angulr apps heheh thx JM
Definitely interested in more videos since, currently I'm working on an existing app that feels like outdated to me and my task is to insert an auto updater functionality for all Mac Windows and Linux but Im struggling to make it work since I also need to install azcopy as prerequisite during installation. I didnt know anything about electron before but now I definitely think I should create a new version and move everything to that v17 and it would save a lot of headaches for me.
Definitely continue this series, I have an idea, how about a chess/snake game built with angular which we're able to download and install on both MacOS, Windows & Linux using electron. :) Dream come true type of playlist you know.
At least for now I'll probably do more vids by showcasing various aspects of the actual app I'm building with Angular/Electron
@@JoshuaMorony Sure man, you know best! Never had a doubt
Yeah, please more Videos about angular and Electron. Complex intercommunication and multiple renderer Prozesses in the background without a Window like vsc.
Played with the electron + Angular but your use of nx its kind of complicated
Dive, Dive, Dive!
Yes please
try tauri too
Tried Tauri yet?
Yea please!
Tied to subscribe to your newsletter, but I am getting a 500 response from the submit button
Electron is ok, but if you’re not afraid of writing just a little bit of rust, Tauri is sooo much easier to setup and use
Isnt it better to just use PWA?
In my case, I need Electron so that I access the native filesystem and run commands on the users machine
Did you look at Tauri or Wails?
I haven't properly looked a Tauri, I'm just aware of its existence and Wails I hadn't actually heard of. I am learning Go at the moment though so could be interesting.
@@JoshuaMorony I fell into the Tauri hype train to try a demo app but found it a bit overkill for the benefit. Wails was more approachable but the docs are horendous.
I like more the approach of Wails or Tauri ( but prefer Wails because it is written in go ) and instead of having a whole browser for a simple app, it uses a WebView and it is much faster. Also, they have backends in statically compiled and more serious languages, go and rust compared to JS. I have no hate for JS, i just like to use it for what it was made for.
Nice but I think flutter is a much better alternative for desktop apps and for sure faster
I always enjoy your content and I completed your angular course but please SLOW down. It’s really hard to focus on what you’re doing or saying because it’s so damn fast.
Why not just PWA?
For this particular app I need access to the native filesystem + the ability to execute commands on the users machine
@@JoshuaMorony I see, thanks for the reply. :)
Electron is awesome, don't let anyone else tell you otherwise.
Everything cool here cept for lame drake memes
lost me at "electron"
Constructive comment: I think you're going a way too fast. It is really hard to follow. This video should be twice as long. Do the same thing but in real time.
Hey Josh, Im having this problem when running the 'npm install nx-electron electron-builder --save-dev' command:
npm error code ERESOLVE
npm error ERESOLVE unable to resolve dependency tree
npm error
npm error While resolving: @myorg/source@0.0.0
npm error Found: @nx/workspace@19.0.4
npm error node_modules/@nx/workspace
npm error dev @nx/workspace@"19.0.4" from the root project
npm error
npm error Could not resolve dependency:
npm error peer @nx/workspace@"^18" from nx-electron@18.0.1
npm error node_modules/nx-electron
npm error dev nx-electron@"*" from the root project
npm error
npm error Fix the upstream dependency conflict, or retry
npm error this command with --force or --legacy-peer-deps
npm error to accept an incorrect (and potentially broken) dependency resolution.
npm error
npm error
npm error For a full report see:
npm error C:\Users\Usuario\AppData\Local
pm-cache\_logs\2024-05-18T20_11_22_076Z-eresolve-report.txt
npm error A complete log of this run can be found in: C:\Users\Usuario\AppData\Local
pm-cache\_logs\2024-05-18T20_11_22_076Z-debug-0.log
What should I do in this case?
Looks like Nx 19 has just been released and your project is using that, so you would either need to use Nx 18 for now, or wait for nx-electron to be updated, or use --force/---legacy-peer-deps to just brute force past the error (which may or may not have ill effects)