Creating DESKTOP apps with Angular is easier than you think

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

[@ukaszmichalak7709]

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" },

[@JoshuaMorony]

Thanks I'll give that a shot, I was under the impression it didn't work

[@JoshuaMorony]

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

[@HishamButeen]

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.

[@JoshuaMorony]

@@HishamButeen yes thank you, I was able to get it to work

[@JamesJansson]

Definitely want to see more about Electron and Angular!

[@rembautimes8808]

Oh yes I hope we can use electron to build iPad app with angular

[@filipefreire6517]

Yes i want to see much more of this nx electron and angular

[@filipefreire6517]

Working on my own editor

[@nikolitilden8224]

YES PLEASE DEEP DIVE INTO BUILDING ELECTRON APPS WITH ANGULAR!

[@sickboy1776]

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!

[@colemeyer1044]

Such an awesome video, and such a relevant topic. Please continue with this topic

[@JoshuaMorony]

Next newsletter goes out tomorrow: mobirony.ck.page/4a331b9076

[@ilyesbrh7667]

The explanation is so net & clean, thanks for the amazing video, please continue this series

[@jeffnikelson5824]

amazing video really want to try it out myself now pls more of this ❤

[@IgorBondarenko]

need more !!!! Nice video

[@mohamedbenhamouda1155]

Definitely it's a good idea "more Electron & Angular"

[@Adridzukic]

Great stuff!!!

[@Nemo-yt1gi]

good timing, was already considering redoing our angular application with electron. Publishing application updates though can be a bit tedious.

[@deadlyecho]

I don't know why you have so few subscribers compared to these top notch quality angular content 👌

[@captainmorgan8258]

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?

[@lolobirolo]

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!

[@eliotistube]

Yes Joshua, more electron stuff please!

[@Stevexupen]

Can you do comparison video comparing electron and tauri?

[@cesarqp]

Please more videos about Electron and Angular 👍👍

[@eptic-c]

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.

[@souravsaraf1230]

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 ?

[@JoshuaMorony]

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.

[@victorgarcia3526]

What if you want ssr and a desktop app?

[@dimakostyuk1508]

Thanks for the video! Are you considering Tauri as a desktop app framework instead of Electron?

[@JoshuaMorony]

I'll probably see this project out with Electron, but I'll likely try Tauri out later (maybe I could try a rewrite)

[@HishamButeen]

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)

[@JoshuaMorony]

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

[@o_glethorpe]

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.

[@JoshuaMorony]

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

[@benceszigeti5922]

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.

[@cuznerdexter]

Been using Angular for years. Need to try using it again with Electron. 👍

[@user-wz5qe7hc1v]

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!

[@toxaq]

I added an explicit node_modules alias to tsconfig for a similar problem I had.

[@JayWolters]

Dive, Dive, Dive!

[@SiddharthSingh-mj4um]

Hi Joshua , Do u have any full stack.Course , if not please make it ,

[@JoshuaMorony]

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"

[@RomanBorowinski]

Good one. I wouldnt mind seeing how you integrate some of the native APIs into your app

[@JoshuaMorony]

I'll definitely do a follow up vid with my actual app

[@TheTom265]

Yes more Electron please 😊

[@sushantkunkekar2155]

Plz continue more on mono repo and electron JS

[@MrMagrok]

Yeah, please more Videos about angular and Electron. Complex intercommunication and multiple renderer Prozesses in the background without a Window like vsc.

[@dayronalfaro9461]

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

[@nejmaljamal1281]

Yes please

[@razvan-mihaiilie7001]

Played with the electron + Angular but your use of nx its kind of complicated

[@tranquillityEnthusiast]

I switched to tauri, because bundle size with angular with electron is huge

[@JoshuaMorony]

I forgot about Tauri, will definitely check it out at some point

[@KamelJabber1]

Yea please!

[@TayambaMwanza]

Have you tried Tauri?

[@JoshuaMorony]

No I hadn't considered it initially for this project but I'll likely give it a try at some point

[@gamingxsvssdeva4245]

try tauri too

[@lukebennett3189]

Tied to subscribe to your newsletter, but I am getting a 500 response from the submit button

[@Alex-bc3xe]

Nice but I think flutter is a much better alternative for desktop apps and for sure faster

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

[@yanko694]

Tried Tauri yet?

[@akuoko_konadu]

We will love Tauri + Angular too 🌝

[@wolfisraging]

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.

[@JoshuaMorony]

At least for now I'll probably do more vids by showcasing various aspects of the actual app I'm building with Angular/Electron

[@wolfisraging]

@@JoshuaMorony Sure man, you know best! Never had a doubt

[@koles32]

Isnt it better to just use PWA?

[@JoshuaMorony]

In my case, I need Electron so that I access the native filesystem and run commands on the users machine

[@toxaq]

Did you look at Tauri or Wails?

[@JoshuaMorony]

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.

[@toxaq]

@@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.

[@alanrutter3273]

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.

[@matejl92]

Why not just PWA?

[@JoshuaMorony]

For this particular app I need access to the native filesystem + the ability to execute commands on the users machine

[@matejl92]

@@JoshuaMorony I see, thanks for the reply. :)

[@ivanmaglica264]

Electron is awesome, don't let anyone else tell you otherwise.

[@djsargex7777]

Everything cool here cept for lame drake memes

[@TheOnlyJura]

lost me at "electron"

[@tleveque]

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.

[@Nagidid]

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?

[@JoshuaMorony]

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)