Coming soon: Electron + Angular 5 / Electron + Vue.js. -- and intermediate Electron tutorials.

@noormohammedshikalgar

6 жыл бұрын

Hey Sorry For my comment , i realize that my timezone is further so im really sorry

@DesignCourse

6 жыл бұрын

No problem, yeah, it's 11 AM here. ;)

@noormohammedshikalgar

6 жыл бұрын

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

@kuldeepbhatt8475

6 жыл бұрын

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.

@noormohammedshikalgar

6 жыл бұрын

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!

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

You made a very nice course, extremely clean, understandable, and very well recorded/ edited.

Let me just say that this is the most impressive audio and visuals I have seen in a tutorial. Fantastic work!

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

@zenisapirate

2 жыл бұрын

noice feed back no read more usage ! SIKE!

It was the best beginer course i have ever seen. Thank you gary !!

Great videos! For me the best video-tutor until now, clear voice, excellent content and secondary resources! Many thanks from my side :)

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

@hvuupadhyay5418

3 жыл бұрын

Thank you so much!!

Simply awesome. Gives me a good start with Electron. Thank You.

that was the best tutorial i have seen in months ..it helped so much thank you so much,its great

Thanks for the free, well produced, articulate and informative tutorial. I learned alot.

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 :)

Very great & concise course, thank you for putting it together and making it available for free!

Found the IPC thing really helpful. Great Work

Awesome high-quality tutorial. Thanks man!

loved it! Thank you!!! Tutorial about an app for people communicating, chatting?

Great tutorial! Thanks for sharing, helped a lot.

A bit late to the party here, but this is honestly the best tutorial on Electron I've come across to date.

Thanks Gary! I've been anticipating this video all week!

@DesignCourse

6 жыл бұрын

Awesome!

Great tutorial!!! Clean and easy. Subscribed right away

Thanks for this. Great tutorial !

Thanks Gary! Awesome videos! can you please make a video of how to deploy with gulp?

interrupt info in this video is cool, great idea 👍

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!

This Video is awesome. 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.

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

@asadullah8640

4 жыл бұрын

how and where nodeIntegration is enabled?

@sajanmathew7192

4 жыл бұрын

Thanks for pointing that out, saved me time

@sajanmathew7192

4 жыл бұрын

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

@ashwingurbuxani317

4 жыл бұрын

@@sajanmathew7192 Thank you Sajan! It worked. It's in the index.js file,.

Thumbs up Gary! Awesome video!

Awesome stuff Gary thanks for contributing

Waao.... Great one. Saved my life. Thank You :)

You deserve more subs sir, super useful!

Excellent, thanks!

Amazing Tutorial. Thanks a lot!

Great tutorial even after 5 years ❤

Great video! Thanks a lot!

This is soo cool, and explained by the best ♥...

Thanks a lot for great tutorials.

great videos, love the camera, graphics, sound all :)

@DesignCourse

6 жыл бұрын

Awesome, thanks.

Explain delightfully

Loved your video.

Hi Gary, I think it is better to use require in the main.js file as less as possible... using string interpolation improves performance.

Got an idea of Electron. THANKS! ;-)

Awesome, loved it!

@DesignCourse

6 жыл бұрын

Thanks!

omg, an amazing channel!!

good tutorial.. and for me very easly to about first time learning electron js

very excellent. I learn much from this video

Well done Gary

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!

this is awesome!

Very interesting and useful video, thank you :-)

Great stuff. I enjoyed your tutorial.

@DesignCourse

6 жыл бұрын

Thanks!

Awesome job

Thank you for this video

Hey Gary! Your tutorials are just awesome.

@DesignCourse

6 жыл бұрын

Thanks, means a lot!

@Thesrik23

6 жыл бұрын

Waiting for you Django beginner, intermediate and advance video series.

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.

@sarahm9482

2 жыл бұрын

Thank you!

@mahdimostafa1205

2 жыл бұрын

thanks!!!

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.

@SRTIEP

Жыл бұрын

Great tip Thank You

great video, thanks a lot, (tremendo video, muchas gracias)!!

you can toggle your terminal with ctrl+~ also, you can make a new terminal with ctrl+shift+~

hello , Thank you , i am from Colombia very big you helps

Thanks a lot

Legit.. with a little tweak,it's working 100% in 2019.

Thank you

Your teaching style is awesome. I like it. waiting for Electron + Angular 5 / Electron + Vue.js tutorial.

@DesignCourse

6 жыл бұрын

I will cover Vue for sure.

