Skip to content

Commit

Permalink
Merge pull request #35 from hardchor/package-app#25
Browse files Browse the repository at this point in the history
Package app#25
  • Loading branch information
hardchor committed May 26, 2016
2 parents 543dfd6 + 42e8f44 commit 18d1904
Show file tree
Hide file tree
Showing 29 changed files with 478 additions and 423 deletions.
136 changes: 26 additions & 110 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,36 +1,29 @@
[![Stories in Ready](https://badge.waffle.io/hardchor/timesheets.png?label=ready&title=Ready)](https://waffle.io/hardchor/timesheets)
# electron-react-boilerplate

[![NPM version][npm-image]][npm-url]
[![Build Status][travis-image]][travis-url]
[![Dependency Status][david_img]][david_site]

![](./erb-logo.png)
# Timesheets App

> Live editing development on desktop app
[![Stories in Ready](https://badge.waffle.io/hardchor/timesheets.png?label=ready&title=Ready)](https://waffle.io/hardchor/timesheets)

[Electron](http://electron.atom.io/) application boilerplate based on [React](https://facebook.github.io/react/), [Redux](https://github.com/reactjs/redux), [React Router](https://github.com/reactjs/react-router), [Webpack](http://webpack.github.io/docs/), [React Transform HMR](https://github.com/gaearon/react-transform-hmr) for rapid application development
## Install

## Screenshot
Download the latest release from [here](https://github.com/hardchor/timesheets/releases).

![](https://cloud.githubusercontent.com/assets/3382565/10557547/b1f07a4e-74e3-11e5-8d27-79ab6947d429.gif)
## Development

## Install
### Install

First, clone the repo via git:

```bash
git clone https://github.com/chentsulin/electron-react-boilerplate.git your-project-name
git clone https://github.com/hardchor/timesheets.git
```

And then install dependencies.

```bash
$ cd your-project-name && npm install
$ cd timesheets && npm install
```


## Run
### Run

Run this two commands __simultaneously__ in different console tabs.

Expand All @@ -47,111 +40,34 @@ $ npm run dev

*Note: requires a node version >= 4 and an npm version >= 2.*

### Package and Release

## DevTools

#### Toggle Chrome DevTools

- OS X: <kbd>Cmd</kbd> <kbd>Alt</kbd> <kbd>I</kbd> or <kbd>F12</kbd>
- Linux: <kbd>Ctrl</kbd> <kbd>Shift</kbd> <kbd>I</kbd> or <kbd>F12</kbd>
- Windows: <kbd>Ctrl</kbd> <kbd>Shift</kbd> <kbd>I</kbd> or <kbd>F12</kbd>

*See [electron-debug](https://github.com/sindresorhus/electron-debug) for more information.*

#### Toggle Redux DevTools

- All platforms: <kbd>Ctrl+H</kbd>

*See [redux-devtools-dock-monitor](https://github.com/gaearon/redux-devtools-dock-monitor) for more information.*

#### Redux Devtools Window

Now you can implement it using [remote-redux-devtools](https://github.com/zalmoxisus/remote-redux-devtools) with a [remote monitor](https://github.com/zalmoxisus/remote-redux-devtools#remote-monitoring) by yourself.


## Externals

If you use any 3rd party libraries which can't be built with webpack, you must list them in your `webpack.config.base.js`

```javascript
externals: [
// put your node 3rd party libraries which can't be built with webpack here (mysql, mongodb, and so on..)
]
```

You can find those lines in the file.


## CSS Modules

This boilerplate out of the box is configured to use [css-modules](https://github.com/css-modules/css-modules).

All `.css` file extensions will use css-modules unless it has `.global.css`.

If you need global styles, stylesheets with `.global.css` will not go through the
css-modules loader. e.g. `app.global.css`


## Package
To package the app for local testing, run:

```bash
$ npm run package
npm run build
npm run pack
```

To package apps for all platforms:
### Release

After you've bumped the version number in `app/package.json`, run:

```bash
$ npm run package-all
GH_TOKEN=... CSC_NAME=... npm run release
```

#### Options

- --name, -n: Application name (default: ElectronReact)
- --version, -v: Electron version (default: latest version)
- --asar, -a: [asar](https://github.com/atom/asar) support (default: false)
- --icon, -i: Application icon
- --all: pack for all platforms

Use `electron-packager` to pack your app with `--all` options for darwin (osx), linux and win32 (windows) platform. After build, you will find them in `release` folder. Otherwise, you will only find one for your os.

`test`, `tools`, `release` folder and devDependencies in `package.json` will be ignored by default.

#### Default Ignore modules

We add some module's `peerDependencies` to ignore option as default for application size reduction.

- `babel-core` is required by `babel-loader` and its size is ~19 MB
- `node-libs-browser` is required by `webpack` and its size is ~3MB.

> **Note:** If you want to use any above modules in runtime, for example: `require('babel/register')`, you should move them from `devDependencies` to `dependencies`.
#### Building windows apps from non-windows platforms

Please checkout [Building windows apps from non-windows platforms](https://github.com/maxogden/electron-packager#building-windows-apps-from-non-windows-platforms).

## How hot-reloading works on Electron

We use [webpack-target-electron-renderer](https://github.com/chentsulin/webpack-target-electron-renderer) to provide a build target for electron renderer process. Read more information [here](https://github.com/chentsulin/webpack-target-electron-renderer#how-this-module-works).

> Note: webpack >= 1.12.15 has built-in support for `electron-main` and `electron-renderer` targets.
## Native-like UI

If you want to have native-like User Interface (OS X El Capitan and Windows 10), [react-desktop](https://github.com/gabrielbull/react-desktop) may perfect suit for you.

Then, head over to https://github.com/hardchor/timesheets/releases and publish.

## Maintainers
---

- [C. T. Lin](https://github.com/chentsulin)
- [Jhen-Jie Hong](https://github.com/jhen0409)
### Contributors

Special thanks go to:

## License
MIT © [C. T. Lin](https://github.com/chentsulin)
* [Jack Wilkinson](https://github.com/guacjack)

[npm-image]: https://img.shields.io/npm/v/electron-react-boilerplate.svg?style=flat-square
[npm-url]: https://npmjs.org/package/electron-react-boilerplate
[travis-image]: https://travis-ci.org/chentsulin/electron-react-boilerplate.svg?branch=master
[travis-url]: https://travis-ci.org/chentsulin/electron-react-boilerplate
[david_img]: https://img.shields.io/david/chentsulin/electron-react-boilerplate.svg
[david_site]: https://david-dm.org/chentsulin/electron-react-boilerplate
> Originally based on the fantastic [chentsulin/electron-react-boilerplate](https://github.com/chentsulin/electron-react-boilerplate)
> MIT © [C. T. Lin](https://github.com/chentsulin)
>
> [Electron](http://electron.atom.io/) application boilerplate based on [React](https://facebook.github.io/react/), [Redux](https://github.com/reactjs/redux), [React Router](https://github.com/reactjs/react-router), [Webpack](http://webpack.github.io/docs/), [React Transform HMR](https://github.com/gaearon/react-transform-hmr) for rapid application development
2 changes: 1 addition & 1 deletion app/config.js
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ const config = {
scopes: [
'repo',
],
}
},
};

export default config;
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import { app, BrowserWindow, Menu, shell } from 'electron';
import path from 'path';

const mainHtml = path.join(__dirname, '../../renderer/main/index.html');
const mainHtml = path.join(__dirname, '../renderer/assets/html/main.html');

export default function createWindow() {
let menu;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import path from 'path';
import process from 'process';
import Positioner from 'electron-positioner';

const menuBarHtml = path.join(__dirname, '../../renderer/menubar/index.html');
const menuBarHtml = path.join(__dirname, '../renderer/assets/html/menubar.html');

export default function createMenuBar(trayBounds) {
const menuBarWindow = new BrowserWindow({
Expand Down
20 changes: 13 additions & 7 deletions app/main/index.js
Original file line number Diff line number Diff line change
@@ -1,16 +1,18 @@
import '../shared/promisify';
import path from 'path';
import { app, ipcMain, Tray } from 'electron';
import pify from 'pify';
import jsonStorage from 'electron-json-storage';
import createMainWindow from './window/createMainWindow';
import createMenuBarWindow from './window/createMenuBarWindow';
import createMainWindow from './createMainWindow';
import createMenuBarWindow from './createMenuBarWindow';
import configureStore from '../shared/store/configureStore';

const trayIcon = path.join(__dirname, '../renderer/assets/images/logo.png');
import osxAutoUpdater from './osxAutoUpdater';

// we have to do this to allow remote-loading of the current state :()
global.state = {};

const storage = pify(jsonStorage);
const trayIcon = path.join(__dirname, '../renderer/assets/images/logo.png');

let mainWindow = null;
let menuBarWindow = null;

Expand Down Expand Up @@ -42,14 +44,14 @@ async function start() {
const appIcon = new Tray(trayIcon);
appIcon.setToolTip('Timesheets');

global.state = await jsonStorage.getAsync('state');
global.state = await storage.get('state');
const store = configureStore(global.state, 'main');

store.subscribe(async () => {
global.state = store.getState();
// persist store changes
// TODO: should this be blocking / wait? _.throttle?
await jsonStorage.setAsync('state', global.state);
await storage.set('state', global.state);
});

ipcMain.on('redux-action', (event, payload) => {
Expand All @@ -74,6 +76,10 @@ async function start() {

// init
doCreateMainWindow();

setTimeout(() => {
osxAutoUpdater(store);
}, 5000);
}

app.on('ready', start);
47 changes: 47 additions & 0 deletions app/main/osxAutoUpdater.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,47 @@
/* eslint-disable max-len */
import os from 'os';
import { app, autoUpdater } from 'electron';
import pkg from '../package.json';
import {
checkingForUpdate,
updateAvailable,
updateDownloaded,
updateError,
updateNotAvailable,
} from '../shared/actions/system';

const UPDATE_SERVER_HOST = 'timesheets-app.herokuapp.com';

export default function init(store) {
// if (process.env.NODE_ENV !== 'production') {
// return;
// }

if (os.platform() !== 'darwin') {
return;
}

// const version = app.getVersion();
const { version } = pkg;

autoUpdater.addListener('checking-for-update', () => {
store.dispatch(checkingForUpdate());
});
autoUpdater.addListener('update-available', () => {
store.dispatch(updateAvailable());
});
autoUpdater.addListener('update-downloaded', (event, releaseNotes, releaseName, releaseDate, updateURL) => {
store.dispatch(updateDownloaded(releaseNotes, releaseName, releaseDate, updateURL));
});
autoUpdater.addListener('error', (error) => {
store.dispatch(updateError(error));
});
autoUpdater.addListener('update-not-available', () => {
store.dispatch(updateNotAvailable());
});

store.dispatch(checkingForUpdate());

autoUpdater.setFeedURL(`https://${UPDATE_SERVER_HOST}/update/${os.platform()}_${os.arch()}/${version}`);
autoUpdater.checkForUpdates();
}
45 changes: 45 additions & 0 deletions app/package.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,45 @@
{
"name": "Timesheets",
"version": "0.0.5",
"description": "A timesheet keeping app based on electron",
"main": "main/index.js",
"author": "Burkhard Reffeling",
"license": "MIT",
"homepage": "https://github.com/hardchor/timesheets#readme",
"repository": {
"type": "git",
"url": "git+ssh://[email protected]/hardchor/timesheets.git"
},
"devDependencies": {
"redux-devtools": "^3.2.0",
"redux-devtools-dock-monitor": "^1.1.1",
"redux-devtools-log-monitor": "^1.0.11",
"redux-logger": "^2.6.1",
"source-map-support": "^0.4.0"
},
"dependencies": {
"classnames": "^2.2.5",
"css-modules-require-hook": "^4.0.0",
"dotenv": "^2.0.0",
"electron-debug": "^0.6.0",
"electron-json-storage": "^2.0.0",
"electron-positioner": "^3.0.0",
"lodash": "^4.13.1",
"material-design-lite": "^1.1.3",
"moment": "^2.13.0",
"node-fetch": "^1.5.2",
"parse-link-header": "^0.4.1",
"pify": "^2.3.0",
"postcss": "^5.0.19",
"react": "^15.0.1",
"react-dom": "^15.0.1",
"react-mdl": "^1.5.4",
"react-redux": "^4.4.5",
"react-router": "^2.2.4",
"react-router-redux": "^4.0.2",
"redux": "^3.4.0",
"redux-form": "^5.2.3",
"redux-promise": "^0.5.3",
"redux-thunk": "^2.0.1"
}
}
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@
if (!process.env.HOT) {
const link = document.createElement('link');
link.rel = 'stylesheet';
link.href = '../dist/style.css';
link.href = '../../main/style.css';
document.write(link.outerHTML);
}
}());
Expand All @@ -19,7 +19,7 @@
<script>
(function() {
const script = document.createElement('script');
script.src = (process.env.HOT) ? 'http://localhost:3000/dist/main.js' : '../dist/main.js';
script.src = (process.env.HOT) ? 'http://localhost:3000/dist/main/index.js' : '../../main/index.js';
document.write(script.outerHTML);
}());
</script>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@
if (!process.env.HOT) {
const link = document.createElement('link');
link.rel = 'stylesheet';
link.href = '../dist/style.css';
link.href = '../../menubar/style.css';
document.write(link.outerHTML);
}
}());
Expand All @@ -19,7 +19,7 @@
<script>
(function() {
const script = document.createElement('script');
script.src = (process.env.HOT) ? 'http://localhost:3000/dist/menubar.js' : '../dist/menubar.js';
script.src = (process.env.HOT) ? 'http://localhost:3000/dist/menubar/index.js' : '../../menubar/index.js';
document.write(script.outerHTML);
}());
</script>
Expand Down
Loading

0 comments on commit 18d1904

Please sign in to comment.