Skip to content
This repository has been archived by the owner on Mar 27, 2018. It is now read-only.

Commit

Permalink
Initial commit.
Browse files Browse the repository at this point in the history
  • Loading branch information
karmainside committed Feb 11, 2017
0 parents commit 9bd471b
Show file tree
Hide file tree
Showing 41 changed files with 965 additions and 0 deletions.
16 changes: 16 additions & 0 deletions .editorconfig
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
# editorconfig.org
root = true

[*]
indent_style = space
indent_size = 4
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true

[*.json]
indent_size = 2

[*.md]
trim_trailing_whitespace = false
16 changes: 16 additions & 0 deletions .gitignore
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
node_modules
.DS_Store
Thumbs.db
*.log
*.autogenerated

# ignore everything in 'app' folder what had been generated from 'src' folder
/app/stylesheets
/app/app.js
/app/background.js
/app/env.json
/app/**/*.map

/dist

/coverage
24 changes: 24 additions & 0 deletions .travis.yml
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
os:
- linux
- osx

branches:
only:
- master

env:
- NODE_VERSION="6.3.0"

before_script:
- chmod +x ./scripts/travis-build.sh

script: ./scripts/travis-build.sh

cache:
directories:
- node_modules

notifications:
email:
on_success: never
on_failure: change
9 changes: 9 additions & 0 deletions LICENSE
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
The MIT License (MIT)

Copyright (c) 2017 Vadzim Miashaikin

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
127 changes: 127 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,127 @@
# electron-boilerplate [![Build Status](https://travis-ci.org/szwacz/electron-boilerplate.svg?branch=master)](https://travis-ci.org/szwacz/electron-boilerplate) [![Build status](https://ci.appveyor.com/api/projects/status/s9htc1k5ojkn08fr?svg=true)](https://ci.appveyor.com/project/szwacz/electron-boilerplate)

