Part 2: React in Electron

The ability to utilize next-gen building platforms without headache-free style

---

What headache? Are you a f**##$ idiot?!

There's no bigger headache for me than to exercise hours for build tools, and non-trivial development pipelines at the inception of a project.

React is a library who's intention is to simplify the development of user facing applications; and built by Facebook (Thanks Facebook!).

(Oh yeah, it uses Javascript.. That is pretty cool.)

---

RE: React, play well with Electron

    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.1/react.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.1/react-dom.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.8.1/axios.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-alpha1/jquery.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>

dependencies necessary for React to play with Electron, plus axios

Let's get some React to integrate!

Check out this awesome project at CodePen!

ok, plugging it in, you should have something similar to the project in this repo!

Part 1: Child process as prelude to interprocess communication

The child process as prelude to interprocess communication

---

What the hell are you talking about??
Not EMScripten, not any R&D cool finding, just some observation of using the Electron app pattern.

Electron is a cross-platform framework that glues system and browser via interprocess communications; and developed by Github (major thanks!).

(Oh yeah, it uses Javascript.. That is pretty cool.)

---

EE: Electron boiler, meet Express boiler

'use strict';

const electron = require('electron');
const app = electron.app;
const BrowserWindow = electron.BrowserWindow;
const url = 'http://127.0.0.1:1987';

let mainWindow, child;

function windowRouter(_route) {
  return url + '/' + (_route || '');
}

function renderWindow() {
  mainWindow = new BrowserWindow({width: 800, height: 600});
  mainWindow.loadURL(windowRouter());
  // default to inspector mode in Chromium
  mainWindow.webContents.openDevTools();
  mainWindow.on('closed', function() {
    mainWindow = null;
  });
}

function createWindow () {
  renderWindow();
  let exec = require('child_process').exec;
  child = exec('node ./server.js');
  child.stdout.on('data', function(data) {
      console.log('stdout: ' + data);
  });
  child.stderr.on('data', function(data) {
      console.log('stdout: ' + data);
  });
  child.on('close', function(code) {
      console.log('closing code: ' + code);
      child.kill();
  });
}

app.on('ready', createWindow);

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

app.on('activate', function () {
  if (mainWindow === null) {
    createWindow();
  }
});

main.js

#!/usr/bin/env node
var express = require('express');
var app = module.exports = express();
var server = require('http').createServer(app);
var bodyParser = require('body-parser');
app.set('trust proxy', true);
app.use(bodyParser.json({limit: '50mb'}));
app.use(bodyParser.urlencoded({limit: '50mb', extended: true}));
app.use(require('cookie-parser')());

app.get('/', function(req, res) {
  console.log('GET /');
  res.send('<h1>foo lala</h1>');
})

var port = 1987;
var ipaddr = '127.0.0.1';
server.listen(port, ipaddr, function() {
  console.log('Express server listening on port ' + server.address().port + ' at ' + server.address().address);
});

server.js

npm start

> electron-quick-start@1.0.0 start /var/www/electron-quick-start
> electron main.js

stdout: Express server listening on port 1987 at 127.0.0.1

stdout: GET /

terminal

browser

The JS above was near identical, and the HTML was identical, to Electron's boilerplate, and package.json required modifying the additional packages. It's a good place to start!