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 :)