A minimalistic yet comprehensive boilerplate application for [Electron runtime](http://electron.atom.io). Tested on macOS, Windows and Linux.

This project does not impose on you any framework (like Angular or React). It tries to give you only the 'electron' part of technology stack so you can pick your favorite technologies to build the actual app.

# Quick start

The only development dependency of this project is [Node.js](https://nodejs.org), so just make sure you have it installed.
Then type few commands known to every Node developer...
```
git clone https://github.com/szwacz/electron-boilerplate.git
cd electron-boilerplate
npm install
npm start
```
... and boom! You have a running desktop application on your screen.

# Structure of the project

The application is split between two main folders...

`src` - this folder is intended for files which need to be transpiled or compiled (files which can't be used directly by Electron).

`app` - contains all static assets (put here images, css, html etc.) which don't need any pre-processing.

The build process compiles all stuff from the `src` folder and puts it into the `app` folder, so after the build has finished, your `app` folder contains the full, runnable application.

Treat `src` and `app` folders like two halves of one bigger thing.

The drawback of this design is that `app` folder contains some files which should be git-ignored and some which shouldn't (see `.gitignore` file). But thanks to this two-folders split development builds are much (much!) faster.

# Development

## Starting the app

```
npm start
```

## Upgrading Electron version

The version of Electron runtime your app is using is declared in `package.json`:
```json
"devDependencies": {
"electron": "1.4.7"
}
```
Side note: [Electron authors advise](http://electron.atom.io/docs/tutorial/electron-versioning/) to use fixed version here.

## The build pipeline

Build process is founded upon [gulp](https://github.com/gulpjs/gulp) task runner and [rollup](https://github.com/rollup/rollup) bundler. There are two entry files for your code: `src/background.js` and `src/app.js`. Rollup will follow all `import` statements starting from those files and compile code of the whole dependency tree into one `.js` file for each entry point.

You can [add as many more entry points as you like](https://github.com/szwacz/electron-boilerplate/blob/master/tasks/build_app.js#L16) (e.g. to split your app into modules).

By the way, [rollup has a lot of plugins](https://github.com/rollup/rollup/wiki/Plugins). You can add them in [this file](https://github.com/szwacz/electron-boilerplate/blob/master/tasks/bundle.js).

## Adding npm modules to your app

Remember to respect the split between `dependencies` and `devDependencies` in `package.json` file. Only modules listed in `dependencies` will be included into distributable app.

Side note: If the module you want to use in your app is a native one (not pure JavaScript but compiled C code or something) you should first run `npm install name_of_npm_module --save` and then `npm run postinstall` to rebuild the module for Electron. This needs to be done only once when you're first time installing the module. Later on postinstall script will fire automatically with every `npm install`.

## Working with modules

Thanks to [rollup](https://github.com/rollup/rollup) you can (and should) use ES6 modules for all code in `src` folder. But because ES6 modules still aren't natively supported you can't use them in the `app` folder.

Use ES6 syntax in the `src` folder like this:
```js
import myStuff from './my_lib/my_stuff';
```

But use CommonJS syntax in `app` folder. So the code from above should look as follows:
```js
var myStuff = require('./my_lib/my_stuff');
```

# Testing

## Unit tests

```
npm test
```

Using [electron-mocha](https://github.com/jprichardson/electron-mocha) test runner with the [chai](http://chaijs.com/api/assert/) assertion library. This task searches for all files in `src` directory which respect pattern `*.spec.js`.

## End to end tests

```
npm run e2e
```

Using [mocha](https://mochajs.org/) test runner and [spectron](http://electron.atom.io/spectron/). This task searches for all files in `e2e` directory which respect pattern `*.e2e.js`.

## Code coverage

```
npm run coverage
```

Using [istanbul](http://gotwarlost.github.io/istanbul/) code coverage tool.

You can set the reporter(s) by setting `ISTANBUL_REPORTERS` environment variable (defaults to `text-summary` and `html`). The report directory can be set with `ISTANBUL_REPORT_DIR` (defaults to `coverage`).

## Continuous integration

Electron [can be plugged](https://github.com/atom/electron/blob/master/docs/tutorial/testing-on-headless-ci.md) into CI systems. Here two CIs are preconfigured for you. [Travis CI](https://travis-ci.org/) tests on macOS and Linux, [App Veyor](https://www.appveyor.com) tests on Windows.

# Making a release

To package your app into an installer use command:

```
npm run release
```

It will start the packaging process for operating system you are running this command on. Ready for distribution file will be outputted to `dist` directory.

You can create Windows installer only when running on Windows, the same is true for Linux and macOS. So to generate all three installers you need all three operating systems.

All packaging actions are handled by [electron-builder](https://github.com/electron-userland/electron-builder). It has a lot of [customization options](https://github.com/electron-userland/electron-builder/wiki/Options), which you can declare under ["build" key in package.json file](https://github.com/szwacz/electron-boilerplate/blob/master/package.json#L2).

# License

Released under the MIT license.
27 changes: 27 additions & 0 deletions app/app.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Electron Boilerplate</title>

<link href="stylesheets/main.css" rel="stylesheet" type="text/css">

<script src="helpers/context_menu.js"></script>
<script src="helpers/external_links.js"></script>

<script src="app.js"></script>
</head>
<body>

<div class="container">
<h1 id="greet"></h1>
<p class="subtitle">
Welcome to <a href="http://electron.atom.io" class="js-external-link">Electron</a> app running on this magnificent <strong id="platform-info"></strong> machine.
</p>
<p class="subtitle">
You are in <strong id="env-name"></strong> environment.
</p>
</div>

</body>
</html>
59 changes: 59 additions & 0 deletions app/helpers/context_menu.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,59 @@
// This gives you default context menu (cut, copy, paste)
// in all input fields and textareas across your app.

(function () {
'use strict';

var remote = require('electron').remote;
var Menu = remote.Menu;
var MenuItem = remote.MenuItem;

var isAnyTextSelected = function () {
return window.getSelection().toString() !== '';
};

var cut = new MenuItem({
label: "Cut",
click: function () {
document.execCommand("cut");
}
});

var copy = new MenuItem({
label: "Copy",
click: function () {
document.execCommand("copy");
}
});

var paste = new MenuItem({
label: "Paste",
click: function () {
document.execCommand("paste");
}
});

var normalMenu = new Menu();
normalMenu.append(copy);

var textEditingMenu = new Menu();
textEditingMenu.append(cut);
textEditingMenu.append(copy);
textEditingMenu.append(paste);

document.addEventListener('contextmenu', function (e) {
switch (e.target.nodeName) {
case 'TEXTAREA':
case 'INPUT':
e.preventDefault();
textEditingMenu.popup(remote.getCurrentWindow());
break;
default:
if (isAnyTextSelected()) {
e.preventDefault();
normalMenu.popup(remote.getCurrentWindow());
}
}
}, false);

}());
45 changes: 45 additions & 0 deletions app/helpers/external_links.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,45 @@
// Convenient way for opening links in external browser, not in the app.
// Useful especially if you have a lot of links to deal with.
//
// Usage:
//
// Every link with class ".js-external-link" will be opened in external browser.
// <a class="js-external-link" href="http://google.com">google</a>
//
// The same behaviour for many links can be achieved by adding
// this class to any parent tag of an anchor tag.
// <p class="js-external-link">
// <a href="http://google.com">google</a>
// <a href="http://bing.com">bing</a>
// </p>

(function () {
'use strict';
console.log('asd');

var shell = require('electron').shell;

var supportExternalLinks = function (e) {
var href;
var isExternal = false;

var checkDomElement = function (element) {
if (element.nodeName === 'A') {
href = element.getAttribute('href');
}
if (element.getAttribute('target') === '_blank') {
isExternal = true;
}
if (href && isExternal) {
shell.openExternal(href);
e.preventDefault();
} else if (element.parentElement) {
checkDomElement(element.parentElement);
}
};

checkDomElement(e.target);
};

document.addEventListener('click', supportExternalLinks, false);
}());
Binary file added app/icon-16x16.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added app/icon-256x256-unread.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added app/icon-256x256.ico
Binary file not shown.
Binary file added app/icon-256x256.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added app/icon-32x32-unread.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added app/icon-32x32.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added app/icon-64x64.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added app/icon-template.psd
Binary file not shown.
26 changes: 26 additions & 0 deletions appveyor.yml
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
build: off

os: unstable

branches:
only:
- master

skip_tags: true

environment:
nodejs_version: "6.3.0"

cache:
- node_modules -> package.json

install:
- ps: Install-Product node $env:nodejs_version
- npm install npm
- .\node_modules\.bin\npm install

test_script:
- node --version
- .\node_modules\.bin\npm --version
- .\node_modules\.bin\npm test
- .\node_modules\.bin\npm run e2e
Binary file added build/icon.icns
Binary file not shown.
Binary file added build/icon.ico
Binary file not shown.
Binary file added build/icons/512x512.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
4 changes: 4 additions & 0 deletions config/env_development.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
{
"name": "development",
"description": "Add here any environment specific stuff you like."
}
4 changes: 4 additions & 0 deletions config/env_production.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
{
"name": "production",
"description": "Add here any environment specific stuff you like."
}
4 changes: 4 additions & 0 deletions config/env_test.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
{
"name": "test",
"description": "Add here any environment specific stuff you like."
}
14 changes: 14 additions & 0 deletions e2e/hello_world.e2e.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
import { expect } from 'chai';
import testUtils from './utils';

describe('application launch', function () {

beforeEach(testUtils.beforeEach);
afterEach(testUtils.afterEach);

it('shows hello world text on screen after launch', function () {
return this.app.client.getText('#greet').then(function (text) {
expect(text).to.equal('Hello World!');
});
});
});
Loading

0 comments on commit 9bd471b

Please sign in to comment.