An Intro To Electron – Desktop Apps with JavaScript



In this video we will just start to scratch the surface with Electron which is a library to create desktop applications using only HTML, CSS and JavaScript.

We will use code from the quick start and create a very simple system info desktop app

FULL 6 HOUR COURSE:
https://www.udemy.com/course/electron-from-scratch/?referralCode=D83E1593BE5EC5AFF830

Quick Start Repo:
https://github.com/electron/electron-quick-start

SUPPORT: We spend massive amounts of time creating these free videos, please donate to show your support:
http://www.paypal.me/traversymedia
http://www.patreon.com/traversymedia

FOLLOW TRAVERSY MEDIA:
http://www.facebook.com/traversymedia

http://www.linkedin.com/bradtraversy

34 thoughts on “An Intro To Electron – Desktop Apps with JavaScript

  1. For everyone who gets the process and rendered undefined error. Please do the following;

    in the HTML, use this;
    <script>

    console.log(process);

    </script>

    <script src="./renderer.js">

    </script>

    in the JS, use this;
    // create a browser window

    win = new BrowserWindow({

    width: 800,

    height: 600,

    icon: __dirname + '/img/logo.jpg',

    webPreferences: {

    nodeIntegration: true,

    contextIsolation: false

    }

    });

    That's all!

  2. win = new BrowserWindow({
    width: 800,
    height: 600,
    icon: __dirname + "/img/icon.png",
    webPreferences: {
    nodeIntegration: true,
    }
    });

    And still getting this error:
    Uncaught ReferenceError: process is not defined

  3. Brad, I always enjoy your tutorials. This one took hours to debug due to an update in Electron 8.0.3 (actually implemented in earlier release) where webPreferences: { nodeIntegation: false } is the default.

    If you're seeing that weird error message that require is not defined, webPreferences: { nodeIntegation: true} must be set in main.js within mainWindow and addWindow operations as follows:

    mainWindow = new BrowserWindow({
    webPreferences: {
    nodeIntegration: true
    }
    });

    addWindow = new BrowserWindow({
    width: 300,
    height: 200,
    title: 'Add Shopping List Item',
    webPreferences: { nodeIntegration: true }
    });

    If not set, you'll see weird errors like "Uncaught referrenceError: require not defined".

    nodeIntegration: false secures the app if you're loading contents from an external, unsecure source. But IMHO, if all content is local (and it's a tutorial), set the value to true. Then again, I'm no Electron expert. Proceed at your own risk 😉

  4. I am getting some errors after run npm start:
    index.html:17 Uncaught ReferenceError: process is not defined
    at index.html:17
    (anonymous) @ index.html:17
    index.html:20 Uncaught ReferenceError: require is not defined
    at index.html:20

  5. please tell me, what is difference between win.on('closed') and app.on('window-all-closed'), isn't there only one window ? And closing window does not mean closing entire app?

Leave a Reply

Your email address will not be published. Required fields are marked *