Create your account

Already have an account? Login here

Note: By joining, you will receive periodic emails from Coursetro. You can unsubscribe from these emails.

Create account

How to Install Electron - Tutorial

By Gary simon - Nov 27, 2017

This tutorial is based on our 100% free course: Creating Desktop Apps with Electron Tutorial

Electron is a powerful framework that allows you to build native desktop applications for multiple Operating Systems (Windows, Mac and Linux) while using web technologies such as HTML, CSS and JavaScript.

Throughout this course and this tutorial, I'm going to show you exactly how to get up and running with this amazing framework.

Let's get started!

If you prefer watching a video..

Be sure to Subscribe to the Official Coursetro Youtube Channel for more videos.

..video coming soon..

Prerequisites

There's a few things you're going to need before we begin. We will be using NPM (Node Package Manager) to install Electron, which requires Nodejs to be installed.

If you're not sure if you have it installed, visit Nodejs.org and visit the downloads section. Download and run the appropriate installer based on your operating system, and follow through the guide with all of the default settings.

Open up your command line or console and type:

$ node -v
$ npm -v

Both of these commands should provide you with a version number.

If so, you're ready to proceed to the next step!

Installing Electron

As mentioned earlier, we use NPM to install Electron.

First, let's create a new folder for our project within our command line:

$ mkdir crypto-app
$ cd crypto-app

We're going to run the npm init command to create a package.json, which will store our project settings and dependencies:

$ npm init -y

Note: The -y flag provides default options automatically.

We have a few different installation options depending on our project.

You can choose to either install Electron globally on your computer with the following command (don't run this for now):

$ npm install electron -g

..or, you can install it as a development dependency in your app, which is what we will do.

Run the following command:

$ npm install electron --save-dev --save-exact

Bootstrapping our Electron App

When I say "bootstrapping", I mean, let's create the files necessary to get the most basic Electron App working as possible.

At minimum, this requires a single JavaScript file and an HTML file.

Open up your code editor (I use Visual Studio Code) and open the new project folder we created.

Inside, create a new file called main.js. Before adding anything to it, let's also visit the package.json file and make a couple updates as shown below:

{
  // Other properties removed for brevity

  "main": "main.js",            // Make sure that is main.js
  "scripts": {
    "start": "electron ."       // Update this
  },

  // Other properties removed for brevity
}

The scripts property will allow us to run npm start in the console to launch our Electron app, instead of writing electron .

Let's take a look at the QuickStart Guide from the official Electron Documentation. 

If you scroll down, you will see main.js along with associated code for our JavaScript file. Copy and paste this entire code section into the main.js file in our project.

Before continuing, I want to describe what is happening in each of the sections that have been pasted in this main.js file, starting at the top:

const {app, BrowserWindow} = require('electron')
const path = require('path')
const url = require('url')

First, we're defining a few necessary variables for both Electron, and working with file locations.

let win

function createWindow () {
  // Create the browser window.
  win = new BrowserWindow({width: 800, height: 600})

  // and load the index.html of the app.
  win.loadURL(url.format({
    pathname: path.join(__dirname, 'index.html'),
    protocol: 'file:',
    slashes: true
  }))

  // Open the DevTools.
  win.webContents.openDevTools()

  // Emitted when the window is closed.
  win.on('closed', () => {
    // Dereference the window object, usually you would store windows
    // in an array if your app supports multi windows, this is the time
    // when you should delete the corresponding element.
    win = null
  })
}

let win as noted, is a global reference of the window object that will be created below.

The createWindow() function helps define the actual application window that will be loaded once a user runs the application. 

This includes setting properties associated with the browser window via BrowserWindow, such as width, height and other properties that exist, as well as opening Dev Tools with .openDevTools(). This allows you to use a code and console inspector, similar to Chrome browsers.

The final section simply sets win = null when the app has been closed.

app.on('ready', createWindow)

app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit()
  }
})

app.on('activate', () => {
  if (win === null) {
    createWindow()
  }
})

app.on('ready'.. calls the createWindow() function from above when the app is ready.

window-all-closed calls app.quote() on non-mac operating systems.

activate calls createWindow() if win is null.

Going back to the QuickStart Guide, Also copy and paste the index.html sample code into a new file called index.html in the root folder of our project:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Hello World!</title>
  </head>
  <body>
    <h1>Hello World!</h1>
    We are using node <script>document.write(process.versions.node)</script>,
    Chrome <script>document.write(process.versions.chrome)</script>,
    and Electron <script>document.write(process.versions.electron)</script>.
  </body>
</html>

Save both of our files and open up your console. Run the following command:

$ npm start

Your app should now run and look like this:

Ugly, huh? Don't worry, we will make it look a lot better shortly.

Going Forward

In the next lesson, we're going to focus on Menus in Electron.

This tutorial is based on our 100% free course: Creating Desktop Apps with Electron Tutorial


Share this post




Say something about this awesome post!