Recently, I wrote an article about all the 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, joined this effort and today we woud like to present an early preview of our solution: electron-toolkit “🦋Electron: The Bad Parts” expectations-meet-reality Alina 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. : 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. The trick 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 . 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 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. Icon Generator png2icons Screenshots and Videos The category contains another tool: assets 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 . electron-toolkit helps to configure electron-builder and to create installers for multiple targets. Installer Configurator 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 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 is missing. Installer Configurator app category Based on the selected platforms the 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 tab 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 . 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. publish category 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 and get notified about the upcoming release. launchfox website 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 l ink 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 :)

Google

Heroku

Target

YouTube

Too Long; Didn't Read

In your car, at home, or at work — Bosch technology shapes many areas of life.

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

Too Long; Didn't Read

Companies Mentioned

Philipp Langhans

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

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

Too Long; Didn't Read

Companies Mentioned

Philipp Langhans

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

RELATED STORIES