Creating a desktop app with Universal Dashboard and an installer with PowerShell Pro Tools

In the 1.3.0 version of the PowerShell Pro Tools module there are new cmdlets for generating installers. Leveraging the Windows Installer XML Toolkit, the cmdlets can produce simple, little installers. In this post we will look at how to create an Electron application with Universal Dashboard and the accompanying installer.

Creating a Universal Dashboard Electron Application

Electron is a framework for building cross platform desktop applications with JavaScript, HTML and CSS. Universal Dashboard is a PowerShell module for building cross platform web applications with PowerShell. Combining the two, we can create desktop applications written using PowerShell. Following the Quick Start guide within the Electron docs, we can see that we need to download the latest version of Electron. Check out the full GitHub repo for an example of how I laid out the files.

Next, let’s create a dashboard we want to host in Electron. For this example, we will create a Chuck Norris Jokes application. Using a handy API that returns a random Chuck Norris joke, we could create a simple dashboard like this.

The next step is to create the components for the Electron application. Within the app folder, we need to create a package.json and a main.js.

Package.json contains some manifest information about the application.

Main.js is responsible for the life cycle of our application. During app start up, we need to launch the PowerShell console that starts a Universal Dashboard. We have to wait a second for Universal Dashboard to get running and then visit the URL within the Electron application.

Once the application exits, we need to make sure to terminate PowerShell.

Now if we open electron.exe, we will see our application load and a random Chuck Norris joke appears! Success!

Creating an Installer with PowerShell

There are a lot of files associated with an Electron application. We need all the DLLs, JS and PS1s for this to work. We could bin deploy these files but non-technical users may have a problem getting everything copied correctly. This is where a MSI installer would be handy. As of 1.3.0 of the PowerShell Pro Tools module, you can now create installers!

PowerShell Pro Tools uses the Windows Installer XML toolkit to produce MSI files. WiX is a good abstraction from MSI but is still has a bit of a learning curve. The PoshTools cmdlets attempt to simplify some of the complexity without having to learn too much about WiX.
To create an installer, we need to import the module and define the directories and files we want to include.

New-Installer is used to define the installer components. Within the Content parameter we need to include New-InstallerDirectory and New-InstallerFile calls to generate the correct WiX nodes to produce an installer.

Including Files in the Installer

As mentioned earlier, our Eletron app includes a lot of files and folders we need to include. Using Get-ChildItem, we can pipe the contents to the different installer cmdlets. This function is recursive and will include all the files and folders in the root directory.

We make sure to specify a static ID for the electron.exe file so that we can use it for a desktop shortcut later.

Defining default installation location

Within New-Installer, we now include a PredefinedFolder to be the default installation location. You can tab complete through the available predefined folders such as AppData, Program Files or My Documents. Inside the predefined folder, we can create a custom folder. I’ve named this one “Chuck Norris Jokes”. By including the -Configurable switch on the New-InstallerDirectory cmdlet, the user will be prompted during installation if that want to change the installation directory.

The contents of the installation directory will be what has been returned by our recursive function.

Creating a shortcut

To create a shortcut, we can use the New-InstallerShortcut cmdlet and specify the file that we want to create a shortcut to. In this case, we want to create a shortcut to the electron.exe application for the user to double-click and start. We can also include an icon file.

Configuring the User Interface

New-InstallerUserInterface can be used to configure various parts of the installer’s interface. Some options include specifying a EULA or customizing images. For our Chuck Norris Joke app, we will specify these parameters.

Simply include the path to your EULA and images and pass the $UserInterface object to New-Installer.

Producing an Installer

Now that our PS1 file is complete we can run New-Installer to output an MSI file. The cmdlets will output a wxs, wxsobj and MSI file to the output path. The WXS file is an XML file that WiX uses to define the installer and could be used without PowerShell Pro Tools. You could use the WiX tools to directly compile this to a MSI.

Once the WXS file has been generated, PowerShell Pro Tools will compile the WiX file into an wxsobj file using candle and then finally link it with light to produce an MSI.

Any errors produced by either tool will be sent to the PowerShell error stream for review.

Once the installer has been produced, you can test it out! It should be available in the output directory.

The entire example project is available on GitHub. Feedback is always welcome! Looking for more features or have a bug to report? Please submit an issue on GitHub!

Leave a Reply