Creating the a basic application that simply loads a site from the web is pretty simple. After you install electron, the main process sets up the application and allows you to create browser windows that load up any websites you want to.
- [Voiceover] Electron makes it easy to create applications with modern web technologies. To get everything working there is a bit of setup as well as some installations that we need to do. Now the first thing you'll need to do is to create a package.json file. That's going to have some minimal information about the setup of the application. We're going to need the app's name as well as a version number. Now if you want to, you can also include the location of a special java script file that's going to set up your application. That file is what Electron calls The Main Process.
We'll do that in just a minute. Now if you don't add this information to your packet.json file, Electron assumes that it's a file called ndex.js in the current directory. You'll also need to install the Electron npm package using the Node Package Manager. That of course means that you'll have to have Node.js installed in order to work with Electron. I recommend that you install it both locally as well as globally. Now make sure you check the instructions on using the exercises for this course if you need help installing Node.js.
In most applications, you'll be working in one of two places, the most important is called The Main Process. This is a java script file with some basic information about the application. We can point to it from our package.json document but will also need to create that file ourselves. Now we'll do that in just a minute. Now, the second place is called the Renderer Process. Electron after all is technically just a browser so the Renderer Process is what goes inside your "browser window". Now the two process can talk to each other.
We'll create a Renderer Process later on in a separate video. Now let's talk a little bit more about this Main Process. As I mentioned before it's where you set up and create your application. You start by requiring the Electron Library just like you would do with any other Node Package. The Electron Library has a series of objects that you can use to set up things. The most important of these is the BrowserWindow Object, of course, this is what you create windows with. Now, since Electron is a wrapper for a Chrome Browser, you can easily load up pages from the internet into a browser window and it will work pretty much just like a regular browser window, but it will look and behave as a regular application that has menus, icons, and everything else you'd expect from a regular app.
Now of course, you can a lot of other things in this Main Process, including: opening up your own files, creating custom menus, and process and send events between the Main and the Renderer Process. Now, we'll save that for later. Let's get started by just making a window that loads a website. So first, I'll start off by creating my package.json file. Right now we have a index.js file that's empty as well as a packge.json file that's also completely empty. So, just like any other package.json, we have to create a json object and it's going to have a couple of parameters.
First, of course, the name of our application, and you can call it whatever you want I'll call mine Electron App. It can't have any spaces, but you can use hyphens and underscores if you want to. Next, we're going to need to add a version number and we'll just put 1.0.0 but you can use whatever you want here. And if you want to, you can also add the location of the main file. If you don't do it, it's going to assume that it's a file called index.js and we already have one right here so we'll just let it do that.
Let's go ahead and save this. That's pretty much all we need in package.json, but we do need to install a couple of things. So, let's switch over to a terminal and I'm going to make sure I'm in the current directory. Now, if I cd to the Desktop, that's usually where I put all my files, and I know that I have a folder on the desktop called Electron. This is where our application is, and what I want to do is do an npm install of Electron, and first, I'm going to install it globally so that I can use commands into terminal.
So, npm install minus g electron and hit return. Right, once that's done, I'm going to go ahead and clear the screen and I'm going to do the same thing but this time I'm going to add the minus minus save dev flag. Now what that's going to do is save Electron as a development dependency of our project. So let's go ahead and hit return. Let's go ahead and clear that and what that's going to do is create a node modules folder that has the electron package inside it.
It's also going to add a node here to our package.json file called devDependencies with Electron on it. So, that's all we need to do with this package.json file, so let's go ahead and switch over to the index.js document. Now the first thing we need to do is, of course, require the library, and you do that in node.js and Electron is technically a node.js application just by using the require statement. Now, we can do that by creating a variable called Electron, and then requiring the library, which is also called Electron, into it.
There are several objects that you can use within this Electron library and the one that we need the most is this one called BrowserWindow. So, we'll create a new variable called BrowserWindow and match it to electron BroswerWindow. This is an object that is inside Electron, and then we'll create another one that will hold our application and that's going to require the electron and then electron has an app method which holds most of the things that we need to create applications.
Once you create this app, we can look for an on event that is going to do something when the application is ready to be run. Now here we can put in a function name or a function literal. I'll just create a function literal here so that the application does something when it's ready to go. And in here, we're going to create a variable for the window that we're going to be displaying something in. So, we'll create a variable, I'll call it appwindow; you can call it whatever you want.
And then, we'll say appWindow is going to be a new BrowserWindow, and usually in here you can pass along an object with settings, but we're just creating a very basic app so we're not going to worry about this right now. You can also use this appWindow to load a URL. So, there's a loadURL method and in here we can type in just a regular web URL, so I'll type raybo.org which is my blog.
And that's all we need to create a simple application. So, let's go ahead and save this and switch back over to our terminal and I know I'm in the proper directory so all I need to do now is execute an electron and then a period for the current directory. And you can see that Electron will run, and it will give us a view of this website. Now, this is the simplest type of application that you can do. Notice that this is just a regular sort of application window; it has a menu, it's called Electron, and it has some default menu items here.
So, this is no different than really just loading a webpage into a browser, but the advantage is that it does look like a regular application. So, this is absolutely the simplest way of creating an application with Electron.
- 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