Create lightweight desktop application that can open custom protocol links(similar to iTunes
itmss:// or Slack slack:// application links).
Goal
Note that it is simple to register an Electron application to handle internalcustom protocol links which are in the page an Electron application isrendering. It is harder to register an Electron application to handlecustom protocol links clicked in other applications. For this we will need tocreate an installer.
Electron packager looks for a product name in package.json, so lets go ahead and add one. We also need to add what version of electron to package the app with. Lets begin with the electron version. Weâll add that from the terminal with this command: npm install -save-dev electron. Now when that is done open up package.json and add a productname. If you're developing Electron and don't plan to redistribute your custom Electron build, you may skip this section. Official Electron builds are built with Xcode 9.4.1, and the macOS 10.13 SDK.Building with a newer SDK works too, but the releases currently use the 10.13 SDK. Sign an Electron application for Windows on Mac OS In another thread, I got asked to explain how I codesign for Windows from a Mac. I put together an article of this containing the essential information.
Start
I took the Electron quick startapplication from theQuick startguide as the base. I placed the changed application inbahmutov/todomvc-electron-test.
Electron-builder (genrates executable for Windows,Mac and Linux, have server-less app auto-update feature,code signing, publishing etc, less boilerplate) electron-forge (genrates executable for Windows,Mac and Linux, it not just package apps but helps you create them as well, more boilerplate). Ledinhphuong changed the title Cannot launch app on Windows 8.1 64-bit when packaging for all platform on Mac 10.11 Practices to package Electron-based app on MAC OS to run on different OS such as Windows and Linux Dec 10, 2015.
If you want to try the application, clone the repository, install itsdependencies and run the start script
![]()
Here is a screenshot of the application in action.
Note that the loaded Electron application has almost NO logic. Instead itloads https://todomvc-express.bahmutov.com/,which is server side rendering TODO MVC application (available atbahmutov/todomvc-express).
For the demo purposes, the application opens the DevTools panel on startup.I also added a small log function that sends the messages to the panel.This comes very handy when the application will be packaged to run withoutterminal and need to debug the events.
Internal custom protocol links
The external website bahmutov/todomvc-expressincludes two links with custom protocol.
When this page is opened in our Electron application, and the user clickson a link
<a href='todo2://completed'>completed</a> , we wantto catch this click and open the actual pagehttps://todomvc-express.bahmutov.com/completed . We can achieve this byregistering custom protocol handler inside the Electron main.js rightafter the main window has been created
You can see the results right away by clicking on
active and completed links which lead to same pages as https://todomvc-express.bahmutov.com/active and https://todomvc-express.bahmutov.com/completed .
External custom protocol links
In order to register our new Electron application as the handler for customprotocol links, we need to make an installer that would register it.I will use the project electron-builderto package the Electron app. First, let us create 'DMG' installer. Thesettings will be in the 'build' config object inside the
package.json file.
Notice the 'protocols' object that registers both 'todo2://' and 'todos2://'custom protocols. While unnecessary, this shows how to register multiplecustom protocols for one application. https://cleverinsure220.weebly.com/blog/how-to-make-app-on-mac-book-arch.
Create the 'DMG' file using
npm run dist command. This createstodo-<version>.dmg file, that you can execute. Once you drag the applicationinto 'Applications' folder, it will become the handler for the custom protocol.Opening the custom link todo2:// , either by clicking inside a browser,or by simply open todo2://.. from the terminal opens the Todo application.
![]()
Clicking on the custom link the browser brings a dialog prompting the userto 'Launch the application'.
Making a Windows installer
I want to build a Windows 64bit installer on a MacOSX laptop. See specificinstructions.Directions for Linux systems areslightly different. Best mac menu bar apps 2016.
To build a Windows installer, let us add a new script command 'win' andWindows build settings. In order to install custom protocols, I had to useNSIS installer with
perMachine: true option.
I also added protocol registration as a separate installer scriptin
build/installer.nsh file
Running the command downloads the Windows Electron application, but complainsbecause Wine is not found. Install Wineand open the Wine terminal. Then run
npm run win command again and it builta 'Setup-.exe' file. This file installs on Windows platformand became the handler for 'todo2://' links in other applications.
Making installers on CI
I tried making installers on CI using GitLab docker build. Here my sample
.gitlab-ci.yml file. First it runs the tests (mostly just a JS linter),then it tries to build an installer. There are some dependencies thatneed to be installed for Linux environment, seewiki.Instead of installing dependencies in each test job, I recommend usinga special Docker image with all necessary dependencies pre-installed.
Unfortunately building signed DMG installer for Mac OS requires a Mac machineaccording to this.
Common problems
How To Package Mac Os Electron Apps For Windows 7
How To Package Mac Os Electron Apps For Windows XpResourcesComments are closed.
|
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |