Electron Fundamentals, v2 Electron Fundamentals, v2

Building Apps with electron-packager


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 "Building Apps with electron-packager" 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 demonstrates how to build the app for production.

Get Unlimited Access Now

Transcript from the "Building Apps with electron-packager" Lesson

>> Steve Kinney: We have one final thing that we need to do is we need to build this application, right. We want to package this application so that somebody does not need to start it up from the command line. And there's kind of two basic ways to do this. If you are using Electron Forge, this is done for you, right.

[00:00:19] It's already wired together. If you are doing it by hand, you do need to a little bit of work. There is a library called Electron Packager, which just basically does the hard work of getting you the right electron binary for your system. So let's take a look at Electron Packager real quick.

>> Steve Kinney: Let's look at another Electron Userland package. Electron Packager basically finds the version of Electron for the OS that you're building it for, does the branding for you so you can get icons and stuff along those lines, and put them in place, and then builds that binary for you to distribute.

[00:01:01] What we're not gonna talk about in this workshop today for just a really practical reason is, code signing, which is super important because most operating systems will not let you push out updates unless you have code signing in place. What is code-signing? It's basically validating that the code for the application is from you, right.

[00:01:21] Cuz otherwise someone can man in the middle of your update server, push out malicious updates, it's happened to applications before. So most operating systems have some form of code signing to use a verified certificate to make sure the code is from who it says it is, right. So unless they have your private cert as well, they cannot push out a signed binary.

[00:01:40] The reason we're not gonna cover this is, one, it's different for every operating system, and two, most of the time it will cost you money, right. I think for Windows it's about $150. Apple has their developer program, so on and so forth, right. Sign in application is again, bespoke for every operating system.

[00:01:57] Likely if you want to distribute for multiple operating systems, you're gonna need to do this for each one of them. Like yeah, you can develop on a Mac or you can develop on Windows, you can develop on Linux. But if you like to distribute, you're gonna need to sign the application for each one of those platforms.

[00:02:09] So we're not gonna get totally in there. The documentation is pretty good on this and there's also a book that has a chapter on it like plug plug, if you wanna kind of get into it. There's different ways to distribute the application. You could, theoretically, put it, if it's open source and you can put online, GitHub actually has a auto update service.

[00:02:27] You can use stuff like the Mac app store, stuff along those lines. All of that is very there, but we're just gonna get it to the point, where we have an unsigned application that we can bundle, that you can double click on, cuz I feel like that's very validating, and a good way to kind of wrap this all up together.

[00:02:43] So in every version of Firesale, I've had this Electron Packager in there. And Electron Packager basically gives you the ability to get the right Electron binary. We've just been using one that's in our node modules folder. But here we wanna actually change the icon from that Electron icon to our icon.

[00:03:07] We want to name it the application. Still to this day on MacOS, you can still see that it says Electron up here. That's not great. What we wanna do is we wanna brand it with the name of our application, so let's go ahead and do that. One thing I just wanna point out real quick is, in this, maybe I should take out some of the crashes.

[00:03:28] That seems good, right?
>> Steve Kinney: Cool. I just wanna point out real quick that in this Firebase packaging branch, the big difference is it's got icons, right? You'll notice that there's three different files, because nothing is easy in life and the three OSes all use different icon formats. So sorry, cool.

[00:04:00] One of the things I will say is while Electron Packager on the tin, likes to say that you can build for all three operating systems, effectively assume that you will need a Mac for building for Mac OS, a Windows machine for building for Windows, and a Linux machine for building for Linux, right?

[00:04:20] It will try to build all of those, it'll try to use WINE on Linux or a Mac to build a Windows binary. You can just guess how that's gonna go for you. Even Electron Forge, they use Electron Packager under the hood. They're like, yeah, you can only build for the OS you're currently running on.

[00:04:37] So let's just assume that we're gonna write a few lines of configuration that seems like we could do all of those things. Assume that you can only build on the platform you're currently running on. So if I just ran Electron Packager, it would actually as a build script, it would actually go ahead and get me one for my architecture and OS.

[00:04:58] So most of the code we're going to be doing right now is actually going to be in package JSON. Because who doesn't like some good package JSON coding. So we've got the start and test. Let's do a build. I'm actually gonna make three. And so for whatever operating system you're on, follow the one that best suits you.

[00:05:20] I'm gonna run the Mac one, but I will, cuz the only major difference is the icons, right? So I'll actually write all three with some copy and paste action. But you will likely for following along, only need one of them. Do build-mac, build-win, build-linux, and then I'm gonna cheat just so I don't have to type a lot, and I'm gonna give myself a build which is,

>> Steve Kinney: Going to be npm run build-mac. Cool.
>> Steve Kinney: All right. That works, and now what we're gonna want to do is go ahead and we'll do electron-packager. The current directory dot, so the current directory.
>> Steve Kinney: And let's take a look at the docs.
>> Steve Kinney: So a lot of it is kind of in there for us, right.

[00:06:28] So we can have the source, that's that dot that we did. The app name, these will all be kind of like filled in automatically depending on, if you don't specify them directly, they will be the platform and architecture that you're currently on. Cool, so let's go ahead and we'll say,

>> Steve Kinney: Gonna be a little bit of backslash action here for the quotes.
>> Steve Kinney: Build.
>> Steve Kinney: So that's gonna go into our build directory. And I'm also gonna do --overwrite. And that's just basically, Electron Packager will throw an error, if there's already something in that directory. We don't necessarily want that, so what we're gonna do is simply say, overwrite it.

[00:07:24] So then I'll do an npm run build.
>> Steve Kinney: And you can see, all right, packaging for Darwin, which we learned was Mac. It's actually going to prune all the dev dependencies. So if you're using babble, none of that is going to be included in your bundle. It's gonna move stuff over, so only the stuff that are direct dependency.

[00:07:44] So if there are things that are not needed in the run time of your application that you're using for a build process, like eslint rules and stuff like that, make sure those are in dev dependencies. Otherwise you are shipping them to your users. Cool. And you can see wrote a new app to build firedsale-darwin.x64.

[00:08:01] So I can go to build,
>> Steve Kinney: And see that this one, the one from today is a lowercase one. It's got this lowercase firesale name and it's still got the overall like electron. But I can double click it and I do have an application and it doesn't say electron here.

[00:08:24] We can make this a little bit better.
>> Steve Kinney: Go ahead, I'm just gonna delete one. Which in here, there is one special field that we can use on top of this main one, which is product name, which we saw earlier. This one will give it the way we really want it formatted.

[00:08:44] Cool, so I'll run that again.
>> Steve Kinney: All right, there it is. Now we can see it's named appropriately. And go ahead, it's got the right, everything is in place. It's still got this Electron icon. Cool, so we can actually fix that as well.
>> Steve Kinney: We'll actually say,
>> Steve Kinney: Back slash those.

>> Steve Kinney: If I can remember what it was.
>> Steve Kinney: I think I need the ICNS.
>> Steve Kinney: Cool, that file has the retina ones and everything in it. All right, let's give that a shot.
>> Steve Kinney: So you can see, I've now got my custom icon.
>> Steve Kinney: Go over here, you can see that icon is over here in my dock, right?

[00:10:28] With Windows, I believe you want the .ico file, and with Linux, you want the .png in there. And so you set those depending on which operating system you're running. And so you should actually get a pretty fully branded one as well.