Hey, I am stuck with routing issues with bootstrap 4 and angular5+ electron. It goes freeze for normal route link, not sure what i am doing wrong. I would be happy if you address elements such as navbar, menu and routing on your videos so i can rectify my mistake. Thanks, I am your new subscriber.
Hey , Im trying to do notification but its not working , not showing there not any error in console log and also the btn click is working properly but the notification is not showing on the screen i also followed the written tutorial but it same as early what to do? any suggestions please!
I am writing a custom inventory management and control application for personal use and was banging my head against the desk over the IPC stuff in Electron. I'm a developer of 30+ years and I'm also learning Electron for the first time. This tutorial explained perfectly on how to go about sending those IPC message events back and forth. I just wanted to send you a huge Thank You! I'm now a subscriber and look forward to your courses.
Short and Excellent. That's what I called a "GREAT TUTORIAL". Nice montage. No 'emm..', no 'aaa'. Everything is *clean* and *understandable.* I just love you. Thanks for your work. *Thumbs up from Gogol.*
Amazing.. I have been meaning to try Electron for more than a year now, and You tutorial has started the fire.. Thanks for laying it all out and answering so many of my question right in the video!! Kudos!!
Those who're wondering why @35:13 the button is not working, below is the solution: *Just change* let win = new BrowserWindow({frame:false,alwaysOnTop:true,width:400,height:200, }) *this to* let win = new BrowserWindow({frame:false,alwaysOnTop:true,width:400,height:200, webPreferences: { nodeIntegration: true, enableRemoteModule: true } }) *After doing the above changes inside index.js file you will find that the close window button is working.*
For enabling *Close Window* in the second window, we need to enable nodeIntegration as it is false by default. Otherwise you get the error: *Uncaught ReferenceError: require is not defined*. Also, for the latest crypto-compare API, you need to write *res.data.USD* instead of *res.data.BTC.USD*.
for anyone who cannot open or close the add window: in index.js change let win = new BrowserWindow({frame:false,alwaysOnTop:true,width:400,height:200, }) to let win = new BrowserWindow({ frame: false, alwaysOnTop: true, width: 400, height: 200, webPreferences: { nodeIntegration: true, contextIsolation: false, enableRemoteModule: true } }) and in main.js change the new "function createWindow()" to this: function createWindow() { const win = new BrowserWindow({ width: 800, height: 600, webPreferences: { nodeIntegration: true, contextIsolation: false, enableRemoteModule: true, } }) win.loadFile("src/index.html") in Electron Version "12.0.7" you need this.
Hey Gary, A little tip for Visual Studio Code: if you want to quickly create an HTML document layout, simply create the new HTML file and type *"!"* (without quotes) on the first line, followed by pressing the *TAB* key on the keyboard. It will automatically build out a basic HTML structure for you.
OMG this.. is everything i have ever wanted in app development. how had i not heard of this before? if it could run on Powershell code, or .net it would be a dream come true.
If anyone is getting a win not defined error, it's because of the new quick start code uses MainWindow not win so in your Main.js change the ipc to : ipc.on('update-notify-value', function(event,arg){ mainWindow.webContents.send('targetPriceVal', arg) })
How to make it like these desktop apps?: - many Steam Game Launchers have a complete own window appearance, like a custom outer form (f. ex. Paladins shows its logo outside the app) (think Google has a image of the launcher) Really good explained video! Thanks for that!
If you have Menu error: ReferenceError: Menu is not defined, do the following: Add: const { Menu } = require('electron') Paste this above the line that states: var menu = Menu.buildFromTemplate([ Now your menu will work!
**UPDATES** Use: const win = new BrowserWindow({ width: 800, height: 600, webPreferences: { nodeIntegration: true, contextIsolation: false, enableRemoteModule: true } } for creating BrowserWindow object in main.js Use: let win = new BrowserWindow({ frame: false, transparent: true, alwaysOnTop: true, width: 400, height: 200, webPreferences: { nodeIntegration: true, contextIsolation : false, enableRemoteModule: true } }) in your index.js and change add.css file to include: html, body { background: rgba(226, 226, 226. 0.5); height: 100%; opacity: 0.9; } Including "nodeIntegration" and "contextIsolation" removes your "Uncaught ReferenceError: require is not defined" that will show for index.js line 1 ( const electron = require("electron") ) "enableRemoteModule" let you use "const BrowserWindow = electron.remote.BrowserWindow" in index.js while removing the "Uncaught TypeError: Cannot read property 'BrowserWindow' of undefined at index.js:3" error [NOTE: I've read comments and need suggestion on nodeIntegration: true security issue, I know it is okay for this small local project but how did you modify if you need to resolve the security issue because not good practice AND of course electron.remote is deprecated as you'll the warning in the console if you have win.webContents.openDevTools() ("win" is BrowserWindow object)]
If you're looking for a way to automatically restart the server after every change, I found this useful script that uses nodemon. Add this to your package.json file: "dev": " nodemon --watch . --exec \"electron . --debug\" ", and then simply run `npm run dev` in your terminal.
Alright so if anyone watching in 2020, just a quick fix, JavaScript and node are disabled in the new frame so you have to explicitly set them to true, electron-builder is better and maintained for packaging.
I have been watching your videos about electron. They are perfect. Well done. I have quick question though. I am trying have a small webcam window on the top of the main window. Cam window will stay always on top of main window and can be moved around within the main window. cam window cannot be resized...etc. Where I struggle is to keep the webcam window within the main window. Could you please help me about it? Thank you,
Thanks for the great tutorials! Correct me if I’m wrong, but after reading the quick-start guide on electronjs I thought that MainProcess has to manage all the windows of an app. Does this mean you shouldn’t have created the “add” window in index.js but rather call main.js?
I am only around half-way through the tutorial and wondered the same thing! I'm not sure for the reason why you would want index.js to know anything about add.html... but I am currently just as confused as to why it was called 'add' in the first place. So far, the 'notify' button opens an 'add' window (that doesn't 'add' [yet!]), which is created in 'index'.
If anyone is having issues with the JavaScript not working on your add.html page, add 'webPreferences:{nodeIntegration: true}' to your BrowserWindow options. Example: let win = new remote.BrowserWindow( { transparent: true,webPreferences:{nodeIntegration: true},frame: false, alwaysOnTop: true, width: 400, height: 200 })
Garry, thank you. I am new to Electron and Web in general but experienced in native. I was wondering if you could give some advice. I want to wrap code written in C# into some kind of web wrapper. The wrapper will have to talk to some web service and communicate information (uploads/downloads/changes etc) back to a web or native app. Is Electron built for that and what other technologies are required for something like this?
TL;DR - index.js and src/main.js should be swapped for consistency of correspondence of view/controller (html/js) pairs. Otherwise, great tut :-) --- Doing some extra stuff, I tried to get `document` object in main.js and was stumped getting `document is not defined` error In fact, src/main.js and index.js in this tutorial should be swapped, so that index.js is the bootstrapping script, whereas main.js becomes the in-window rendering scripting, just as add.js corresponds to add.html That way, I could finally use win.webContent.send() to use a menu item from the newly renamed index.js to send data to the main window using ipcRenderer.on()
ATT MAC USERS: In OSX the first menu item MUST BE "Electron". You cannot change this behavior. So if you want a 'Menu' label as the second menu bar item. Eg. { label: 'Electron' }, {label: 'Menu', submenu: [{label: 'File'}, ....... etc....]. You can read about it here: github.com/electron/electron/blob/master/docs/api/menu.md#main-process
Around 45:00 my target price update wasn't working. I'd get an error about win not being declared. Even with 'let win' in my main.js, it didn't work. To fix it, I replaced 'let win' with 'var win = null' then in createWindow() replaced 'const win =...' with just 'win = ...' Problem is that declaring const win inside a function is only on the function scale, not the global scale. For our ipc.on to access win, win needs to be globally available. Don't know why let didn't work but oh well.
I had the same problem, but I made my createWindow function return the win value and store it in the global win which was declared with let and yeah it worked
For those who couldn't close the child window, try this in your index.js let win = new remote.BrowserWindow({ webPreferences: { nodeIntegration: true }, width: 400, height: 200 });
Notifications did not work for me either for (Windows 10 - 1803 update , electron 4.1.3) This fixed it. (Copied from electronjs.org/docs/tutorial/notifications#windows) On Windows 10: a shortcut to your app with an Application User Model ID must be installed to the Start Menu. This can be overkill during development, so adding node_modules\electron\dist\electron.exe to your Start Menu also does the trick. Navigate to the file in Explorer, right-click and 'Pin to Start Menu'. You will then need to add the line app.setAppUserModelId(process.execPath) to your main process to see notifications. On Windows 8.1 and Windows 8, a shortcut to your app with an Application User Model ID must be installed to the Start screen. Note, however, that it does not need to be pinned to the Start screen. On Windows 7, notifications work via a custom implementation which visually resembles the native one on newer systems. Electron attempts to automate the work around the Application User Model ID. When Electron is used together with the installation and update framework Squirrel, shortcuts will automatically be set correctly. Furthermore, Electron will detect that Squirrel was used and will automatically call app.setAppUserModelId() with the correct value. During development, you may have to call app.setAppUserModelId() yourself. Furthermore, in Windows 8, the maximum length for the notification body is 250 characters, with the Windows team recommending that notifications should be kept to 200 characters. That said, that limitation has been removed in Windows 10, with the Windows team asking developers to be reasonable. Attempting to send gigantic amounts of text to the API (thousands of characters) might result in instability.
Great Video... setup worked nicely on my Mac. However, at 14:38, I am unable to get a menu to show on my MacBook. I'm reading the documentation on Menus but it's not solving my issues. I'd love an updated video and Mac support! and any help to create a menu. Thanks!
Hey do you know if its possible in electron programming, for it to bring up a window if a mouse cursor is moved towards the edge of monitor?? ie.. similar to Windows "autohide" on the taskbars. Or do you need to use C++ to implement such a feature?
Hey Gray i might have asked late but would you please make an electron and vue js tutorial basically setup using vue cli 3 or whatever you can please, but the boilerplate has given me a lot of headache
Great toturial. I also had hard time with formatting once; here is what I got! in settings (Set default Tab to Space and adjust 4 or 2 spaces config) and install marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode and press Alt+Shift+F and vola :-)
Hey, thanks for awesome video. I tried this with existing Angular 6 application and I'm getting this error "Not allowed to load local resource: ". please help me.
Coming soon: Electron + Angular 5 / Electron + Vue.js. -- and intermediate Electron tutorials.
Hey Sorry For my comment , i realize that my timezone is further so im really sorry
No problem, yeah, it's 11 AM here. ;)
thanks for your reply i thought i was rude little bit...
so thank you for the electron .... i am amze to learn more about electron.....
Hey, I am stuck with routing issues with bootstrap 4 and angular5+ electron. It goes freeze for normal route link, not sure what i am doing wrong. I would be happy if you address elements such as navbar, menu and routing on your videos so i can rectify my mistake. Thanks, I am your new subscriber.
Hey , Im trying to do notification but its not working , not showing there not any error in console log and also the btn click is working properly but the notification is not showing on the screen i also followed the written tutorial but it same as early what to do? any suggestions please!
I am writing a custom inventory management and control application for personal use and was banging my head against the desk over the IPC stuff in Electron. I'm a developer of 30+ years and I'm also learning Electron for the first time. This tutorial explained perfectly on how to go about sending those IPC message events back and forth. I just wanted to send you a huge Thank You! I'm now a subscriber and look forward to your courses.
Short and Excellent. That's what I called a "GREAT TUTORIAL".
Nice montage. No 'emm..', no 'aaa'. Everything is *clean* and *understandable.*
I just love you. Thanks for your work. *Thumbs up from Gogol.*
noice feed back no read more usage !
SIKE!
Amazing.. I have been meaning to try Electron for more than a year now, and You tutorial has started the fire.. Thanks for laying it all out and answering so many of my question right in the video!! Kudos!!
Those who're wondering why @35:13 the button is not working, below is the solution:
*Just change*
let win = new BrowserWindow({frame:false,alwaysOnTop:true,width:400,height:200,
})
*this to*
let win = new BrowserWindow({frame:false,alwaysOnTop:true,width:400,height:200,
webPreferences: {
nodeIntegration: true,
enableRemoteModule: true
}
})
*After doing the above changes inside index.js file you will find that the close window button is working.*
Thank you so much!!
A bit late to the party here, but this is honestly the best tutorial on Electron I've come across to date.
For enabling *Close Window* in the second window, we need to enable nodeIntegration as it is false by default. Otherwise you get the error: *Uncaught ReferenceError: require is not defined*.
Also, for the latest crypto-compare API, you need to write *res.data.USD* instead of *res.data.BTC.USD*.
how and where nodeIntegration is enabled?
Thanks for pointing that out, saved me time
@@asadullah8640 in the index.html file
const modalPath = path.join('file://', __dirname, 'add.html')
let win = new BrowserWindow({frame: false, transparent: true, alwaysOnTop: true, width:400, height:200, webPreferences: {
nodeIntegration: true
}})
@@sajanmathew7192 Thank you Sajan! It worked. It's in the index.js file,.
for anyone who cannot open or close the add window: in index.js change
let win = new BrowserWindow({frame:false,alwaysOnTop:true,width:400,height:200,
})
to
let win = new BrowserWindow({
frame: false,
alwaysOnTop: true,
width: 400,
height: 200,
webPreferences: {
nodeIntegration: true,
contextIsolation: false,
enableRemoteModule: true
}
})
and in main.js change the new "function createWindow()" to this:
function createWindow() {
const win = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: true,
contextIsolation: false,
enableRemoteModule: true,
}
})
win.loadFile("src/index.html")
in Electron Version "12.0.7" you need this.
Thank you!
thanks!!!
You made a very nice course, extremely clean, understandable, and very well recorded/ edited.
Hey Gary,
A little tip for Visual Studio Code: if you want to quickly create an HTML document layout, simply create the new HTML file and type *"!"* (without quotes) on the first line, followed by pressing the *TAB* key on the keyboard. It will automatically build out a basic HTML structure for you.
Let me just say that this is the most impressive audio and visuals I have seen in a tutorial. Fantastic work!
It was the best beginer course i have ever seen. Thank you gary !!
OMG this.. is everything i have ever wanted in app development. how had i not heard of this before? if it could run on Powershell code, or .net it would be a dream come true.
Legit.. with a little tweak,it's working 100% in 2019.
you can toggle your terminal with ctrl+~
also, you can make a new terminal with ctrl+shift+~
Found the IPC thing really helpful. Great Work
If anyone is getting a win not defined error, it's because of the new quick start code uses MainWindow not win so in your Main.js change the ipc to :
ipc.on('update-notify-value', function(event,arg){
mainWindow.webContents.send('targetPriceVal', arg)
})
Thank you!
How to make it like these desktop apps?:
- many Steam Game Launchers have a complete own window appearance, like a custom outer form (f. ex. Paladins shows its logo outside the app) (think Google has a image of the launcher)
Really good explained video! Thanks for that!
that was the best tutorial i have seen in months ..it helped so much thank you so much,its great
Explain delightfully
Simply awesome. Gives me a good start with Electron. Thank You.
If you have Menu error: ReferenceError: Menu is not defined, do the following:
Add:
const { Menu } = require('electron')
Paste this above the line that states:
var menu = Menu.buildFromTemplate([
Now your menu will work!
Thanks for the free, well produced, articulate and informative tutorial. I learned alot.
Great videos! For me the best video-tutor until now, clear voice, excellent content and secondary resources! Many thanks from my side :)
Thanks Gary! I've been anticipating this video all week!
Awesome!
Very great & concise course, thank you for putting it together and making it available for free!
Hi Gary, I think it is better to use require in the main.js file as less as possible... using string interpolation improves performance.
loved it! Thank you!!! Tutorial about an app for people communicating, chatting?
Awesome high-quality tutorial. Thanks man!
**UPDATES**
Use:
const win = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: true,
contextIsolation: false,
enableRemoteModule: true
}
}
for creating BrowserWindow object in main.js
Use:
let win = new BrowserWindow({
frame: false,
transparent: true,
alwaysOnTop: true,
width: 400,
height: 200,
webPreferences: {
nodeIntegration: true,
contextIsolation : false,
enableRemoteModule: true
}
})
in your index.js and change add.css file to include:
html, body {
background: rgba(226, 226, 226. 0.5);
height: 100%;
opacity: 0.9;
}
Including "nodeIntegration" and "contextIsolation" removes your "Uncaught ReferenceError: require is not defined" that will show for index.js line 1 ( const electron = require("electron") )
"enableRemoteModule" let you use "const BrowserWindow = electron.remote.BrowserWindow" in index.js while removing the "Uncaught TypeError: Cannot read property 'BrowserWindow' of undefined at index.js:3" error
[NOTE: I've read comments and need suggestion on nodeIntegration: true security issue, I know it is okay for this small local project but how did you modify if you need to resolve the security issue because not good practice AND of course electron.remote is deprecated as you'll the warning in the console if you have win.webContents.openDevTools() ("win" is BrowserWindow object)]
Thank you for sharing your knowledge. Your tutorial is very well built, easy to follow and put into action. Great stuff!!
Thank you very much for the tutorial! It was awesome and helped me to understand a bit more electron :)
Respect from EGYPT
interrupt info in this video is cool, great idea 👍
At first I was shocked at how low the BTC price was. Then I saw the date this video was uploaded at.
Sir, kindly make react and electron videos, it helps us a lot in practical and professional experience as well.
Great tutorial!!! Clean and easy. Subscribed right away
Your teaching style is awesome. I like it. waiting for Electron + Angular 5 / Electron + Vue.js tutorial.
I will cover Vue for sure.
If you're looking for a way to automatically restart the server after every change, I found this useful script that uses nodemon. Add this to your package.json file: "dev": " nodemon --watch . --exec \"electron . --debug\" ", and then simply run `npm run dev` in your terminal.
Great tutorial! Thanks for sharing, helped a lot.
This tutorial could have been made simple by using ipcRenderer and ipcMain. For example here is the code for the notifyBtn part:
index.js:
const electron = require("electron");
const path = require("path");
const {ipcRenderer} = electron; //importing ipcRenderer
const notifyBtn = document.getElementById("notifyBtn");
notifyBtn.addEventListener("click", function(){
ipcRenderer.send("addWindow");
})
and here is the main.js:
//importing
const electron = require("electron");
const path = require("path");
const {protocol} = electron;
const url = require("url");
const {app, BrowserWindow, ipcMain, Menu} = electron;
const shell = require("electron").shell;
function createAddWindow(){
// create new window
addWindow = new BrowserWindow({
webPreferences:{
nodeIntegration: true
},
width: 400, // defining the size
height: 200,
});
// quit app when closed
mainWindow.on("closed", function(){
app.quit();
});
// garbage collection
addWindow.on("close", function(){
addWindow = null;
})
// load html file
addWindow.loadURL(url.format({
pathname: path.join(__dirname, "add.html"),
protocol: "file:",
slashes: true
}));
}
ipcMain.on("addWindow", function(){
createAddWindow();
})
Thanks Gary! Awesome videos! can you please make a video of how to deploy with gulp?
Amazing Tutorial. Thanks a lot!
Thanks for this. Great tutorial !
Alright so if anyone watching in 2020, just a quick fix,
JavaScript and node are disabled in the new frame so you have to explicitly set them to true,
electron-builder is better and maintained for packaging.
Great advice - thanls for the headsup on electron-builder!
@@keithsherry262 :)
Great tutorial Simon. There were no ";" in 2017?
still no ; in 2020
Hey Gary! Your tutorials are just awesome.
Thanks, means a lot!
Waiting for you Django beginner, intermediate and advance video series.
very excellent. I learn much from this video
let > var
good tutorial.. and for me very easly to about first time learning electron js
I have been watching your videos about electron. They are perfect. Well done.
I have quick question though. I am trying have a small webcam window on the top of the main window. Cam window will stay always on top of main window and can be moved around within the main window. cam window cannot be resized...etc. Where I struggle is to keep the webcam window within the main window.
Could you please help me about it?
Thank you,
Thanks for the great tutorials!
Correct me if I’m wrong, but after reading the quick-start guide on electronjs I thought that MainProcess has to manage all the windows of an app. Does this mean you shouldn’t have created the “add” window in index.js but rather call main.js?
I am only around half-way through the tutorial and wondered the same thing! I'm not sure for the reason why you would want index.js to know anything about add.html... but I am currently just as confused as to why it was called 'add' in the first place. So far, the 'notify' button opens an 'add' window (that doesn't 'add' [yet!]), which is created in 'index'.
Awesome video 👌👍
Just a query... How to pass multiple values through ipc. I mean if i have a form with multiple fields.
Thumbs up Gary! Awesome video!
If anyone is having issues with the JavaScript not working on your add.html page, add 'webPreferences:{nodeIntegration: true}' to your BrowserWindow options. Example:
let win = new remote.BrowserWindow(
{
transparent: true,webPreferences:{nodeIntegration: true},frame: false, alwaysOnTop: true, width: 400, height: 200
})
You deserve more subs sir, super useful!
This Video is awesome. Thank you Gary!
Awesome stuff Gary thanks for contributing
Nice tutorial. All worked for me except the final build. The packaged app is no longer is able to get the bitcoin price. Any suggestions? Thanks!
Excellent, thanks!
can you please make a update version of this tutorial in 2020?
Great video! Thanks a lot!
Just a small refresh, the latest version of Electron holds shell in electron module not in separate shell one!
Waao.... Great one. Saved my life. Thank You :)
hello , Thank you , i am from Colombia very big you helps
Garry, thank you. I am new to Electron and Web in general but experienced in native. I was wondering if you could give some advice. I want to wrap code written in C# into some kind of web wrapper. The wrapper will have to talk to some web service and communicate information (uploads/downloads/changes etc) back to a web or native app. Is Electron built for that and what other technologies are required for something like this?
Loved your video.
Thanks a lot
TL;DR - index.js and src/main.js should be swapped for consistency of correspondence of view/controller (html/js) pairs. Otherwise, great tut :-)
---
Doing some extra stuff, I tried to get `document` object in main.js and was stumped getting `document is not defined` error
In fact, src/main.js and index.js in this tutorial should be swapped, so that index.js is the bootstrapping script, whereas main.js becomes the in-window rendering scripting, just as add.js corresponds to add.html
That way, I could finally use win.webContent.send() to use a menu item from the newly renamed index.js to send data to the main window using ipcRenderer.on()
Do you have a Tutorial 'Create a web browser with Electron' , using browserView , webcontent (not webview) ?
Thanks
Thanks a lot for great tutorials.
Got an idea of Electron. THANKS! ;-)
Awesome job
ATT MAC USERS: In OSX the first menu item MUST BE "Electron". You cannot change this behavior. So if you want a 'Menu' label as the second menu bar item. Eg. { label: 'Electron' }, {label: 'Menu', submenu: [{label: 'File'}, ....... etc....]. You can read about it here: github.com/electron/electron/blob/master/docs/api/menu.md#main-process
Thank you Gary, @ 31:00 -> I got, "Uncaught ReferenceError: require is not defined" and I did not get the index box!!! Any idea how to solve this?
Gary what framework do you prefer between react and Vuejs?
Best content thanks
Around 45:00 my target price update wasn't working. I'd get an error about win not being declared. Even with 'let win' in my main.js, it didn't work. To fix it, I replaced 'let win' with 'var win = null' then in createWindow() replaced 'const win =...' with just 'win = ...' Problem is that declaring const win inside a function is only on the function scale, not the global scale. For our ipc.on to access win, win needs to be globally available. Don't know why let didn't work but oh well.
I had the same problem, but I made my createWindow function return the win value and store it in the global win which was declared with let and yeah it worked
great videos, love the camera, graphics, sound all :)
Awesome, thanks.
For those who couldn't close the child window, try this in your index.js
let win = new remote.BrowserWindow({
webPreferences: {
nodeIntegration: true
},
width: 400,
height: 200
});
Thanks!
why are we doing this? Why it did worked for author and why not for us?
39:08, The api has changed a bit so change cryptos = res.data.BTC.USD to cryptos = res.data.USD
No it is working without making any changes don't write things without testing.
*cryptos = res.data.BTC.USD* is correct
I found the solution.It is posted in the comment section above.
@@jason_liam that was 3 months ago bro... APIs keep changing. It worked for me that way earlier
Great stuff. I enjoyed your tutorial.
Thanks!
Thank you
Hi,
My First tutorial, great course, congrats.
I have two problems
1) notification not works
2) I cannot make a package to windows
Notifications did not work for me either for (Windows 10 - 1803 update , electron 4.1.3)
This fixed it. (Copied from electronjs.org/docs/tutorial/notifications#windows)
On Windows 10: a shortcut to your app with an Application User Model ID must be installed to the Start Menu. This can be overkill during development, so adding node_modules\electron\dist\electron.exe to your Start Menu also does the trick. Navigate to the file in Explorer, right-click and 'Pin to Start Menu'. You will then need to add the line app.setAppUserModelId(process.execPath) to your main process to see notifications.
On Windows 8.1 and Windows 8, a shortcut to your app with an Application User Model ID must be installed to the Start screen. Note, however, that it does not need to be pinned to the Start screen.
On Windows 7, notifications work via a custom implementation which visually resembles the native one on newer systems. Electron attempts to automate the work around the Application User Model ID. When Electron is used together with the installation and update framework Squirrel, shortcuts will automatically be set correctly.
Furthermore, Electron will detect that Squirrel was used and will automatically call app.setAppUserModelId() with the correct value. During development, you may have to call app.setAppUserModelId() yourself.
Furthermore, in Windows 8, the maximum length for the notification body is 250 characters, with the Windows team recommending that notifications should be kept to 200 characters. That said, that limitation has been removed in Windows 10, with the Windows team asking developers to be reasonable. Attempting to send gigantic amounts of text to the API (thousands of characters) might result in instability.
Will it run on my i9-10900k machine with RTX 3090?
No
you'll need RGB gaming ram.
Just be curious, What markdown editor did you use for "ELECTRON API DEMOS" at 2:12 ? it seems better than Typora.
Great Video... setup worked nicely on my Mac. However, at 14:38, I am unable to get a menu to show on my MacBook. I'm reading the documentation on Menus but it's not solving my issues. I'd love an updated video and Mac support!
and any help to create a menu. Thanks!
This works on my MacBook:
// Mac App menu - used for styling so shortcuts work
if (process.platform === 'darwin') {
// Create our menu entries so that we can use MAC shortcuts
const template = [
{
label: 'File', submenu: [
{ role: 'quit' },
],
},
{
label: 'Edit', submenu: [
{ role: 'undo' },
{ role: 'redo' },
{ role: 'separator' },
{ role: 'cut' },
{ role: 'copy' },
{ role: 'paste' },
{ role: 'pasteandmatchstyle' },
{ role: 'delete' },
{ role: 'selectall' },
],
},
{
label: 'Help', submenu: [
{ role: 'reload' },
{ role: 'toggleFullScreen' },
{ role: 'toggleDevTools' },
],
},
];
Menu.setApplicationMenu(Menu.buildFromTemplate(template));
}
Actually on Mac the menu is not on the window itself but on the top of desktop.
you are God sent
Hey do you know if its possible in electron programming, for it to bring up a window if a mouse cursor is moved towards the edge of monitor?? ie.. similar to Windows "autohide" on the taskbars. Or do you need to use C++ to implement such a feature?
Thank you for this video
This is soo cool, and explained by the best ♥...
Hey Gray i might have asked late but would you please make an electron and vue js tutorial basically setup using vue cli 3 or whatever you can please, but the boilerplate has given me a lot of headache
Great toturial. I also had hard time with formatting once; here is what I got! in settings (Set default Tab to Space and adjust 4 or 2 spaces config) and install marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode and press Alt+Shift+F and vola :-)
Great tutorial... one thing: it is "et cetera" and not "ex cetera."
Hey, thanks for awesome video. I tried this with existing Angular 6 application and I'm getting this error
"Not allowed to load local resource: ". please help me.
Thanks for sharing this video. Do you have a link to the CSS files somewhere that you use around 26:00 in the video?
Awesome, loved it!
Thanks!
Will large projects (4.5GB) with thousands of files load fast from dvd or usb stick?
It's easy to pick when you teach 😊
Pick what?
DesignCourse 😂 The Concepts of Electron
Very interesting and useful video, thank you :-)