electron-meshblu-connector-installer

Live editing development on desktop app

Electron based Meshblu Connector Installer.

Install

• Note: requires a node version >= 6 and an npm version >= 3.
• If you have installation or compilation issues with this project, please see our debugging guide

First, clone the repo via git:

git clone https://github.com/octoblu/electron-meshblu-connector-installer.git

And then install dependencies. ProTip: Install with yarn for faster and safer installation

$ cd electron-meshblu-connector-installer && npm install

Run

Run these two commands simultaneously in different console tabs.

$ npm run hot-server
$ npm run start-hot

or run two servers with one command

$ npm run dev

Editor Configuration

Atom

apm install editorconfig es6-javascript atom-ternjs javascript-snippets linter linter-eslint language-babel autocomplete-modules

Sublime

• https://github.com/sindresorhus/editorconfig-sublime#readme
• https://github.com/SublimeLinter/SublimeLinter3
• https://github.com/roadhump/SublimeLinter-eslint
• https://github.com/babel/babel-sublime

Others

• Editorconfig
• ESLint
• Babel Syntax Plugin

DevTools

Toggle Chrome DevTools

• OS X: Cmd Alt I or F12
• Linux: Ctrl Shift I or F12
• Windows: Ctrl Shift I or F12

See electron-debug for more information.

DevTools extension

This boilerplate is included following DevTools extensions:

• Devtron - Install via electron-debug.
• React Developer Tools - Install via electron-devtools-installer.
• Redux DevTools - Install via electron-devtools-installer.

You can find the tabs on Chrome DevTools.

If you want to update extensions version, please set UPGRADE_EXTENSIONS env, just run:

$ UPGRADE_EXTENSIONS=1 npm run dev

# For Windows
$ set UPGRADE_EXTENSIONS=1 && npm run dev

CSS Modules

This boilerplate out of the box is configured to use 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

If you want to import global css libraries (like bootstrap), you can just write the following code in .global.css:

@import "~bootstrap/dist/css/bootstrap.css";

Packaging

To package apps for the local platform:

$ npm run package

To package apps for all platforms:

First, refer to Multi Platform Build for dependencies.

Then,

$ npm run package-all

To package apps with options:

$ npm run package -- --[option]

Further commands

To run the application without packaging run

$ npm run build
$ npm start

To run End-to-End Test

$ npm run build
$ npm run test-e2e

Options

See electron-builder CLI Usage

Module Structure

This app uses a two package.json structure.

1. If the module is native to a platform or otherwise should be included with the published package (i.e. bcrypt, openbci), it should be listed under dependencies in ./app/package.json.
2. If a module is imported by another module, include it in dependencies in ./package.json. See this ESLint rule.
3. Otherwise, modules used for building, testing and debugging should be included in devDependencies in ./package.json.

Native-like UI

If you want to have native-like User Interface (OS X El Capitan and Windows 10), react-desktop may perfect suit for you.

License

MIT © C. T. Lin