Here is Some kind of dummy mock-up that will show you how our application should look like.

VIDEO: How it should be

Lets begin: First of all, make sure that you have already installed NodeJs, NPM. In this example we will not use boilerplates for our app. Please note - we will develop this app only for Mac. ( Setup of the app for Linux and Windows not much different nut have some tricky moments. )

Structure of the project:

electon-builder (npm package to build ready for distribution and 'auto update' Electron App ) provide some restrictions on the structure of the project.

IMAGE: Structure of the project

1. app directory - Only this directory is distributed with real application. Also in this directory we have separate package.json file. In this file we will specify dependencies that our app need for work. Also libraries from this file will be added into production version of the app ( DMG file )

2. build directory - into this folder we should put icon.icns and background.png. These images we will use to customize the installation process for Mac platform.

IMAGE: Preview of installation

electon-app directory - is dirrectory for our electron app. ( electron setup files, HTML files with react-root element )

browser-app directory - is directory with our pure React app.

Also we will divide browser-app folder into two sub-folders: dist AND src since we use webpack - we will apply hot-reload, jsx etc. ( Here we will work like with common browser-based React application )

First we need to update our package.json file.

package.json

{
  "name": "TimeTracker",
  "version": "0.0.1",
  "license": "MIT",
  "description": "App is based on Electron, React, Redux + Rails as a back end.",
  "author": "Dmytro Vasin <[email protected]>",
  "scripts": {
    "electron": "electron ./electron-app/js/index.js",
  },
  "dependencies": {
    "electron-positioner": "^3.0.0",
  },
  "devDependencies": {
    "electron": "^1.3.4",
  }
}

And install to additional packages:

npm install electron --save-dev
npm install electron-positioner --save-dev // Helps positioning your app windows.

Now we should launch next command to start our app: npm run electron