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" },
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.
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!
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)
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.
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?
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')
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.
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.
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!
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"
Yeah, please more Videos about angular and Electron. Complex intercommunication and multiple renderer Prozesses in the background without a Window like vsc.
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 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
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.
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.
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.
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)
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
@@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.
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!
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!
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
Such an awesome video, and such a relevant topic. Please continue with this topic
good timing, was already considering redoing our angular application with electron. Publishing application updates though can be a bit tedious.
Been using Angular for years. Need to try using it again with Electron. 👍
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.
Can you do comparison video comparing electron and tauri?
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?
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
Please more videos about Electron and Angular 👍👍
need more !!!! Nice video
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
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')
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.
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
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
Yes Joshua, more electron stuff please!
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.
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.
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"
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)
Great stuff!!!
Yes more Electron please 😊
Yeah, please more Videos about angular and Electron. Complex intercommunication and multiple renderer Prozesses in the background without a Window like vsc.
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
Definitely it's a good idea "more Electron & Angular"
Plz continue more on mono repo and electron JS
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!
amazing video
really want to try it out myself now
pls more of this ❤
Played with the electron + Angular but your use of nx its kind of complicated
The explanation is so net & clean, thanks for the amazing video, please continue this series
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
I don't know why you have so few subscribers compared to these top notch quality angular content 👌
Dive, Dive, Dive!
Tried Tauri yet?
Tied to subscribe to your newsletter, but I am getting a 500 response from the submit button
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.
We will love Tauri + Angular too 🌝
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
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
Yes please
Yea please!
try tauri too
Next newsletter goes out tomorrow: mobirony.ck.page/4a331b9076
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)