Skip to content

Instantly share code, notes, and snippets.

@stevekinney
Last active September 28, 2016 13:25
Show Gist options
  • Save stevekinney/65c4bdea7ac8b1cde0c2 to your computer and use it in GitHub Desktop.
Save stevekinney/65c4bdea7ac8b1cde0c2 to your computer and use it in GitHub Desktop.

Building a desktop application with Electron

The resources below are meant to accompany my session on Building a desktop application with Electron (Part 1 and Part 2) at O'Reilly's Fluent Conference 2016.

The slides for the first part of the presentation are available here.

Prerequisites

Participants should have the latest version of Node.js installed. The fine folks at O'Reilly have made the prerequisite tools available on a local server.

The URL for this local server: http://172.23.0.9/fluent

Repositories

We'll be working through two projects today. The best way to get set up and ready to role is to clone their repositories and run npm install within each of them.

Running npm install in each of these projects will download a prebuild version of Electron for your OS and architecture. Downloading can be difficult via conference Wi-Fi. So, I made compressed versions of the projects for the 64-bit versions of Windows, OS X, and Linux.

Note: There are some issues right now with some versions of Linux and Electron’s Tray module—which is what we'll be leveraging in the Clipmaster 9000 tutorial. If you have a VM with OS X or Windows, that will work as well. If you can't get it working, don't worry! I set up a branch of the project called no-menubar that will allow you to follow along with a set up similar to Fire Sale.

They are available here. I will also serve them from my machine via the local network.

Format

The format of the session is as follows:

  1. We'll take a high level look at what Electron is and how it works.
  2. We'll build two applications from the ground up (with some basic styling provided)
  3. We'll take a look at the larger ecosystem and answer any high-level questions.

I have built some time in for general-interest questions. So, please don't hesitate to ask.

Following Along

We'll be building two applications from the ground up. People learn in different ways and I've tried to make it as smooth as possible for you—regardless of your learning style.

  • Each repository has a written-out guide that explains much of what I'm going to cover live. This is great if you want to absorb the content and go back through it later. It's also great as a reference down the road.
  • For those of you who like to code-along. I made a condensed version of the tutorial in SLIDES.md. I'll be showing these as a slide show. The goal is to give you a resource to refer to as we go along. Often, in code-alongs, it's easy to get lost or fall behind because you had a minor typo. These slides are designed to help you follow along.

Due to the format, I won't always be able to provide individual attention if you have a minor error. If I can, I will be more than happy to, of course. I encourage you to leverage these resources and to sit next to someone to serve as a second set of eyes.

About Steve

Steve is the Co-Director of Academics at the Turing School of Software and Design in Denver, Colorado. Turing is starting a front-end engineering program in June and is looking for mentors, instructors, and students.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment