Loading…

Faster Universal Dashboard Development with UDHotReloader

The current method of development for UD dashboards is either to constantly start and stop your dashboard or to use the -AutoReload parameter of Start-UDDashboard. The -AutoReload parameter is limited as it only works for a single file. It also stops and starts the entire server every time the dashboard is loaded. This means it takes awhile. Additionally, if you make any mistakes in your dashboard, it may not start and you’re left starting the dashboard up again with Start-UDDashboard.

A Better Method

After working with Alon Gvili on some improvements to the integration testing for UD, we realized that you could run the tests way faster without restarting the server all the time. Once merged, it will take down the test suite execution time considerably.

I was recently pondering on how to improve -AutoReload when I realized we could use the same technique to quickly iterate during dashboard development so I created a function to do so: Start-UDHotReloader. This function uses the same method of using Update-UDDashboard in conjunction with a FileSystemWatcher to provide multi-file dashboard updating in much quicker iterations. Since the server isn’t stopped during each update, the page is faster to reload. It’s also more resilient because if you make a mistake in your dashboard, the page will just be blank and any additional updates should reload the page to a working state.

Using Start-UDHotReloader

You’ll first need to create a PS1 file that returns a UDDashboard. It can be as simple as this.

New-UDDashboard -Title "HotReloader" -Content {
}

Next, you’ll want to define the Start-UDHotReloader function. You can see you need to specify a root file. This is the file that we just defined above. The UpdateToken and Url will be the same as what was provided to Start-UDDashboard.

function Start-UDHotReloader {
    param(
        [Parameter(Mandatory = $true)]
        $Root,
        [Parameter(Mandatory)]
        $UpdateToken,
        [Parameter(Mandatory)]
        $Url
    )

    Process {
        $fileInfo = [System.IO.FileInfo]::new($Root)

        $fileSystemWatcher = [System.IO.FileSystemWatcher]::new($fileInfo.DirectoryName, "*.ps1")
        $fileSystemWatcher.NotifyFilter = [IO.NotifyFilters]::LastWrite
        $fileSystemWatcher.EnableRaisingEvents = $true

        Register-ObjectEvent $fileSystemWatcher Changed -SourceIdentifier FileChanged -Action {
            try {
                Update-UDDashboard -Url $event.MessageData.Url -UpdateToken $event.MessageData.UpdateToken -FilePath $event.MessageData.Root
            }
            catch {
                Write-Host $_.Exception
            }

        } -MessageData @{ 
            Url = $Url 
            UpdateToken = $UpdateToken
            Root = $Root

        }
    }
}

Now we need to start our dashboard and provide an -UpdateToken, the dashboard to run and the port.

$Dashboard = . "C:\users\adamr\desktop\dashboard.ps1"
Start-UDDashboard -Dashboard $Dashboard -port 10001 -UpdateToken 'test'

This results in an empty dashboard running on port 10001. Now, we can start the UDHotReloader to watch the dashboard.ps1 and any other ps1s in the same directory. If you have a multi-page dashboard, it will pick up changes to other files and reload the dashboard.

Start-UDHotReloader -Root "C:\users\adamr\desktop\dashboard.ps1" -UpdateToken "test" -Url "http://localhost:10001"

Now we can load our dashboard in our browser by visiting http://localhost:10001. If you now edit something in your dashboard.ps1 or any other ps1 file in that directory, it will autoreload.

Although the functionality is similar to the existing -AutoReload functionality, it should provide a much better user experience. This functionality will be coming to the PowerShell Pro Tools VS Code Extension.

Leave a Reply