Architecture of Universal Dashboard
Universal Dashboard is a PowerShell module that runs within the PowerShell.exe or Pwsh.exe process. The module starts an ASP.NET Core web server that is configured using PowerShell cmdlets. Within PowerShell, ASP.NET Core endpoints are registered so that call backs from the React client can call PowerShell scriptblocks.
When the client loads the website from the browser, the ASP.NET Core web server sends down the core React package. This package is responsible for the framework that will then load plugins to provide different components for the developer to include within their website.
ASP.NET Core Configuration
Once this configuration has been done, the asset is now registered with the service and ready to be requested by the client.
Using a Component From PowerShell
Universal Dashboard serializes PowerShell hashtables into JSON that is then sent to the client SPA. A service within the React app then determines the correct component to render based on the props of the hashtable. Within PowerShell component, such as New-UDHelmet, you’ll see that the function is just returning a hashtable.
This hashtable will serialize to the following JSON.
Rending the Component in React
All components rendered in Universal Dashboard pass through the renderComponent function. This function evaluates whether or not a component is registered with the system. If it is, it will call React.createElement to create a new React element based on the registered component and the props that was provided via the PowerShell hashtable.
Once the script is loaded, the loading state is set to false and the component will pass through renderComponent again. Since the component was registered as the script was loaded, it will be available to be rendered.
In this blog post we went over the steps necessary to create a plug-in architecture with ASP.NET Core and React. You can dynamically register components via a service in ASP.NET Core and then have those components loaded into the React app without having to actually include them in your core bundle.
For a full example of how this works, visit the Universal Dashboard GitHub repository.