Join egghead, unlock knowledge.

Want more egghead?

This lesson is for members. Join us? Get access to all 3,000+ tutorials + a community with expert developers around the world.

Unlock This Lesson

Already subscribed? Sign In

Autoplay

    Load JavaScript in an Electron BrowserWindow

    Cameron NokesCameron Nokes

    In this lesson we’ll load javascript into the BrowserWindow and display the Electron version on the page. Loading javascript into Electron is almost exactly the same as loading it into the browser, however it is a best practice to use the require syntax.

    electronElectron
    Code

    Code

    Become a Member to view code

    You must be a Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson
    Transcript

    Transcript

    00:00 We've already set up our main process JavaScripts. We've created our browser window. We're loading index studies.html in it. What we want to do is load some JavaScript in the renderer process and print out the Electron version on the page. Let's jump over to our index studies.html.

    00:18 First, we'll just add some HTML for that. Loading JavaScript in Electron is much like you would in a browser. You use a script tag, but instead of passing a source attribute here like this, we're going to use require instead because we have no JS APIs available to us everywhere.

    00:38 While the source attribute on the script tag would definitely work, it is a best practice to use require. One reason for this is that using require makes your JavaScript file a Node.js module, so it gets wraps and immediately invoke function automatically which encapsulates all of your variables.

    00:53 We're going to load a file called a renderer.js. Let's create that file now. In here, we'll query the DOM for the version span, just like we would normally. We'll use document.queryselector and we'll set the inner text attribute of that to process.versions.electron. Node.js has a process global and process.version in Node.js is the current Node.js version.

    01:30 Electron simply takes the process object and extends it with additional information. One of those things that it adds onto it is the current Electron version, so that's where this is coming from. We'll also go ahead and log out the process.versions object. Let's run that with npm start.

    01:48 We can see that it's working. This is the Electron version that we're running. Let's see what happened to our console.log and the renderer process. We're going to open the Chrome DevTools with the same hotkey that you use in Chrome. On Mac, that's Command+I. On Windows, it's Ctrl+Shift+I.

    02:08 We can see here that I got logged out, and this is our process.versions object. Here's the Electron version that we're using, and you can see that there's a lot of other version information in here as well.

    Discuss

    Discuss