yannbertrand/gulpfile.js

## gulpfile.js
const gulp = require('gulp');
const babel = require('gulp-babel');
const debug = require('gulp-debug');
const cache = require('gulp-cached');
const plumber = require('gulp-plumber');
const notify = require("gulp-notify");
const electron = require('electron-connect').server.create();

const errorTemplate = '<%= error.message %>';


gulp.task('default', ['transpile', 'copy', 'electron:start', 'watch']);


gulp.task('electron:start', ['transpile', 'copy'], () => electron.start());

gulp.task('transpile', function (callback) {
  gulp.src(['src/**/*.js'])
    .pipe(plumber({ errorHandler: notify.onError(errorTemplate)}))
    .pipe(cache('transpile'))
    .pipe(debug())
    .pipe(babel({
      presets: ['es2015', 'react']
    }))
    .pipe(gulp.dest('dist'))
    .on('end', callback);
});

gulp.task('copy', function (callback) {
  gulp.src(['src/**/*.*', '!src/**/*.js'])
    .pipe(plumber({ errorHandler: notify.onError(errorTemplate) }))
    .pipe(cache('copy'))
    .pipe(debug())
    .pipe(plumber.stop())
    .pipe(gulp.dest('dist'))
    .on('end', callback);
});

gulp.task('watch', function () {
  gulp.watch(['src/**/*.js', '!src/client/*'], ['transpile', electron.restart]);

  gulp.watch(['src/client/**/*.{html,css}'], ['copy', electron.reload]);
  gulp.watch(['src/client/**/*.js'], ['transpile', electron.reload]);
});

## package.json
{
  "name": "electron-connect-issue",
  "version": "0.0.1",
  "description": "Issue #58",
  "main": "dist/app.js",
  "scripts": {
    "start": "node_modules/.bin/gulp"
  },
  "engines": {
    "node": ">=4.5.0"
  },
  "electronVersion": "1.1.0",
  "dependencies": {
    "babel-preset-es2015": "^6.9.0",
    "babel-preset-react": "^6.5.0",
    "electron": "^1.3.5",
    "electron-connect": "^0.5.0",
    "electron-debug": "^1.0.1",
    "gulp": "^3.9.1",
    "gulp-babel": "^6.1.2",
    "gulp-cached": "^1.1.0",
    "gulp-debug": "^2.1.2",
    "gulp-notify": "^2.2.0",
    "gulp-plumber": "^1.1.0",
    "hapi": "^15.0.3",
    "react": "^15.3.1",
    "react-dom": "^15.3.1",
    "socket.io": "^1.4.8"
  },
  "author": {
    "name": "Yann Bertrand",
    "email": "yann@bertrand.com",
    "url": "yann-bertrand.fr"
  },
  "license": "MIT"
}

## src\app.js
const electron = require('electron');
const app = electron.app;

require('electron-debug')();

// Hapi server
const Hapi = require('hapi');

const server = new Hapi.Server();
server.connection({
  host: 'localhost',
  port: '9876'
});

server.start((err) => {
  if (err) {
    throw err;
  }

  const io = require('socket.io')(server.listener);

  console.log('Server running at:', server.info.uri);

  server.route({
    method: 'GET',
    path:'/hello',
    handler: function (request, reply) {
      reply("console.log('hello from hapi server')");
    }
  });
});


// Electron
let mainWindow;

app.on('ready', () => {
  console.log('readyy');
  mainWindow = openMainWindow();
});

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

app.on('activate', () => {
  if (!mainWindow) {
    mainWindow = createMainWindow();
  }
});

app.on('before-quit', () => {
  console.log('before-quit');
});

app.on('will-quit', () => {
  console.log('will-quit');
});

app.on('quit', () => {
  console.log('quit');
});


function openMainWindow() {
  if (!mainWindow)
    mainWindow = createMainWindow();
}

function createMainWindow() {
  const win = new electron.BrowserWindow({ width: 1500, height: 900 });

  win.loadURL('file://' + __dirname + '/client/index.html');
  win.setMinimumSize(780, 270);
  win.openDevTools();
  win.on('closed', () => {
    mainWindow = null;
  });

  return win;
}

## src\client\index.html
<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>electron-connect-issue #58</title>
    </head>

    <body>
        <div id="main">
            <h1>Loading...</h1>
        </div>

        <script>require('electron-connect').client.create()</script>

        <script src="http://localhost:9876/socket.io/socket.io.js"></script>
        <script src="http://localhost:9876/hello"></script>
        <script src="index.js"></script>
    </body>
</html>

## src\client\index.js
const React = require('react');
const ReactDOM = require('react-dom');

const App = React.createClass({
  render: function () {
    return (
      <div>
        <h1>Ready</h1>
        <h2>Hello World</h2>
      </div>
    );
  }
});

