Egghead Instructor Cameron Nokes

Cameron Nokes

I'm a front-end developer at Domo. I like all things JavaScript. I also believe in unicorns.



Unlock all of Cameron's PRO Lessons
click for instant access!

Browse Cameron Nokes's lessons.

showing 14 lessons...

Save/Open a file with an Electron dialog window

P

Code sign your Electron application with electron-builder

P

Load JavaScript in an Electron BrowserWindow

P

Display native desktop dialog windows with Electron

P

Package your Electron application into a executable file with electron-builder

P

Create an icon for your Electron app

P

Create a native desktop system menu with the Electron Menu module

P

Understand Electron’s main and renderer process architecture

P

Communicate between Electron processes using the remote module

P

Ship updates to your Electron app with `autoUpdater` (Mac)

P

Communicate between Electron processes using IPC

P

Ship updates to your Electron app with `autoUpdater` (Windows)

P

Load CSS in a Electron BrowserWindow

Create a "Hello World" app using Electron

js tutorial about Save/Open a file with an Electron dialog window

Save/Open a file with an Electron dialog window

7:16 js PRO

In this video, we'll learn how to save and open a file using native dialogs in Electron. First, we'll use dialog.showSaveDialog to display a native save dialog and use dialog.showErrorBox to display an error message if the save failed. Then, we'll open the file we saved using dialog.showOpenDialog. Finally, we'll look at how these dialogs look on Windows vs Mac.

js tutorial about Code sign your Electron application with electron-builder

Code sign your Electron application with electron-builder

4:00 js PRO

Code signing ensures that your app was created and distributed by you or your company and has not been modified since it was built. It is done via a special code signing certificate issued by a trusted authority. While you can distribute your Electron app without signing it; code signing is a security best practice and is a prerequisite to implementing auto-updates in your app. We’ll walkthrough how to integrate code signing into your electron-builder build process, what happens when you don't sign your application, and how to verify it's been signed correctly.

This lesson assumes that you have already purchased code signing certificates from Apple and one of Microsoft's trusted vendors and have exported the certificate as a p12 or pfx file.

js tutorial about Load JavaScript in an Electron BrowserWindow

Load JavaScript in an Electron BrowserWindow

2:17 js PRO

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.

js tutorial about Display native desktop dialog windows with Electron

Display native desktop dialog windows with Electron

4:51 js PRO

In this lesson we'll learn about dialog.showMessageBox . This is the most basic Electron dialog but it offers lots of customization options, such as type, icon, title, and buttons. Some of these options vary by platform, so we'll also look at how things differ between Windows and Mac.

js tutorial about Package your Electron application into a executable file with electron-builder

Package your Electron application into a executable file with electron-builder

3:38 js PRO

We’ve been running our app in a development environment using the Electron executable. Now let’s learn how to package our app into a .app or .exe file so that we can distribute it to other users. Electron doesn't provide this functionality out of the box, so we'll use a popular and easy-to-use npm package called electron-builder to handle the details. electron-builder will automatically grab our .ico or .icns file and use that as our app's icon.

js tutorial about Create an icon for your Electron app

Create an icon for your Electron app

0:57 js PRO

Every Electron application needs a custom icon. Mac needs an icns file and Windows needs an ico file. We'll learn how to use a npm module, electron-icon-maker, that takes a 1024x1024 PNG and then outputs all the files we need.

js tutorial about Create a native desktop system menu with the Electron Menu module

Create a native desktop system menu with the Electron Menu module

7:10 js PRO

A main menu is a hallmark of native desktop applications. Electron makes it easy to create native menus and menu items in JavaScript.

We’ll go over creating a menu template using Menu.buildFromTemplate and then setting it as the main application menu via Menu.setApplicationMenu.

js tutorial about Understand Electron’s main and renderer process architecture

Understand Electron’s main and renderer process architecture

3:28 js PRO

Dealing with multiple processes in an application is new for many JavaScript developers. We’ll go over what exactly a process is and what the primary responsibilities of the main and renderer processes are. The main process is primarily responsible for creating native UI elements and managing the application lifecycle, while the renderer process runs the HTML based UI. Accordingly, different APIs are available in each process.

js tutorial about Communicate between Electron processes using the remote module

Communicate between Electron processes using the remote module

4:50 js PRO

remote allows you to seamlessly interact with main process modules as if they were in the renderer process. It’s a super useful abstraction over IPC. We’ll learn how to use it and how to avoid some potential gotchas it has.

Devtron is a devtools extension that the Electron team has made. We’ll be using it to view all of the IPC that happens in our application. In this lesson we’ll learn how to include and use it in our code.

js tutorial about Ship updates to your Electron app with `autoUpdater` (Mac)

Ship updates to your Electron app with `autoUpdater` (Mac)

7:47 js PRO

Once users are using your app, you need a way to ship new features and fixes to them. In this lesson, we’ll learn how to implement auto-updates in your app, which allows you to distribute updates to your application seamlessly. We'll go over how to integrate with Electron's autoUpdater module to check for an update and display a prompt to update once it's been downloaded. For our server side implementation we'll just use a plain file server to keep things simple.

js tutorial about Communicate between Electron processes using IPC

Communicate between Electron processes using IPC

4:40 js PRO

In Electron, we often need to coordinate actions between multiple processes. For example, if a user clicks a button in a renderer process that makes a new browserWindow open, we need to be able to send a message to the main process that triggers this action. We’ll look at how to do just that using the ipcRenderer and ipcMain modules.

js tutorial about Ship updates to your Electron app with `autoUpdater` (Windows)

Ship updates to your Electron app with `autoUpdater` (Windows)

3:30 js PRO

In this lesson, we'll go over a few differences in implementing auto-updates on Windows like handling Squirrel.Windows startup events and configuring electron-builder to build for a Squirrel.Windows target.

js tutorial about Load CSS in a Electron BrowserWindow

Load CSS in a Electron BrowserWindow

2:18 js

In this lesson we'll learn how to load CSS in an Electron BrowserWindow, which is just like loading CSS into the browser. We’ll also use the ready-to-show event to only display our BrowserWindow when its rendering is complete.

js tutorial about Create a "Hello World" app using Electron

Create a "Hello World" app using Electron

2:18 js

Take the first step in learning how to create native desktop applications with Electron. We'll set up a package.json, create an npm start script to launch our app in development, and create a browser window and load a local HTML file into it.

An important concept to understand about Electron is it's multi-process architecture. The main process creates web pages by creating BrowserWindow instances, manages application lifecycle events, and more. Each BrowserWindow instance runs the web page in its own renderer process.

HEY, QUICK QUESTION!
Joel's Head
Why are we asking?