Electron Framework – Your First Project

  1. Download and install- Visual Studio Code from https://code.visualstudio.com/  this is a much lighter version of Visual Studio. You will need this tool as your code editor.
  2. Download nodejs from https://nodejs.org/en/ then install it.
  3. Create a folder and then write cd at the command prompt and drag and drop the folder after cd and then press enter in order to change the directory .
  4. At the command prompt write npm init, then press enter: when prompted enter the name, description…etc or you can leave them blank if you want- you can enter MIT as a License. This step will create a package.json file in your folder.
  5. Then insert the following command: npm install electron and press enter.  If you have difficulty passing the above commands in command prompt, open command prompt as an Admin. (You can also do steps 3,4 and 5 from Visual Studio Code by opening the folder first then using the visual studio code’s Integrated Terminal. The integrated terminal  is under menu tab “View” ). npm install electron command will create node_modules folder in your folder.
  6. Whenever you want to start any new project, you will need to do steps 3,4 and 5.
  7. Open package.json file and change the following code
     "test": "echo \"Error: no test specified\" && exit 1"
    to
    "start": "electron index.js"
  8. Create new file index.html for your html code. Copy and paste the HTML code below to start your first project .
  9. Create new file style.css for your css styles code. (we will not use this file in this example but you will need it to store your css code for future projects)
  10. Create new file index.js for your javascript code. Copy and paste the Javascript code below to start your first project.
  11. After you have copied and pasted the code: write the command npm start at the Integrated Terminal to see the output of your code (First project).
    ** For more info about Electron check this site: http://electron.atom.io/  
HTML Code
<!DOCTYPE html>
<html>
<head>
<title>First App</title>
</head>
<body>


<h1>I am officially an app developer!!!</h1>


</body>
</html>
——–
– If you want to write content using foreign alphabets include the code
<meta charset="UTF-8">

at the head section of your HTML code.

——-
Javascript Code

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

const path = require('path')

const url = require('url')

// Keep a global reference of the window object, if you don’t, the window will

// be closed automatically when the JavaScript object is garbage collected.

let win

function createWindow () {

// Create the browser window.

win = new BrowserWindow({width:1080, height: 840, minWidth:680})

// 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

})

}

// This method will be called when Electron has finished

// initialization and is ready to create browser windows.

// Some APIs can only be used after this event occurs.

app.on('ready', createWindow)

// Quit when all windows are closed.

app.on('window-all-closed', () => {

// On macOS it is common for applications and their menu bar

// to stay active until the user quits explicitly with Cmd + Q

if (process.platform !== 'darwin') {

app.quit()

}

})

app.on('activate', () => {

// On macOS it’s common to re-create a window in the app when the

// dock icon is clicked and there are no other windows open.

if (win === null) {

createWindow()

}

})