There's a lot of different ways to install Electron. In this video, take a look at the options, prerequisites, and go ahead and create your package.json file and install the library.
- [Instructor] Take a look at what it takes to install Electron. Now, if you go to the Electron website, and you scroll down just a little bit, you can see that there are three releases. The first one is the latest version, which is usually the most stable version of the platform. And then there is the beta, which is a version that is going to be released soon. And finally, there is the nightly version, which is the cutting-edge version of the framework. So I would stay away from that one, and even the beta most of the time. And I just want to show you that the main difference is the version of Node.js that each one of these versions uses, as well as the version of Chromium. So Electron is essentially an application that is wrapped around a window, and it gives you the ability to create menus. But what it's doing is essentially running a browser. And that browser happens to be Google Chrome. And so this Chromium thing that you see here specifying in the releases is the version of Google Chrome that is being used in the browser that you use to create the application. And so different versions of Electron are going to give you capabilities that are dependent on those different versions of Chrome. So in the same way different versions of Node are also going to have different capabilities, and so you can see that in the current version. We use 10.11. And in the other versions, you can use Node 12. Other than that, Electron's actually pretty stable. And what you do with the library is pretty much the same from version to version. Now, this means that you're going to need to have a version of Node.js installed, which you can get from this URL, and you should also have a copy of Git installed, which you can get here. If you're on a PC and you're downloading Git, make sure you also install Git Bash, which is a simple terminal that lets you use the Linux-style commands in your terminal. So in order to get this going, we're going to need to have a terminal application. I'm going to use one called Hyper, but you can use the Mac terminal or Git Bash if you're on Windows. So I'm going to switch over to the desktop. And you can see that I've created a folder here called Electron. So I'll switch over to that folder. Now, in order to create a Node application, you're going to need a package.json file. That is a text file that has information about how the application runs. So I can issue an npm init command. And if you hit Return right now, it's going to ask you a series of questions. There's a quick, little shortcut that you can use called -y that will just say yes to all the questions, so it'll give you the defaults, and it'll write a file that looks like this. So let's go ahead and close out of here. We're done with Hyper. And we'll open this folder up in a text editor. I'm using Visual Studio Code for this project. And you can see the package.json file right here. So let's go ahead and edit this a little bit because we don't need all this stuff. We'll get rid of this right here. We don't really need keywords. We can go ahead and put in my name here for the author. And if you want to, of course, you can put yours. Although we do have a repository for this course, we don't really need to put it in this section right now. And for script, I'm going to modify the script so that the only script we're going to use is going to be called start. And in here, we'll just run the electron command with a period. So when I issue the NPM, so when I start my application, it's going to run the electron command on the current folder. Now, it says here that this is going to look for a main file called index.js. We'll be creating that later. And then, you can put a description in here if you want. You can see that the name right here corresponds to the folder name that you created, and it's also going to be the name of your application. Just make sure that you don't call this Electron because if you try to install the Electron package, and the name of your application is also Electron, you'll have some problems. So let's go ahead and save this. Now because I'm working with Git, I'm going to also add a file called gitignore, and in here, I'm going to make sure that I tell it to first of all, ignore a couple of things. I'm going to ignore something node_modules. That will come in handy in just a second. So let me save that gitignore file. And now what I need to do is actually install Electron in here. So I'm going to pull up a terminal. I don't need to use a separate terminal if you're using Mac and you're on Visual Studio Code. I can just go to this terminal window or use this command key to pull up a terminal. And then I'm going to install the Electron application. So I'll say npm install. And I need to save this as a development dependency. That means that this is something that Node.js is only going to need during development when it bundles the final application. It's not going to be necessary to use this. And so, what I'll install here is Electron. And I want to install a specific version just to make sure we're all on the same page. I'm going to install version 4.1.4, which is the latest stable version as of this recording. So we'll hit Return. Once this is done, you'll see that it's added this section right here called devDependencies, and it's added our electron in there as a developer dependency. Now, we're ready to start working on the application, which will be done in the index.js file. But I'm going to take care of that in the next video.
- Creating a webview app
- Configuring multiple windows and window events
- Using Vue.js with Electron
- Modifying components to improve your app
- Using Vue.js developer tools
- Adding modals
- Creating custom menus
- Managing interprocess communication (IPC) events