Best content thanks

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?

Gary what framework do you prefer between react and Vuejs?

**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)]

Awesome video 👌👍 Just a query... How to pass multiple values through ipc. I mean if i have a form with multiple fields.

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?

@keithsherry262

4 жыл бұрын

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

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.

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,

you are God sent

Hello! Is it possible to develop an application that will run first a POST command with a header and a body, and then afterwards use the data from here to run a GET command where the previous data is put into the header? Thank you so much everyone

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) })

@andreaspedersen7084

4 жыл бұрын

Thank you!

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?

Loved this tuto ^^, thanks for helping me do my first desktop app! ^^, but I was waiting something to not have the console opened everytime the app opens :/.

@keithsherry262

4 жыл бұрын

Either comment out or delete the line that says "win.webContents.openDevTools()" in main.js! Sorry - 2 years too late I know!

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

Can I find a place with the full source code? While typing I made a mistake somewhere and the add window doesn't show up anymore :(

Sir, kindly make react and electron videos, it helps us a lot in practical and professional experience as well.

Respect from EGYPT

THANK YPOU SO MAUCH , AWEASOM tutorial!

@DesignCourse

6 жыл бұрын

Thanks!

Thank u for this video

@DesignCourse

6 жыл бұрын

Welcome!

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!

Hey, I've made a custom HTML/CSS Title Bar - setting the frame to false (frame-less)... the problem is this hides the menu bar (File, Edit etc.) Is there any way to keep the menu bar with the app in frame-less mode? Thanks, SImon

Just a small refresh, the latest version of Electron holds shell in electron module not in separate shell one!

Thanks for sharing this video. Do you have a link to the CSS files somewhere that you use around 26:00 in the video?

Superb

so, if the target price is less than current price of btc, will the notification fire in every 30 seconds?

Any recommendation about connect Electron with python, and make a exe softwares?

Uncaught Exception: Reference Menu is not defined at App.createWindow(c:/Users/james/intro-app/main.js:30-21) at emitTwo(events.js:130-20) at App.emit(events.js:213-7) this is the error i receive when trying to update the menu for the first time. My code looks like this...const {app, BrowserWindow} = require('electron') const path = require('path') const url = require('url') // Keep a global reference of the window object, if you don't, the window will // be closed automatically when the JavaScript object is garbage collected. let win function createWindow () { // Create the browser window. win = new BrowserWindow({width: 800, height: 600}) // and load the index.html of the app. win.loadURL(url.format({ pathname: path.join(__dirname, 'index.html'), protocol: 'file:', slashes: true })) // Open the DevTools. win.webContents.openDevTools() // Emitted when the window is closed. win.on('closed', () => { // Dereference the window object, usually you would store windows // in an array if your app supports multi windows, this is the time // when you should delete the corresponding element. win = null }) var menu = Menu.buildFromTemplate([ { label: 'Menu', submenu: [ {label: 'Adjust Notification Value'}, {label: 'CoinMarketCap'}, {label: 'Exit'} ] } ]) Menu.setApplicationMenu(menu); } // This method will be called when Electron has finished // initialization and is ready to create browser windows. // Some APIs can only be used after this event occurs. app.on('ready', createWindow) // Quit when all windows are closed. app.on('window-all-closed', () => { // On macOS it is common for applications and their menu bar // to stay active until the user quits explicitly with Cmd + Q if (process.platform !== 'darwin') { app.quit() } }) app.on('activate', () => { // On macOS it's common to re-create a window in the app when the // dock icon is clicked and there are no other windows open. if (win === null) { createWindow() } }) // In this file you can include the rest of your app's specific main process // code. You can also put them in separate files and require them here.

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 :-)

At first I was shocked at how low the BTC price was. Then I saw the date this video was uploaded at.

Just be curious, What markdown editor did you use for "ELECTRON API DEMOS" at 2:12 ? it seems better than Typora.

Do you have a Tutorial 'Create a web browser with Electron' , using browserView , webcontent (not webview) ? Thanks

Am i understanding the ipc functions the right way ? 'add.js' emit the value of an input 'main.js' capture the value, then emit the value again 'index.js' capture the value and display it

I am sending a mongoose record after lean(converts mongoose object to simple json object) through ipc in electron js. But, on other side (javascript / html side), I am getting _id as object not as string of ObjectId. Can anyone help me regarding the issue?

Sorry if you already answered this, but does the exe need to be distributed with all those hundreds of dlls (t=58:19)?

how can create an app config file to change the configuration after build