🚀Introducing electron-toolkit: The Electron app to build and launch Electron apps

Recently, I wrote an article “🦋Electron: The Bad Parts” about all the expectations-meet-reality moments I had with Electron. And the feedback was overwhelming. With over 300 comments on reddit, mentions in podcasts, YouTube videos, hundreds of email subscribers and tens of thousands medium readers it turned out that many people were experiencing similar issues. Writing about problems is one thing. It creates awareness but not solutions. And to complain and letting others do the hard work just doesn’t feel right. So I thought about ways to solve some of the deployment related problems. Fortunately, Alina joined this effort and today we woud like to present an early preview of our solution: electron-toolkit

TL;DR electron-toolkit is a lightweight, small-sized, very powerful open source application to launch Electron apps. The app itself runs on Electron (‘yay recursion!’). electron-toolkit can be installed and started from npm in your existing Electron project. The UI will guide you through a suite of tools to generate assets and artifacts such as icons, screenshots, installers, binaries — everything needed for a successful product launch. It can help with the publishing of your app and even generate full websites. The tools can save days, weeks or months of work. This is an early / preview release — hopefully many more settings and tools will follow soon.

Ready to launch?

Getting Started

electron-toolkit (ET) is member of a complete new genre of npm packages which blend into the command line workflow while also providing a user interface.

If you have an electron project you can easily install electron-toolkit from the command line with:

npm install electron-toolkit --save-dev

ET is extremely lightweight and small in size. The trick: it knows that you want to publish an Electron app. So instead of bringing its own Electron binaries it will just find and re-use the Electron version that your application is using. This also means that if you’re trying to launch it standalone, outside a project, it will probably die in a horrible way… But that’s OK. Just be warned.

After the installation add the launch script to your package.json or launch it directly with:

"scripts": {"electron-toolkit": "electron ./node_modules/electron-toolkit"}

Run the script with:

npm run electron-toolkit

The app starts and you should see something like this.

The start screen displays tools & categories

electron-toolkit comes with a suite of tools to make the launch of your app as easy and fast as possible. Tools are grouped by category and you will find some for asset generation, installer creation, publishing, website creation and more.

Assets

Previousy, one would have to open a browser, go to a website, upload their company’s logo to one of these sketchy icon web services, download a zip (or virus) with icons for all platforms, and extract it to the correct folder. This process can now be replaced with two clicks.

Icons

The icon generator creates icons in various formats

electron-toolkit has a built-in Icon Generator. You can drag and drop your logo as svg and generate a png bundle, ico for windows and icns for mac — everything locally and offline. The ico and icns generation is powered by the great png2icons module which implements all the low level bit manipulations, resampling and image scaling. An instance of the canvas element in Chromium is used to create pngs from scalable vector graphics.

Screenshots and Videos

The assets category contains another tool: Screen Capture

Before th app is launched

The Screen Capture Tool makes it extremely easy to create screenshots and videos to showcase your application in marketing campaigns. All you have to do is click the big, blue button.

App-In-App live preview after main app is launched

electron-toolkit uses context information to find and launch the correct main application. It then communicates with the other application process to determine the correct application window automatically. Next, it establishes a video stream of the other app as live-preview. The preview even works when the main application is partially or fully covered by other windows. You can setup the main app’s UI and with another click electron-toolkit will start recording or save screenshots remotely to the gallery.

Your screenshots and videos are displayed in the gallery

Installers

Equipped with icons, we can move on to the next tool: the Installer Configurator. electron-toolkit helps to configure electron-builder and to create installers for multiple targets.

It will use information from the application’s package.json to generate and pre-fill a form with the most important settings.

The Installer Configurator helps you to build installer binaries

The Installer Configurator displays a description side-by-side for each setting when it has the focus. The description and links are based on electron-builder’s documentation. Some fields already have rudimentary validation logic and create warnings e.g when mac is selected as target but the app category is missing.

Based on the selected platforms the advanced tab will contain additonal target-specific settings for windows, mac or linux. The powerful electron-builder has countless settings and options. The UI displays only those settings that make sense for your current configuration, groups them and explains the effects.

Advanced settings are only displayed when needed

With a click on “generate installers”, electron-toolkit will spawn an instance of electron-builder and start the packaging. You don’t have to leave the tool. It will forward the output stream directly into your user interface and also patch your project.json to reflect the changes you made: this allows you to launch future build processes from the CLI if this is your preferred method.

Please note that currently you can configure multiple targets on one machine but only build the binaries on the respective platform.

Publish

Now that we have the generated installers, we are ready to distribute our app to millions of users. The right tools for this task can be found in the publish category. This category displays a list of online services and hosters to publish and host the generated installers. Hosting services make sure that your binaries can be downloaded at any time, from anywhere on the Web. Some (ideally) scale the necessary resources for distribution with your user base and distribute binaries to edge locations to improve latency for fast download speeds and happy users.

Available hosting services

Launchfox

Launchfox is a new service we are working on. It serves as channel for all Electron related tools that require more than your local computer.

With Launchfox, you can easily plan, track and control your installer distribution. Features like staged roll outs, download counts and regional filters will soon be available. You can keep your own DIY solution such as two GitHub repos (a private one for code and a public repo for issues & releases) or Nuts-on-Heroku and use this as additional distribution channel that integrates with exisiting solutions. The idea however is to create and design a solution from the ground up for Electron and make it the optimal solution.

If this sounds interesting leave your email on the launchfox website and get notified about the upcoming release.

Website

One thing that consumes an unreasonable amount of time is creating a website. There are already services that help you to speed up the process and let you click websites together such as Squarespace (the “software as a service-based tracking and data-gathering service, marketed as a content management system-integrated website builder” — Wikipedia).

But because you know Web technologies quite well you might want to build your own website and host it on GitHub pages for examples. You will spend a few days putting everything together, style it, make it responsive, test it on different devices, optimize page load times, minify sources, create source maps to be able to debug, bundle scripts, bundle assets, configure the build pipeline, think about content delivery networks, scale and optimize images for different screen resolutions and device types, register a domain, get a certificate, setup https, create an auto-deploy script, register accounts here and there etc…

And this takes a lot of time. electron-toolkit can help you with this process. You can use icons, screenshots, descriptions, and your product information from your package.json to bootstrap a great looking product page from within the tool.

Left: the real-time website preview, right: insert content & change style

The website will already implement best practices for product websites and provide visitors with a clean and appealing UI. You can adjust the settings according to your taste, re-style it, use device templates to make your screenshots stand out and describe features, add testimonials, social profiles and more.

Changes are displayed in real-time

You can save and continue your work at any time. When you’re done, just press “Export” to save the generated page as zip on your computer. The service is provided by launchfox but is 100% free and no data is stored on our servers. The exported webiste is yours and you can customize and use it the way you want.

Use the saved time to enjoy the holidays with your family.

More

Alina and I hope you like electron-toolkit and that it will make your product launch smoother and more fun. Let us know about the cool apps that your building!

If you want to be notified about changes, new tools or articles related to Electron sign up here:

Here is the link to the form

If you want to support the development check out the repository, leave a star, and use the issue tracker to report bugs or request features: https://github.com/PhilippLgh/electron-toolkit

UPDATE:

electron-toolkit just got featured on Product Hunt which gives you yet another option to upvote xD

If you liked the article clap,if you have questions leave a comment :)