Skip to content

Commit

Permalink
Adds Electron to make the desktop App
Browse files Browse the repository at this point in the history
  • Loading branch information
benoitvallon committed Mar 18, 2016
1 parent c7d643d commit 88a6288
Show file tree
Hide file tree
Showing 7 changed files with 89 additions and 8 deletions.
19 changes: 16 additions & 3 deletions Gruntfile.js
Original file line number Diff line number Diff line change
Expand Up @@ -117,15 +117,22 @@ module.exports = function (grunt) {
},

'exec': {
launch_nw: '/Applications/nwjs.app/Contents/MacOS/nwjs .'
launch_nw: '/Applications/nwjs.app/Contents/MacOS/nwjs .',
launch_electron: 'electron electron.js'
},

'concurrent': {
target: {
nw: {
tasks: ['watch', 'exec:launch_nw'],
options: {
logConcurrentOutput: true
}
},
electron: {
tasks: ['watch', 'exec:launch_electron'],
options: {
logConcurrentOutput: true
}
}
}
});
Expand All @@ -143,7 +150,13 @@ module.exports = function (grunt) {

grunt.registerTask('serve-nw', function () {
grunt.task.run([
'concurrent'
'concurrent:nw'
]);
});

grunt.registerTask('serve-electron', function () {
grunt.task.run([
'concurrent:electron'
]);
});

Expand Down
18 changes: 14 additions & 4 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
This project shows how the source code can be architectured to run on multiple devices. As of now, it is able to run as:

- iOS & Android Apps (based on [react-native](https://facebook.github.io/react-native))
- a Desktop App (based on [NW](http://nwjs.io))
- a Desktop App based on [NW](http://nwjs.io) or based on [Election](http://electron.atom.io)
- a Website App in any browser (based on [react](https://facebook.github.io/react))

A demo for the Website App is available [here](http://benoitvallon.github.io/react-native-nw-react-calculator).
Expand All @@ -16,9 +16,9 @@ A demo for the Website App is available [here](http://benoitvallon.github.io/rea

![Mobile Apps](images/mobile-apps.png "Mobile Apps")

### Desktop App
### Desktop App (NW & Electron)

![Desktop App](images/desktop-app.png "Desktop App")
![Desktop App](images/desktop-apps.png "Desktop App")

### Website App

Expand All @@ -31,6 +31,7 @@ This project uses libraries and tools like:
- [react](https://facebook.github.io/react) for the Website App and Desktop App,
- [react-native](https://facebook.github.io/react-native) for the iOS & Android Apps
- [NW](http://nwjs.io) to package the Desktop App
- [Electron](http://electron.atom.io) to package the Desktop App

This comment has been minimized.

Copy link
@ximet

ximet Feb 12, 2018

@haydenhab57 please, write your comment in English lang

- [flux](https://facebook.github.io/flux) to organize the data flow management
- [css-loader](https://github.com/webpack/css-loader) to integrate the styles in the builds
- [grunt](http://gruntjs.com) to create the builds
Expand Down Expand Up @@ -154,6 +155,8 @@ Congratulations! You've just successfully run the project as a Website App.

## The Desktop App

You can either run the project with [NW](http://nwjs.io) or [election](http://electron.atom.io).

### Requirements for NW

To run the project, you are supposed to run something like:
Expand All @@ -168,13 +171,20 @@ You can also setup an alias to call the binary.

`alias nw="/Applications/nwjs.app/Contents/MacOS/nwjs"`

### Quick start
### Quick start with NW

- `npm run build` to build the project (at least the first time)
- `npm run serve-nw` to launch the desktop app and enable livereload

Congratulations! You've just successfully run the project as a Desktop App.

### Quick start with Electron

- `npm run build` to build the project (at least the first time)
- `npm run serve-electron` to launch the desktop app and enable livereload

Congratulations! You've just successfully run the project as a Desktop App.

# Run the tests

To run the tests, simply run:
Expand Down
56 changes: 56 additions & 0 deletions electron.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,56 @@
'use strict';

const electron = require('electron');
// Module to control application life.
const app = electron.app;
// Module to create native browser window.
const BrowserWindow = electron.BrowserWindow;

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

function createWindow () {
// Create the browser window.
mainWindow = new BrowserWindow({
minWidth: 300,
minHeight: 475,
maxWidth: 800,
maxHeight: 600
});

// and load the index.html of the app.
mainWindow.loadURL('file://' + __dirname + '/index.desktop.html');

// Open the DevTools.
mainWindow.webContents.openDevTools();

// Emitted when the window is closed.
mainWindow.on('closed', function() {
// 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.
mainWindow = null;
});
}

// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
app.on('ready', createWindow);

// Quit when all windows are closed.
app.on('window-all-closed', function () {
// On OS X 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', function () {
// On OS X 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 (mainWindow === null) {
createWindow();
}
});
Binary file removed images/desktop-app.png
Binary file not shown.
Binary file added images/desktop-apps.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
File renamed without changes.
4 changes: 3 additions & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@
"dist": "./dist",
"mainInput": "main",
"mainOutput": "main",
"main": "index.nw.html",
"main": "index.desktop.html",
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start",
"build": "grunt build",
Expand All @@ -30,6 +30,7 @@
"react-native:ios": "react-native bundle --entry-file src/index.ios.js --bundle-output ios/main.jsbundle --platform ios --dev false",
"react-native:android": "react-native bundle --entry-file src/index.android.js --bundle-output android/app/src/main/assets/index.android.bundle --platform android --dev false",
"serve-nw": "grunt serve-nw",
"serve-electron": "grunt serve-electron",
"serve-web": "grunt serve-web",
"serve-web:dist": "grunt serve-web:dist",
"test": "jest",
Expand Down Expand Up @@ -57,6 +58,7 @@
"collectCoverage": true
},
"dependencies": {
"electron-prebuilt": "^0.37.2",
"es6-promise": "^3.1.2",
"events": "^1.1.0",
"flux": "^2.1.1",
Expand Down

0 comments on commit 88a6288

Please sign in to comment.