Table of Contents

electron quickstart

Source

From scratch

npm init
npm i electron-prebuilt --save-dev

Resulted files

Simple test

/package.json 

{
  "name": "my-first-electron-app",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "electron ."
  },
  "author": "ssm2017",
  "license": "MIT",
  "devDependencies": {
    "electron-prebuilt": "^0.37.2"
  }
}

/index.js 

var app = require('app');
var BrowserWindow = require('browser-window');

app.on('ready', function() {
  var mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
        'web-preferences': {
            'web-security': false,
            "webgl": true
        }
  })
  mainWindow.loadUrl('file://' + __dirname + '/index.html');
  // mainWindow.loadUrl('http://html5test.com/'); // to see what is available
  // mainWindow.openDevTools(); // to show the dev tools by default
})

/index.html 

<html>
  <head>
    <title>yo</title>
  </head>
  <body>
    <p>coucou</p>
    <script type="text/javascript">
      require('./app.js');
    </script>
  </body>
</html>

/app.js 

document.write("the current version of io.js is " + process.version)

var fs = require('fs');

var contents = fs.readFileSync('./package.json', 'utf8');
alert(contents);

Multi windows

/package.json 

{
  "name": "second",
  "version": "1.0.0",
  "description": "",
  "main": "app.js",
  "scripts": {
    "start": "electron ."
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "electron-prebuilt": "^0.37.2"
  }
}

/app.js 

var app = require('app');
var BrowserWindow = require('browser-window');
var ipc = require('ipc');

app.on('ready', function() {
  var mainWindow = new BrowserWindow({
    width: 800,
    height: 600
  })
  mainWindow.loadUrl('file://' + __dirname + '/main.html');

  var prefsWindow = new BrowserWindow({
    width: 400,
    height: 400,
    show: false
  })
  prefsWindow.loadUrl('file://' + __dirname + '/prefs.html');

  ipc.on('show-prefs', function() {
    prefsWindow.show();
  })
  ipc.on('hide-prefs', function() {
    prefsWindow.hide();
  })
})

/main.html 

<!DOCTYPE html>
<html>
  <head>
    <title>main</title>
  </head>
  <body>
    main
    <script type="text/javascript">
      require('./main.js');
    </script>
  </body>
</html>

/main.js 

var remote = require('remote');
var ipc = require('ipc');
var Menu = remote.require('menu');

var menu = Menu.buildFromTemplate([
  {
    label: 'Electron',
    submenu: [
      {
        label: 'Prefs',
        click: function() {
          ipc.send('show-prefs')
        }
      }
    ]
  }
])

Menu.setApplicationMenu(menu);

/prefs.html 

<!DOCTYPE html>
<html>
  <head>
    <title></title>
  </head>
  <body>
    Prefs
    <script type="text/javascript">
      var ipc = require('ipc');
      var button = document.createElement('button');
      button.textContent = 'Hide';
      button.addEventListener('click', function() {
        ipc.send('hide-prefs');
      });
      document.body.appendChild(button);
    </script>
  </body>
</html>

, ,