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.
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 ;)
@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:
mainWindow = new BrowserWindow({
webPreferences: {
preload: path.join(__dirname, 'renderer.js')
}
});
mainWindow.loadFile('index.html');
window.addEventListener('DOMContentLoaded', () => {
const versionEl = document.querySelector('#version');
versionEl.innerText = process.versions.electron;
console.log(process.versions);
});