Dope Tech Episode 2

<<@daveamies5031 says : This was a really excellent tutorial, had the right balance of enough information without being too much stuff that's not essential. Thank you ♥>> <<@thiagoaufy says : All other videos on Electron are Bullshit. This is the deal>> <<@scotdotwtf says : amazing tutorial, actually learned a lot from this.>> <<@pdep says : This is way out of date and is useless if not updated. A great pity from this otherwise excellent YouTube provider.>> <<@amarnathreddysurapureddy9111 says : Super lecture.>> <<@StijnHommes says : So we get a whole bunch of command-line-quackery to create some unnecessary json files to make a shortcut to a website. Where is the app?>> <<@run4ever102 says : If you have issues here is the code, make sure to add this to both new Browser window items contain webPreferences: { nodeIntegration: true, contextIsolation: false, enableRemoteModule: true } So your code should look something like app.on('ready', function(){ //create a new window mainWindow = new BrowserWindow({ webPreferences: { nodeIntegration: true, contextIsolation: false, enableRemoteModule: true } }) //Load the HTML file into the window mainWindow.loadURL(url.format({ pathname: path.join(__dirname, 'mainWindow.html'), protocol: 'file:', slashes: true })); //Quit app when closed mainWindow.on('closed', function(){ app.quit(); }); //Build the menu from the template const mainMenu = Menu.buildFromTemplate(mainMenuTemplate); //insert the menu Menu.setApplicationMenu(mainMenu); }); //Handle create add window function createAddWindow(){ //add a new window addWindow = new BrowserWindow({ width: 300, height: 300, title:'Add shopping list item', webPreferences: { nodeIntegration: true, contextIsolation: false, enableRemoteModule: true } })>> <<@Danielated says : Anyone on Mac having issues with the menu items being pushed into the mainMenuTemplate variable, I was receiving an error because the menu in electron seems to require at least a blank value, and the tutorial suggests that we should unshift an empty set of curly brackets to the menu array. This is solved by replacing the lines: if(process.platform == 'darwin'){ mainMenuTemplate.unshift({}); } with: if(process.platform == 'darwin'){ mainMenuTemplate.unshift({label:''}); } The only difference is that this is at least dropping a blank label into the mainMenuTemplate array which satisfies the minimum requirement from electron. Windows users will likely not even get an error from Electron because it won't pass the if/then demand.>> <<@devsmite says : 18:39>> <<@ra2carrier749 says : This video is fantastic.>> <<@LemonSeal05 says : For anyone with issues with const electron = require('electron') : Electron changed something in electron version 12, for a fix, add this code within new BrowserWindow: webPreferences: { nodeIntegration: true, contextIsolation: false, enableRemoteModule: true, },>> <<@MRAMetharam says : A lot has changed in Electron since this video was released but this is still good. Just one question... is it possible to remove or assign a different menu to the "add items" window?>> <<@Patrick-hl1wp says : this is a really awesome tutorial, thanks.>> <<@organic_computation says : For mac if the menu part didn't work for you to put in this line of code in the app.on('ready', function(){ }); part of the code: if(process.platform == 'darwin'){ mainMenuTemplate.unshift({label:'',}); }>> <<@tushar-nain says : I am not gonna learn Electron, i mean look at the size of that teeny tiny app, 55mb. Electron puts the entire chromium in the app.>> <<@TheSweatCatcher09 says : Thank you for the detailed tutorial, helped me a lot a novice on electron..>> <<@gordonlinton3555 says : Excellent tutorial.. thanks buddy>> <<@mike-aaa says : Very well! Thank you for the lesson.>> <<@khanhsb15 says : Thanks Brad. The lesson is very short and easy to understand so that I can easily access the electron app>> <<@MicroCheese64 says : I like the way this tutorial was done. Dude just seems like a chill, informative dude and he doesn't talk like a robot. Good stuff.>> <<@deepuomanakuttan3013 says : Hey, Brand thanks for this nice tutorial, but when I tried ipcRenderer, I landed into a problem in which the 'require' keyword not working within script tags (from html), based on my googling I found this as an itchy behavior from electron 12+ versions, and solved this by adding webpreferences :{preload:'customJsFile.js'} with the dom manipulating content (if anybody needs the code please mention below this comment) feel free to suggest if there are any other methods, once again thanks for this comprehensive electron guide!>> <<@muneebahmad8772 says : electron is very handy and good for desktop applications thank you sir & always thumbs up for Traversy media>> <<@SetszawA says : Such great video, you man are the real MVP. This video from 5 years ago is more helpful than any other updated Electron tutorial I could find.>> <<@suityou01 says : Awesome video dude.>> <<@soumeshk says : Hey Brad, I'm getting an error saying require is not defined, whenever I try to do console.log(123); Could you please help me out..>> <<@Naturelover-ny3vj says : I am getting an error while adding developer tool>> <<@itsvostro says : If you still get an error "require is not defined" even with nodeIntegration, use : webPreferences: { nodeIntegration: true, contextIsolation: false }>> <<@benjaminng8882 says : is electron dead? i do a search in youtube, most of the course are outdate even in Udemy>> <<@johnatteo822 says : 1 Question How do I put the .exe file on my desktop? When I drag that file to my desktop out of it's original folder , It no longer will open..>> <<@michi40 says : I loved the video! It was going great. Unfortunately, nowadays, this tutorial app doesn't work anymore because of security issues. On latter versions of electron it has been disabled the use of require() inside the renderer or html pages. Read this post on SO for more details. https://stackoverflow.com/a/59888788 Also, using fast workarounds like setting webPreferences: { contextIsolation: false, nodeIntegration: true, nodeIntegrationInWorker: true, enableRemoteModule: true } did not worked for me at least :(>> <<@mightydudegrafuroam8424 says : thanks man!>> <<@kushagraagrawal3721 says : hey, I'm getting error "Reference error: require is not defined" I've searched everywhere but unable to find proper solution. I am using node 16.4.1 and npm 8.5.0. Because of this I can't use js scripts>> <<@subhamshaw1726 says : Thanks for this great video. Awesome explanation and easy to read code and understand>> <<@sadashiv43 says : A Javascript error occurred in the main process Uncaught exception TypeError: cannot read properties of undefined(reading 'loadURL') at App.) i:\chatwindow\main.js:14:14) at app.emit(node:event:390:28)>> <<@Bah-wf5cf says : great work brother>> <<@pangyabyplease7010 says : I'm still a little bit confused about the comunication between the main.js and the script in the addWindow.html. How can I make a menu button run a toggle function that is declared on a javascript file ? Amazing video btw bro ! Straight from Brazil>> <<@loodics says : 26:34 now im hungry>> <<@keyvanroomer4725 says : Hi mr . I have problem in electron js How can i send a file name and path to electron when a file opens or create with windows or mac I want when i click a file in windows its details send to electron main is it possible? Can i catch mouse event where is mouse? What is file name that i clicked ? Thank you please help me>> <<@taoli5497 says : 👍👍👍>> <<@Bah-wf5cf says : great work man>> <<@ecode5225 says : Hey Brad! considering making a new video>> <<@Zeghabioussama says : i faced a problem when i write const electron = require('electron') in script tag>> <<@scriptsnaps says : Good Tutorial. Thanks>> <<@gabrielesimoncini1121 says : THANKS! it runs perfectly. Just one thing: at the end of the video, i haven't all dll files that you have. I just have a few files, but it works. thank you! One answer, how can i create an Installation setup for this app?>> <<@evilmatron says : I am living a problem with url.format program shows the 'format' word as a strikethrough text and also says 'url format' is deprecated. Also I finally managed to run the code but now I can't see my html content in the window. Edit : I solved the problem with first debugging the start script (I think I wrote it wrong or some other error etc.) and using (url.toString) instead of using (url.format)>> <<@kevineugenius says : Seems like the Patreon tiers have changed since this video; I got quite excited about the $2 tier but I'll consider to mull it over.>> <<@gerrabia says : There might be something wrong with how I installed it: App threw an error during load TypeError [ERR_INVALID_ARG_TYPE]: The "listener" argument must be of type function. Received undefined at checkListener (events.js:131:11) at _addListener (events.js:409:3) at App.addListener (events.js:467:10) at Object. (C:\Users\John\Desktop\stuff\coding\TestingElectron\main.js:9:5) at Module._compile (internal/modules/cjs/loader.js:1083:30) at Object.Module._extensions..js (internal/modules/cjs/loader.js:1113:10) at Module.load (internal/modules/cjs/loader.js:940:32) at Module._load (internal/modules/cjs/loader.js:781:14) at Function.f._load (electron/js2c/asar_bundle.js:5:12913) at loadApplicationPackage (C:\Users\John\Desktop\stuff\coding\TestingElectron\node_modules\electron\dist\resources\default_app.asar\main.js:110:16) [3996:0915/194342.433:ERROR:network_service_instance_impl.cc(333)] Network service crashed, restarting service.>> <<@paulsantiagovaldez5312 says : I'm having a problem in 39:00, i cant display the items when i click add item. How can i fix it? Thanks for the response>> <<@jeremycox9779 says : I think the content of this video would be useful but the typing is almost as loud as you are. It makes it hard to concentrate on the content. You might want to use a headset or move the microphone away from the keyboard a bit more. Just a thought.>> <<@matteopepe28 says : My application has multiple images. When I follow this tutorial I am unable to run the executable because it says it can't find the images>>