This is a tutorial for building a Markdown-to-HTML renderer using Electron. It is meant to accompany my session on Building a desktop application with Electron at JSConf Colombia.
The slides for the first part of the presentation are available here.
Steve is the Director of Academics for the Front-End Engineering program at the Turing School of Software and Design in Denver, Colorado, USA.
Turing School is looking for volunteer mentors for our up-and-coming developers.
Participants should have the latest version of Node.js installed. It would be helpful to clone down the repositories below and install the dependencies beforehand.
These two applications are covered much more deeply in the book I'm working on Electron in Action. Today, we'll be building a simple version of the Fire Sale application.
We'll primarily be working through the first project below today, with the second being an opportunity to practice on your own after the workshop. 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 prebuilt version of Electron for your OS and architecture.
Note: There are some issues right now with some versions of Linux and Electron’s
Traymodule—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 calledno-menubarthat will allow you to follow along with a set up similar to Fire Sale.
The format of the session is as follows:
- We'll take a high level look at what Electron is and how it works.
- We'll build an application from the ground up (with some basic styling provided).
- 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.
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. - I will try to serve my code at http://10.10.9.222:9292/ — sometimes this stops working midway through, but if it works, then you'll have the current version of my code at any given moment.
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.