This course is out of date and does not reflect our standards or industry best practices.

Check out a free preview of the full Electron Fundamentals, v2 course:
The "Starting the Electron App" Lesson is part of the full, Electron Fundamentals, v2 course featured in this preview video. Here's what you'd learn in this lesson:

Steve discusses what the end application will look like, then jumps into the code by first giving background on versioning history as it relates to the package.json, then spinning up the app.

Get Unlimited Access Now

Transcript from the "Starting the Electron App" Lesson

>> Steve Kinney: Right, so we're gonna build this markdown text editor. Markdown it's called Fire Sale cuz like price markdowns, it was a stretch but work with me here. So there's a repo that is should be in the notes, and it is Fire Sale FEM v2 cuz this is the second version of it.

[00:00:18] And, what's gonna happen, let's actually take it for spin. What's gonna happen is we have some markdown that we right over on the left side, and then we see it rendered on the right side will be able to save file system. We go to export .HTML BIBA open up text files and markdown files on our computer and edit them, we're gonna save over them, so on and so forth.

[00:00:38] And like you can see from those two currently disabled buttons that will be able to show it in the file system, and open it in the default application. Not bad for our first Electron application. Cool, so let's get into it. So, here I am in my terminal, which again, as I mentioned before is an Electron application.

[00:00:59] And, I can go ahead and let's take a little tour of the code using, this is cute right, another Electron application, right? We're all having fun with this running gag? All right so, let's take it for a spin. I have the dependencies installed, but if you don't, this is a really great time to run npm install.

[00:01:21] And hopefully, by the time I'm done with tour, it's done. So, a lot of the package JSON is what we'd normally expect. Again, we have this brand new app /main.js and you if you look at my directory structure, there's just a JavaScript file called main.js. We've got some devDependencies, some of which we will be using later in the workshop.

[00:01:48] Start is just running electron dot. I don't have Electron globally installed. If you run like npm start it says this electron here will be from your node modules directory. So once you do an npm install, you'll have a project specific version of electron and that version right now is 3.0.

[00:02:11] Quick note on version numbers, which is basically, for the longest time electron was sub 1.0, right, 0.13, 0.14, 0.15. All right, when the API stabilized, it hit 1.0. Right, and this is incredibly important if you're writing a book and you're keeping track of version numbers is hit 2.0 and then like three months later it hit 3.0 because they went to a new version in scheme.

[00:02:37] And those basically tracking versions of V8 and node which kind of has those move up, the version number goes up. So, it's not necessarily always breaking API changes, it is also just versions of V8 as the increments you kind of know what you're working with in that case.

[00:02:56] So, if you are watching this course later, you're like it's 4.0 now. This is likely still, most of the content of this course will, knock on wood, be very valid and useful. There will be minor API changes, some of them just caused mostly by internal changes and stuff along those lines.

[00:03:14] But the API, in my experience, has been incredibly stable. Again, with the little parts of like, API behaves very differently cuz of the curious concerns in Chrome, and stuff along those lines. So, just wanted to point that out. So to start, we'll do electron dot so on and so forth.

[00:03:33] My main.js fault right now is pretty simple. It's a console log with this as an Electron application, sound good? Let's take it for a spin.
>> Steve Kinney: And, few things to notice here. One, my console.log works. So that's the first really great and wonderful part of this is that it didn't crash and burn.

[00:03:58] Two, is that you'll see that it's still hanging there, right, you can you see that little but it didn't put me back to the command line. And, for you, you should likely see either in your task bar in Windows or in your Doc, a little Electron icon and if you command tab you should also see it as well.

[00:04:20] I have my doc on the other side, let me actually switch over.
>> Steve Kinney: You can see I've got the Electron icon right here. Now, you might be like, I don't see an application, which makes total sense. We talked about the main.js as kind of like your server. We haven't actually spun up a user interface yet.

[00:04:42] So, let's go ahead and do that because this is the world most boring Electron application right now. And it's not doing anything that I could have done with a very simple node process. This is also considering it's just a console log, the world most boring node application as well, so we should fix it on either level.

[00:04:59] So go ahead, and if we hit Ctrl+C, we're back on the command line.