Creating DESKTOP apps with Angular is easier than you think

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

[@problemchild959]

@@HishamButeen I tried this and not sure if something changed in nx 19, but it thows an error with `browser` option cannot be an empty string.

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

[@ilyesbrh7667]

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

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

[@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!

[@deadlyecho]

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

[@Nemo-yt1gi]

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

[@eliotistube]

Yes Joshua, more electron stuff please!

[@cuznerdexter]

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

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

[@IgorBondarenko]

need more !!!! Nice video

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

[@jeffnikelson5824]

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

[@mohamedbenhamouda1155]

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

[@MrMagrok]

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

[@Stevexupen]

Can you do comparison video comparing electron and tauri?

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

[@TheTom265]

Yes more Electron please 😊

[@cesarqp]

Please more videos about Electron and Angular 👍👍

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

[@Adridzukic]

Great stuff!!!

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

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

[@KamelJabber1]

Yea please!

[@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)

[@nejmaljamal1281]

Yes please

[@sushantkunkekar2155]

Plz continue more on mono repo and electron JS

[@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?

[@victorgarcia3526]

What if you want ssr and a desktop app?

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

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

[@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"

[@JoshuaMorony]

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

[@JayWolters]

Dive, Dive, Dive!

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?

[@svssdeva]

try tauri too

[@razvan-mihaiilie7001]

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

[@oddnuts5764]

I tried this today and I get the following error when building electron: nx run electron:build NX Cannot read properties of undefined (reading 'projects')

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

[@DevinClunn]

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.

[@akuoko_konadu]

We will love Tauri + Angular too 🌝

[@lukebennett3189]

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

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

[@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. :)

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

[@djsargex7777]

Everything cool here cept for lame drake memes

[@ivanmaglica264]

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

[@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)