ReactDOM.render(
  <App />,
  document.getElementById('main')
);
	const gulp = require('gulp');
	const babel = require('gulp-babel');
	const debug = require('gulp-debug');
	const cache = require('gulp-cached');
	const plumber = require('gulp-plumber');
	const notify = require("gulp-notify");
	const electron = require('electron-connect').server.create();

	const errorTemplate = '<%= error.message %>';


	gulp.task('default', ['transpile', 'copy', 'electron:start', 'watch']);



	gulp.task('electron:start', ['transpile', 'copy'], () => electron.start());

	gulp.task('transpile', function (callback) {
	gulp.src(['src/*/.js'])
	.pipe(plumber({ errorHandler: notify.onError(errorTemplate)}))
	.pipe(cache('transpile'))
	.pipe(debug())
	.pipe(babel({
	presets: ['es2015', 'react']
	}))
	.pipe(gulp.dest('dist'))
	.on('end', callback);
	});

	gulp.task('copy', function (callback) {
	gulp.src(['src/*/.', '!src//.js'])
	.pipe(plumber({ errorHandler: notify.onError(errorTemplate) }))
	.pipe(cache('copy'))
	.pipe(debug())
	.pipe(plumber.stop())
	.pipe(gulp.dest('dist'))
	.on('end', callback);
	});

	gulp.task('watch', function () {
	gulp.watch(['src/*/.js', '!src/client/*'], ['transpile', electron.restart]);

	gulp.watch(['src/client/*/.{html,css}'], ['copy', electron.reload]);
	gulp.watch(['src/client/*/.js'], ['transpile', electron.reload]);
	});
	{
	"name": "electron-connect-issue",
	"version": "0.0.1",
	"description": "Issue #58",
	"main": "dist/app.js",
	"scripts": {
	"start": "node_modules/.bin/gulp"
	},
	"engines": {
	"node": ">=4.5.0"
	},
	"electronVersion": "1.1.0",
	"dependencies": {
	"babel-preset-es2015": "^6.9.0",
	"babel-preset-react": "^6.5.0",
	"electron": "^1.3.5",
	"electron-connect": "^0.5.0",
	"electron-debug": "^1.0.1",
	"gulp": "^3.9.1",
	"gulp-babel": "^6.1.2",
	"gulp-cached": "^1.1.0",
	"gulp-debug": "^2.1.2",
	"gulp-notify": "^2.2.0",
	"gulp-plumber": "^1.1.0",
	"hapi": "^15.0.3",
	"react": "^15.3.1",
	"react-dom": "^15.3.1",
	"socket.io": "^1.4.8"
	},
	"author": {
	"name": "Yann Bertrand",
	"email": "yann@bertrand.com",
	"url": "yann-bertrand.fr"
	},
	"license": "MIT"
	}
	const electron = require('electron');
	const app = electron.app;

	require('electron-debug')();

	// Hapi server
	const Hapi = require('hapi');

	const server = new Hapi.Server();
	server.connection({
	host: 'localhost',
	port: '9876'
	});

	server.start((err) => {
	if (err) {
	throw err;
	}

	const io = require('socket.io')(server.listener);

	console.log('Server running at:', server.info.uri);

	server.route({
	method: 'GET',
	path:'/hello',
	handler: function (request, reply) {
	reply("console.log('hello from hapi server')");
	}
	});
	});



	// Electron
	let mainWindow;

	app.on('ready', () => {
	console.log('readyy');
	mainWindow = openMainWindow();
	});

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

	app.on('activate', () => {
	if (!mainWindow) {
	mainWindow = createMainWindow();
	}
	});

	app.on('before-quit', () => {
	console.log('before-quit');
	});

	app.on('will-quit', () => {
	console.log('will-quit');
	});

	app.on('quit', () => {
	console.log('quit');
	});


	function openMainWindow() {
	if (!mainWindow)
	mainWindow = createMainWindow();
	}

	function createMainWindow() {
	const win = new electron.BrowserWindow({ width: 1500, height: 900 });

	win.loadURL('file://' + __dirname + '/client/index.html');
	win.setMinimumSize(780, 270);
	win.openDevTools();
	win.on('closed', () => {
	mainWindow = null;
	});

	return win;
	}
	<!doctype html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>electron-connect-issue #58</title>
	</head>

	<body>
	<div id="main">
	<h1>Loading...</h1>
	</div>

	<script>require('electron-connect').client.create()</script>

	<script src="http://localhost:9876/socket.io/socket.io.js"></script>
	<script src="http://localhost:9876/hello"></script>
	<script src="index.js"></script>
	</body>
	</html>
	const React = require('react');
	const ReactDOM = require('react-dom');

	const App = React.createClass({
	render: function () {
	return (
	<div>
	<h1>Ready</h1>
	<h2>Hello World</h2>
	</div>
	);
	}
	});

	ReactDOM.render(
	<App />,
	document.getElementById('main')
	);