Electron Guide

I don't consider myself an opionated person but my opinion is way better than yours.


Out of the box, Reactium comes with the ability to build a basic Electron app.

Setup

Install the necessary tools:

$ npm install -g atomic-reactor-cli
$ npm install -g electron
$ npm install -g gulp

Gulp Config Overrides

Next you'll need to configure Reactium to run as an Electron app by applying some gulp.config.js overrides. Open the ~/gulp.config.override.js file and apply the following overrides:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
module.exports = config => {
    // Electron configuration
    config.dest.electron = 'build-electron';
    config.dest.static = 'build-electron/app/public';
    config.electron = {
        config: {
            width: 1280,
            height: 1024,
            show: false,
            title: 'App Title',
            backgroundColor: '#000000',
        },
    };

    // Disable auto launch of default browser
    config.open = false;

    return config;
};
You can apply custom Electron configuration in the config.electron.config object.

Initial Build

From the project root run the following command:

$ arcli electron-build

You should now have a directory in the project root calledbuild-electron.

You are free to edit the package.json and add new resources like a different icon or make changes to the Electron setup via~/build-electron/main.js.
If a file is protected or generated via theelectron-buildcommand, it will have a loud header telling you so.

Local Development

You can run Reactium in local development mode:

$ arcli electron-run

When prompted, just roll with the default values if you haven't changed them in the gulp config.

Alternatively: You can run the following and skip the prompts:

$ arcli electron-run -e cwd/build-electron -u cwd

You should now be running Reactium from localhost while being packaged in an Electron App!


Build for Distribution

After building the app, change directory to the ~/build-electron directory:

$ arcli electron-build
$ cd build-electron

Run the dist command:

$ npm run dist

You should now have a release directory inside thebuild-electron directory.

Since Reactium uses Electron Builder to generate the release assets, you can configure the dist process however you like by updating the ~/build-electron/package.json per your needs.

You can visually test your app before executing the distribution build by running the following command from thebuild-electron directory:

$ npm start

App Icon

The app icon can be changed by supplying a new ~/build-electron/resources/icon.png and ~/build-electron/resources/icon.ico.

The icon.png must be a valid .png file with dimensions of 1024 X 1024 pixels.