Load JavaScript in an Electron BrowserWindow
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.
[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.
@Frederic Rey: I totally agree - it's a little confusing. I Guess Cameron could just simply change the order of episodes 2-3.
There's another way to contact Cameron?
Update for anyone watching now, and using Electron 5 or greater. Node integration is no longer enabled by default, you must explicitly enable it before require will work now...
Instead of mainWindow = new BrowserWindow() you'll now want:
mainWindow = new BrowserWindow({
webPreferences: {
nodeIntegration: true
}
});
It should be 2nd lesson.
Had an error with require, turns out electron > 5.0.0 doesn't by default allow node integration for any renderer.
https://electronjs.org/docs/tutorial/security#2-do-not-enable-nodejs-integration-for-remote-content
Nov 2021 - Electron 15.3.0, following code will work:
- remove script from index.html
- index.js:
mainWindow = new BrowserWindow({
webPreferences: {
preload: path.join(__dirname, 'renderer.js')
}
});
mainWindow.loadFile('index.html');
- renderer.js:
window.addEventListener('DOMContentLoaded', () => {
const versionEl = document.querySelector('#version');
versionEl.innerText = process.versions.electron;
console.log(process.versions);
});
Hello! I just started the course and it looks like the 2nd ('Load CSS ...') and 3rd(current one) videos have been switched, just wanted to let you know ;)