Goal
Create lightweight desktop application that can open custom protocol links(similar to iTunes itmss:// or Slack slack:// application links).
This is also true of the Windows x64 build on a system running a new enough version of Windows for a 64-bit system (via Foo Bar-win32-x64/Foo Bar.exe), and so on. Electron Forge - creates, builds, and distributes modern Electron applications; electron-packager-interactive - an interactive CLI for electron-packager. Electron Build Dmg There are two different types of OS one is Mac OS X Lion 10.7 ISO, DMG and the other one is OS X mountain lion. So please don’t get confused in both OS. Electron: Build cross platform desktop apps with JavaScript, HTML, and CSS. TypeScript: A free and open-source programming language developed and maintained by Microsoft. It is a strict syntactical superset of JavaScript, and adds optional static typing to the language.
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.
Start
I took the Electron quick startapplication from theQuick startguide as the base. I placed the changed application inbahmutov/todomvc-electron-test.
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 completedlinks which lead to same pages as https://todomvc-express.bahmutov.com/activeand 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.
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.
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.
Electron Build Dmg On Linux
I also added protocol registration as a separate installer scriptin build/installer.nsh file
Video for the cure. The Cure's official video for the single Let's go to Bed, off the albums Japanese Whispers and Standing on a Beach. Watch the official video for The Cure's 'Pictures of You,' the final single from The Cure's 1989 album 'Disintegration.' Subscribe to the Rhino Channel!
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-
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
- If you get 'spawn icns2png ENOENT' .. - install Linux dependencies
- If you get 'spawn gtar ENOENT' on Mac, you will need to install
gnu-tar
- If you get 'missing WINE' error, open WINE shell and run the build command.
- If you see Error: spawn mono ENOENTthen you need to install Mono,for example using
homebrew.
Resources
Ing Informática
Every application will always need an installer so that it can be used by the end users, without the need for them to take the action of investigating, installing applications, etc. An installer will contain all the source code and external libraries encapsulated in only one executable file. In this post we will learn to create an installer for any operating system of our application in electron.
To create our installer we will make use of a library available through npm packages called Electron Builder, locate ourselves inside the folder where our application is located, I have installed electron builder:
We go to our main folder and create a folder called build where we will add an image for each operating system
- icon.ico (Required for windows)
- background.png (Required for Mac)
- icon.icns (Required for Mac)
The installer for Linux will use the same mac images :)
The next thing we have to do is fix our file package.json we will add more information about our application and we will add the keys inside 'scripts'
- 'pack': 'build --dir'
- 'dist': 'build'
This would be my folder structure
Electron Build Dmg Mod
And we will also add the 'build' key where we will specify the information required for our electron builder library to run for each operating system. In our project we use or install two external libraries: mysql and pretty-bytes for our installer to add these libraries remember to have them in 'dependencies' and libraries like Electron Builder that we are using to create the installer we do not need them in the installer so they can go in 'devDependencies' or just do not add it in the package.json file at the moment my file looks like this:
That would be practically everything! we only need to execute the command to generate our installer. A dist folder will be created automatically with the installer and the folder associated with that installer. Since I am doing the test in Windows, only the windows executable will be created. They will need to execute the command in each operating system that the installer needs (I'm not completely sure that they can write in the comments if they work in another OS)
The command is the following:
Electron Build Dmg Download
Electron Builder Dmg
That is all! check your dist folder and there will be your installer. In the next post we will talk about the automatic updates. Here I leave a video with the content of the post