Join Ray Villalobos for an in-depth discussion in this video Using the exercises for this course, part of Electron: Building Cross Platform Desktop Apps.
- [Instructor] All of the files for this course are freely available in GitHub for all users at this URL. In GitHub, you'll see that the project is organized into branches. Each branch corresponds to a video in the course. They are named according to the video they correspond to. So if you see a B at the beginning of the name, those would be the files for the project at the beginning of the video. And if you see an E at the end, those are the files for the project at the end of the course. Now, you can clone this repo into your local hard drive if you want to follow along.
The best way to work with the project is to clone all the branches at once. In order to do that, you'll need Node.js as well as Git installed. When you install Git, make sure you add the Git Bash terminal in Windows. It makes running the commands more consistent. You can find Node.js and download the installer at this URL, and you can find Git and download the installer for your platform at this URL. So, let me show you how to clone all the branches for this project. First, I'm going to go to the GitHub repo, and I'm going to click on this button to copy the link to the repo.
Once I do that, I'm going to switch over to a Terminal, make sure that I'm in the Desktop. So I'll do a cd ~/Desktop. On a PC, I'll be running something like Git Bash or something that is compatible with Unix terminal commands. Once I do that, I can create a directory, I'll do mkdir, and then call this Electron, and change directory to Electron, and now I can issue my git clone command. It's going to be a little different, I'll do a git clone command with a --bare option.
That's going to download pretty much just the contents of the .git folder. So I'm going to paste the URL from Git, and them I'm going to add an extra .git at the end. So this will download the bare repository, now we need to convert that to a regular repository. So, I'm going to use the git config and change a variable called core.bare, which is a boolean variable, to false. That means that it will no longer be a bare repository.
Now if I issue a git reset --hard command, it's going to reset the head pointer, and essentially this is going to give us all of the different branches. Let's go ahead and clear this out, and issue a git branch command. You can see that I have not just the master branch, but every other branch in the project. If I'm watching a video at the beginning of chapter three, and it's the third movie, and I want to get the files at the beginning of that video, then I'm going to issue a git checkout, and then 03_03B, and now I'll be able to open these files in my editor at the beginning of the third chapter and the third video.
Now one thing I want to mention is that if you've made some modifications to files when you do a git checkout command, you can issue a git stash command before, so that it clears out any of the changes you have made. Now let's go ahead and checkout the master branch again. Now we're in the master branch, and one of the things you want to do immediately is also install all of the dependencies for this project. So you can issue an npm install command, and that will look into the finish package .jsm file and install all of the known modules that you're going to need for this project.
Depending on how your permissions are set up, you may need to type a pseudo command at the beginning of some of these commands. Once everything's installed, I'm going to clear this out, we can open up the Electron folder in our favorite editor. I'm going to be using the Atom editor in this course, and consequently that editor is itself an Electron application. As a matter of fact, Electron was made in conjunction with the Atom editor, and then eventually split as its own project.
And that's all there is to the installation, let's get started with our application.
- Creating your first app
- Configuring multiple windows and window events
- Integrating React.js
- Creating external components
- Passing events through props
- Saving data
- Using Bootstrap components in Electron
- Creating a multipanel app
- Creating custom menus
- Packaging the application