Developing a desktop application with Electron is a fun thing. It really allows you to run your web-based code as a native desktop application via chromium engine. However, there’s a lot you need to filter through in active electron community to get an idea of how to build an app. There are quite a few “getting-started” boilerplates that allow you to run your first ‘Hello world’ app, but no clue on how to move forward. There are multiple tools for building and packaging applications, making installers, and handling millions of different tasks. But what do I really need for my app? What code structure should I set up for a project? There’s not a single approach out there.
Bozon command line tool
Dealing with all these tasks and questions, we came up with idea of a single tool that can handle most of these issues. We built Bozon to make it easier to bootstrap new Electron applications, run the package and test with one single command line tool. So now you don’t need to search for right scaffold generator, proper testing framework and task runner. Everything is already baked in! Under the hood, Bozon uses all these tools we all know and love. It uses Gulp as a task runner to build and application, Webpack – to get all scripts for renderer process packed and ready.
First of all, Bozon can generate Electron app scaffold with environment and platform targeted configuration, with scripts logically split into the main process and renderer process, and testing framework already set up. Simply run:
bozon new ironman
Follow the dialog, answer some basic questions about your app, and once auto-running node_modules installed your new Electron application is ready for your input. This generates basic application skeleton which is pretty straightforward:
| | |--renderer/
| | |--main/
config/ directory to contain
settings.json and other env specific and platform specific configuration files.
There are two package.json files. First one is for development and is placed under the path:
ironman/package.json. Here you declare dependencies for your development environment and build scripts. This file is not distributed with real application.
Second one is a real application manifest that can be found under the path:
ironman/app/package.json. It gets updated with settings hash generated from configuration and distributed with real application.
At this point you can easily run application with:
This will simply compile your app code and launch electron-prebuilt with it inside.
Bozon is using spectron framework and mocha spec runner for feature testing Electron applications. All unit and feature tests live under./specs directory and can be run all at once or individually. Simply run tests with:
bozon test spec/unit/storage_spec.js
Note that feature tests are performed on real packaged applications; that’s why it requires code compiling and packaging the app to
.tmp/ directory and could take some time. While running simple unit tests is a lot faster, because all you need to do is simply require a module you want to test.
In order to package your Electron application into a real desktop application, bozon uses electron-builder. Settings for electron-builder (like resources for different platforms) are defined in main package.json file under build section. It takes only one simple step for developers to package their application:
bozon package osx
And bozon does the rest for you. First, application source code is compiled for a defined platform with specific settings. You can find the build under
./builds/production directory. Then, bozon uses electron-builder to package platform build to
To make this work like a charm, bozon uses two package.json structure as it is also recommended by electron-builder.The concept is pretty simple:
package.json in root directory is for development. Here you declare dependencies for your development environment, build scripts and runtime dependencies to run your app in development mode with
app/package.json is meant to be used at application runtime.
Appdirectory is the only one distributed with real application, thus this is the place where you define your runtime dependencies for production before packaging application.
Of course, this leads to some duplication (you’ll have to define runtime dependencies in both files), but this also provides flexibility and allows to configure which node modules should be packaged to application, instead of distributing entire node_modules directory with all dependencies that are used for development.
Electron is pretty young technology – stable version 1.0 was released less than a month ago – and a lot of improvements and infrastructural tools are still to come. But it already allows building quite cool desktop applications and community is doing great progress on making setup and development even more easy and interesting. Try starting your new Electron application with bozon and tell us what you think. Feedback is really appreciated!