---
tags: tutorials
---
# Electron: Getting started from scratch

This document provides an even more depth experience for the Electron quick start guide. The Electron quick start guide assumes that the person reading the guide has already picked out an IDE and is familiar with it. This guide takes it one step further and incorporates step to prepare your IDE and development environment a bit more deliberately. The electron guide is available here: https://www.electronjs.org/docs/tutorial/quick-start

## Getting started

1. Install visual studio code - https://code.visualstudio.com/download
2. After installation, open Visual Studio Code
3. On the left hand navigation click on the Extensions button, or, press `CTRL+Shift+X`
4. There are several plugins that I recommend installing:
* ESLint
* GitLens
* Markdown Shorcuts
* Markdown Theme Kit
* markdownlint
* Vetur
5. Install 64-bit Git for Windows - https://git-scm.com/download/win
* If you are not familiar with answering the questions during set-up, it's generally good to go with the defaults in most cases. When it prompts you for the editor you should be able to pick VSCode
6. Install 64-bit Node JS - https://nodejs.org/en/download/

## Modified Electron Quick Start

### Create source control and project folders

1. Open Windows PowerShell (Windows Key -> Powershell)
2. Type `cd c:\`
3. Type `mkdir source`
4. Type `cd source`
5. Type `mkdir electron-test`
6. Type `cd electron-test`

### Start project

Next we are going to start our project by using the Node JavaScript engine to initialize a package.json with NPM. This will create a package.json file in our project. When we install packages into our project the package.json will act as a manifest file. A node_modules folder will exist at the root with all of the third party packages we install. The manifest instructs the project how to register and use all of these packages!

1. In PowerShell in the electron-test directory (you should be there already)
2. Type `npm init -y`
3. Type `npm i --save-dev electron`

### Creating the main script file

Next we need to open the project in VS Code.

1. Open VS Code
2. Click File
3. Select Open Folder
4. Navigate to `C:\source\electron-test` and click `open`

On the left hand side you will see some icons, click the one that looks like two documents.


This opens the file explorer for the project.

Under the navigation for `ELECTRON-TEST` and click the `New File` button.


Name the new file `main.js` and it will add the file to our project and we'll be able to follow the main electron guide more easily now.

The main script specifies the entry point of your Electron application (in our case, the main.js file) that will run the Main process. Typically, the script that runs in the Main process controls the lifecycle of the application, displays the graphical user interface and its elements, performs native operating system interactions, and creates Renderer processes within web pages. An Electron application can have only one Main process.

Copy the following code into your main.js file.

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

function createWindow () {
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      preload: path.join(__dirname, 'preload.js')
    }
  })

  win.loadFile('index.html')
}

app.whenReady().then(() => {
  createWindow()

  app.on('activate', () => {
    if (BrowserWindow.getAllWindows().length === 0) {
      createWindow()
    }
  })
})

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

I recommend reading more about the file in the main guide here: https://www.electronjs.org/docs/tutorial/quick-start#what-is-going-on-above

### Creating the web page

Like before, click the `new file` icon and create a file named `index.html`.

This is the web page you want to display once the application is initialized. This web page represents the Renderer process. You can create multiple browser windows, where each window uses its own independent Renderer. You can optionally grant access to additional Node.js APIs by exposing them from your preload script.

Copy the following code into the index.html file.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Hello World!</title>
    <meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline';" />
</head>
<body style="background: white;">
    <h1>Hello World!</h1>
    <p>
        We are using Node.js <span id="node-version"></span>,
        Chromium <span id="chrome-version"></span>,
        and Electron <span id="electron-version"></span>.
    </p>
</body>
</html>

### Define a preload script

Again, click the `new file` icon and create a file named `preload.js`.

Your preload script (in our case, the preload.js file) acts as a bridge between Node.js and your web page. It allows you to expose specific APIs and behaviors to your web page rather than insecurely exposing the entire Node.js API. In this example we will use the preload script to read version information from the process object and update the web page with that info.

This part is a bit trickier because it's JavaScript. Basically, in our main.js we create a browser window. When this window loads an event fires called `DOMContentLoaded`. Things loading, actions taken (such as click), and key inputs all fire events in JavaScript (whether its your browser, Chromium in Electron, or js files in Node). Much of JavaScript programming is binding to these events.

In this case, we are defining a preload.js file that is going to bind code to the event and execute that code when the event is fired.

Copy the following code into the `preload.js` file.

window.addEventListener('DOMContentLoaded', () => {
  const replaceText = (selector, text) => {
    const element = document.getElementById(selector)
    if (element) element.innerText = text
  }

  for (const type of ['chrome', 'node', 'electron']) {
    replaceText(`${type}-version`, process.versions[type])
  }
})

Read the main guide for a bit more information here: https://www.electronjs.org/docs/tutorial/quick-start#whats-going-on-above

### Update the package.json file

Open up the package.json file and update it to look like the following:

{
    "name": "electron-test",
    "version": "0.1.0",
    "author": "your name",
    "description": "My very first Electron application",
    "main": "main.js",
    "scripts": {
        "start": "electron ."
    }
}

### Run the application

Back in PowerShell, navigate to the root directory of our test app.

1. Type `cd c:\source\electron-test`
2. Type `npm start`

You'll see some language indicating we're heating up


Then your very first Electron app will launch!


Now you can play around with the index.html and see changes show up in the application after relaunching it. There's probably a way for us to live debug this which I'll figure out at a later time (where we can make changes in VS Code and immediately see them in the app).

### Adding a .gitignore

While not necessary for this project, it's something that is worth understanding now. A gitignore is going to help us define the files and directories that should not be added to git when we commit to source. If we didn't do that at this point we would be adding over 5,000 files to git fomr the `node_modules` folder. When we start up our first project, there will be an appropriate .gitignore there but you may have to modify it if you have personal dev or SSH tokens/files that should be on your computer only.

1. Click `New File` and create the file `.gitignore`
2. In a browser to go `https://www.toptal.com/developers/gitignore`
3. Select `Node` from the list and click `Create`


4. Copy all of the contents into your `.gitignore` file
* This will add ignores for all of the node and electron files
* When we share code on source control, we'll be able to use NPM to restore these files thanks the the package.json file so no need to include them in source!
* Source control should always have the smallest footprint we can possible

5. Scroll down to the end of the file and lets add a new section

#Builds
out/


This will make it so if you continue to the main Electron guide, when you get to the section for Forge you will automatically omit the build output directory.