The idea

I stumbled on a medium article by Jeroen Verhaeghe where the ClamAV antivirus scanner was introduced in combination with the nClam library from Ryan Hoffman.  Jeroen shows us how the ClamAV scanner can be run in a Docker container, and in reading that I thought – why not let .NET Aspire manage the container and its communications for us?

The Proof of Concept Code

ClamAV publishes a self-maintaining docker container that updates itself with latest malware definitions. We know that containers can be added to a .NET Aspire project, so I wrote a quick resource that shared an HttpEndpoint:

Now we’re talking! We can now reference a ClamAV container resource easily in our .NET Aspire AppHost project and pass it to our website like this:

We can now scan our uploaded files with the nClam library like this:

That’s pretty easy to get started with… and there’s a lot more that we can do with this to help make our public file uploads secure by default.

Get the Code!

I’ve published my sample code, showing a Blazor application uploading files to a minimal API endpoint where ClamAV inspects the content and reports back whether malware was detected. You can find it on my GitHub at https://github.com/csharpfritz/AspireAntivirus

What do you think? Is this something that I should spend some more time wrapping and making easier to use? Create an issue on the GitHub repository if there’s something I can improve or a comment below to let me know what you think.

With the advent of .NET MAUI and the ability to build Blazor applications for a website and share their pages and components for use in a native application felt like a real possibility for me. I haven’t really stepped into building and working working with this application model yet… until now.

This is the first of what I expect will be a series of blog posts describing things that I’ve discovered, challenges that I’ve overcome, and features as I migrate the TagzApp application to run as a native desktop application.

Menus – Not as Easy as They Look

The first feature that I wanted to bring over was going to be the layout of the application. In TagzApp I have a very simple layout with a header menu bar with a couple of options to allow you to navigate to other areas of the application. It’s not too complex but it felt like an easy piece to migrate over to the hybrid application.

In doing some research and thinking more about how I want to represent a menubar inside of a native application it felt like it made more sense to turn this into a native menubar and not an HTML menubar that lived inside of my Blazor application. I started doing some research about how to create a menubar in .NET MAUI and found a few examples that showed how to use a tab bar to create and use multiple BlazorWebView components to represent different sections of the application. This felt clumsy to me because it meant that I would be spinning up multiple browsers to run inside of my application just to access and work with other parts of the application. I knew that that would mean more resources used by the computer when this application is running, and that felt a little irresponsible for me as a developer.

I wanted to actually have a menu bar with items that you would click and it would navigate inside of my Blazor application. Looking at the documentation for the BlazorWebView, there is no direct access to the NavigationManager or an ability to reset the location of the browser component. I set about to make the NavigationManager inside of Blazor accessible to the .NET MAUI application.

In the demos on this post, I’ll start with the default Blazor Hybrid template application and turn the vertical NavBar element into a native menu. Completed source code for this sample is available on my GitHub. I also have recorded a video where I talk through this demo:

Configuring the Shell and Menu Items

To start with, I configured the App.xaml file to have a Shell embedded directly and contain the BlazorWebView for my application. This would allow me to add a Menubar to the Shell.

<Application.MainPage>
  <Shell>
    <ShellContent>
      <ShellContent.ContentTemplate>
        <DataTemplate>
          <ContentPage>
            <BlazorWebView x:Name="blazorWebView1" HostPage="wwwroot/index.html">
              <BlazorWebView.RootComponents>
                <RootComponent Selector="#app" ComponentType="{x:Type local:Components.Routes}" />
              </BlazorWebView.RootComponents>
            </BlazorWebView>
          </ContentPage>
        </DataTemplate>
      </ShellContent.ContentTemplate>
    </ShellContent>
  </Shell>
</Application.MainPage>

I also removed the call inside App.xaml.cs to set MainPage = new MainPage(); Since we’re specifying our own MainPage inside the XAML markup, there’s no need to instantiate another page. I could run the application now, and I’d get the same user experience as the previous image.

Ok.. next steps…

Adding a MenuBar component

In .NET MAUI, the MenuBar component is added when you introduce MenubarItems. No problem, I added a MenuBarItem and 3 MenuFlyoutItems for the 3 base pages inside the default application. This code was added just inside the ContentPage element in App.xaml

<ContentPage.MenuBarItems>
  <MenuBarItem Text="Content">
    <MenuFlyoutItem Text="Home" Clicked="MenuItem_Clicked"></MenuFlyoutItem>
    <MenuFlyoutItem Text="Counter" Clicked="MenuItem_Clicked"></MenuFlyoutItem>
    <MenuFlyoutItem Text="Weather" Clicked="MenuItem_Clicked"></MenuFlyoutItem>
  </MenuBarItem>
</ContentPage.MenuBarItems>

Notice that I set each of the menu items to trigger the same event, MenuItem_Clicked All of these menu items do the same thing, but vary in the location they target. We’ll write this method in a little bit, because we need to first make the NavigationManager available

Enabling the NavigationManager in .NET MAUI

The Blazor NavigationManager isn’t directly accessible in .NET MAUI. You can’t inject it or reach into the BlazorWebView and interact with it. Instead, we need to create a service that will allow us to capture the NavigationManager and interact with it. The curious part of this is that both parts of the application model, .NET MAUI and Blazor use the same dependency injection services. So…. we can exploit this to allow our service to be injected into both Blazor AND .NET MAUI.

No problem, I can whip up a little bit of code that allows both application models to work with the Blazor NavigationManager:

public class NavigatorService
{

  internal NavigationManager NavigationManager { get; set; }

}

I can then register this NavigatorService with the service locator in .NET MAUI with this line in the MauiProgram.cs file:

builder.Services.AddSingleton<NavigatorService>();

I want this Navigator service on every page in my Blazor application, so I’ll inject it and configure the NavigationManager we’ll use inside the MainLayout.razor file:

@inherits LayoutComponentBase
@inject MauiApp1.NavigatorService NavigatorService
@inject NavigationManager NavigationManager

<div class="page">
...
</div>

@code {

  protected override void OnInitialized()
  {

    NavigatorService.NavigationManager = NavigationManager;

  }

}

Finally, I’ll add the NavigatorService to my App.xaml.cs code so that it is injected and stored as a property for use later:

public partial class App : Application
{
  public App(NavigatorService navigatorService)
  {
    InitializeComponent();
    NavigatorService = navigatorService;
  }

  internal NavigatorService NavigatorService { get; }

  private void MenuItem_Clicked(object sender, EventArgs e)
  {
  }
}

Connecting and Navigating from the MenuBar

Now, we can use a switch statement to configure the navigation of the BlazorWebView. Let’s add that switch inside the Menuitem_Clicked method:

private void MenuItem_Clicked(object sender, EventArgs e)
{

  var menuItem = (MenuItem)sender;
  var url = menuItem.Text switch
  {
    "Counter" => "/counter",
    "Weather" => "/weather",
    _ => "/"
  };
  NavigatorService.NavigationManager.NavigateTo(url);

}

Now, when we click the various items in the native MenuBar, the browser navigates appropriately.

For completeness, I removed the side navigation from the MainLayout.razor file so that the application felt more native and didn’t have 2 MenuBars.

Summary

This is just one creative way to connect our Blazor application to .NET MAUI and reuse the code we’ve already built in Blazor. The complete source code for this sample is available on my GitHub. I’m working through an entire application for TagzApp, and will share more of my findings in the weeks ahead.

Have you tried using Blazor content in .NET MAUI, WPF, or Windows Forms? What was your experience? Let me know in the comments below

– Raspberry Pi 3b (ARM32 processor, Wifi, 4GB RAM)
– Touchscreen case from SmartPi-Touch
– Azure Container Registry
– GitHub Repository
– GitHub action
– Docker
– Docker-Compose
– .NET 7 / ASP.NET Core / SignalR Core

The goal of this demo is to show how a connected IoT device, a Raspberry Pi, can run unattended and receive automatic updates from GitHub, Azure, refresh .NET content on a screen with no interruptions.

Prior to writing the software for this demo, I followed all of the instructions for the touch-screen and mounted the Raspberry Pi inside the case it provides.  This allows me to connect a keyboard and mouse as well as a power cable and work on the Raspberry Pi as a typical desktop workstation.

Note: This blog post are the notes from my construction of this demo.  I typically present and show this content on-stage and it is easily my most complex demo with moving pieces on a Raspberry Pi device that I show in my hands, Azure Container Registry, GitHub Codespaces and GitHub actions.  To make the demo a little more interesting, I’ll update some CSS (sometimes suggested by the audience) in the GitHub repository using GitHub codespaces on stage and the Raspberry Pi will update with the new look automatically.  I’d like to record a video showing this demo and update this post with a link to that demo

Step 0: Configure an Azure Container Registry

I already have one of these at `fritzregistry.azurecr.io`. It was easy enough to configure and deploy with credentials required to access the content.  Alternatively, you can also use the GitHub package repository features and store containers there.

Step 1: Configured Docker on the Raspberry Pi

These instructions originally appeared at: https://raspberrytips.com/docker-on-raspberry-pi/

On the Raspberry Pi, I downloaded Docker with this command when running as root:

curl -sSL https://get.docker.com | sh

I then added myself to the `docker` group by running this as my standard user `jfritz`:

sudo usermod -aG docker $USER

To get connected with the Azure registry, I logged in with this command and specified the registry name, the user id and password displayed on the Access Keys panel:

Azure Portal and identifying the Access Keys for a container registry

I could then login to the registry with these credentials on my Raspberry Pi by executing

docker login

This generated a `/home/.docker/config.json` file that will be used to login to my private Azure registry.

Step 2: Configured Docker-compose

For this system, I want to use Watchtower to monitor the container registry and install updates automatically.  In order to configure this with those dependencies, I needed Docker-componse. The prerequisites for Docker-Compose are installed with these commands:

sudo apt-get install libffi-dev libssl-dev
sudo apt install python3-dev
sudo apt-get install -y python3 python3-pip

I completed the installation of Docker-Compose with a pip3 install command:

sudo pip3 install docker-compose

Step 3: Configure Watchtower

Watchtower is a container that will watch other containers and gracefully update them when updates are available. I grabbed the watchtower image for ARM devices using this docker command on the Raspberry Pi:

docker pull containrrr/watchtower:armhf-latest

I built a `docker-compose.yml` file with my desired watchtower configuration:

The `command` argument instructs watchtower to check for updated images every 30 seconds, and the `restart` argument instructs the container to start at startup and always restart when the watchtower stops.  More details about how to configure a Docker-compose file are available in their documentation.

Step 4 : Customize the Dockerfile to build for ARM32

The device I have for this scenario is a Raspberry Pi 3B and has an ARM32 processor.  That can throw a little wrinkle into things because most systems now target ARM64 processors by default.  Not a problem, because there is still support for ARM32 available and we just need to specify it in our deployment scripts.

The application that I will be running on the device is a simple ASP.NET Core application that counts the number of times the screen has been touched.  In a more complete scenario, there might be a sensor connected or some kiosk screen wired up that presents information and collects data.

I wrote a Dockerfile for ARM is called `Dockerfile-ARM32` with the following content:

There’s an interesting bit in the middle where I copied in the `.git` folder. This allows my application to grab the latest git SHA hash as a bit of a version check for the source code. That SHA is made availalble on the assembly’s `AssemblyInformationalVersionAttribute` attribute value.

We can then build the container for my ASP.NET Core application to run on the Pi from my Windows workstation using this command:

docker build --platform linux/arm -f .\Fritz.DemoPi\Dockerfile-ARM32 . /
-t fritz.demopi:4 /
-t fritz.demopi:latest /
-t fritzregistry.azurecr.io/fritz.demopi:4 /
-t fritzregistry.azurecr.io/fritz.demopi:latest

and then push to my remote registry with:

docker push fritzregistry.azurecr.io/fritz.demopi -a

Step 5: Configure Docker on the Pi to run the website

By default ASP.NET Core configured port 8080 for the website inside the container. I wrote a quick `docker-compose.yml` script to run my .NET application with all of the configuration I would need:

To ensure that the SignalR bits of my demo would work, I removed a privacy extension from the Chromium browser that comes with the Raspberry Pi device.

Step 6: Configure the Pi to boot into Chromium for the website

In order to configure the Pi device to boot directly into a browser and my application running in the container, I added a file at `~/.config/lxsession/LXDE-pi` called `autostart` with this configuration:

@lxpanel --profile LXDE-pi
@pcmanfm --desktop --profile LXDE-pi
#@xscreensaver -no-splash
point-rpi
@chromium-browser --start-fullscreen --start-maximized http://localhost/

Additional options and the instructions I started with are at https://smarthomepursuits.com/open-website-on-startup-with-raspberry-pi-os/?expand_article=1 where I learned how to write this script.

Step 7: Prepare a GitHub action

I configured a GitHub action to checkout my code and build in ARM32 format with the Dockerfile established previously.  This would also publish the resultant container to my Azure container registry:

Success!

Summary

As changes are made to the GitHub repository, the GitHub action will rebuild the image and deploy it to the Azure Container Registry. Watchtower identifies the update and automatically stops the existing application on the Pi and then deploys a new copy with the same settings. With a little SignalR work, the UI updates seamlessly.

Response times of C# in the Cards after the new episode

In this blog post, let’s talk about how I’ve optimized the website for speed and some of the finishing touches that you can put on your Blazor website to make it screaming fast running on a very small instance of Azure App Service.

Static Site Rendering – Its Blazor, but easier

With .NET 8 there’s a new render mode for Blazor and it’s called static site rendering or SSR. This new render mode ditches all interactivity that we previously had with Blazor server side and Blazor Web Assembly and instead favors delivering HTML and other content from the server to browsers in a high speed manner. We can bolt on other techniques that we know from SEO and website optimization to make this even faster and deliver a great experience for our visitors.

The About page is configured to output a bunch of HTML headers for the SEO folks and the social media pages to be able to present good information about the site.  Notice the headers that are added to satisfy the search engines:

• a canonical link element that identifies where the page should be served from
• a keywords meta element with information about what you can find here
• a robots element that tells the search engine crawlers what they can do with the page
• open graph and Twitter meta tags that instruct Twitter, Facebook, LinkedIn, Discord, and other sites about the images, titles, and description of the page

That’s fine… but there are two other features to notice:

1. This is a static page with no data being presented.  I’ve tagged it on line 2 with an attribute to allow output caching for 600 seconds (10 minutes).  This way the web server doesn’t have to render a new copy when its requested within 10 minutes of a previous request.
2. The images references are in webp format.  Let’s not overlook this super-compressed format for displaying high-quality images.  It might be 2024, but every bit we deliver over the network still matters for performance and the 600×600 portrait picture of myself on this page was compressed nicely:

93% savings…  that’s crazy good and means that your browser is not downloading an extra 420kb it doesn’t need.

Data is stored in static files on disk

For this simple website I don’t need a big fancy database like SQL Server or Postgres or even MySQL. For this site, I’ve stored all of the data in a simple CSV file on disk.  That means that I can edit the list of articles that are available and the metadata that goes with them by just opening the file in Excel and writing new content. This means that when it comes time for me to read data about the list of content that’s available I’m only reading from a very small file on disk and I don’t need to worry about any kind of contention. I also don’t need to worry about any service that’s running to deliver that data because it’s only coming out of a small file on disk that’s read only.

In this repository class I use the LinqToCSV library to open and read all of the content from the file into a Post object in the first method, GetPostsFromDisk.  Later, in a public method called GetPosts, you see where I use the in memory cache feature of ASP.NET Core to fetch data from the cache if its available or get it from disk and store it in cache for 30 minutes.  I could probably extend this timeout to several hours or even days since the website doesn’t get any new content without uploading a new version of the site.

The key here is that the meta data about the lessons on the site is loaded and kept in memory.  As of episode 9 of the series, the posts.csv file is only 1.4kb so I have no worries about loading its entire contents into memory.

Don’t forget, in order to add the MemoryCache to your ASP.NET Core application, you need to add this line to your site configuration in the Program.cs file:

builder.Services.AddMemoryCache();

I could add other cache options like Redis to the site, but with how small the data I want to cache is, I don’t need that sophistication at this point.

Pre-rendered Interactive Web Assembly Content is fast… REALLY fast

I wanted to add a subset of the lessons to the front page of the website so that you could see the latest six episodes in the video series and scroll back and forth to the other episodes. This should be an interactive component but I still wanted the home page to render quickly and have a fresh speedy response time as you page through and look at the various episodes that are available. The natural way to do this with Blazor is to build a web assembly component that will run on the client and render data as users click on the buttons for that collection of articles.

I wrote a simple pager component that would receive a collection of lesson data and render cards for each lesson.  Since we already know that the collection of lesson data is less than 2kb in size I don’t have a problem sending the entire collection of data into the browser to be rendered.

When I use the @rendermode attribute in this code, it forces the render mode to web assembly and ASP.NET will pre-render as well as cache a version of that component’s resultant HTML with the home page. After viewers download the Web Assembly content it will hand control over to web assembly and it will be a fully interactive component for them to be able to work with.

Lesson Pager on the C# in the Cards website

Blazor lets me build content to be rendered on the web and I get to choose where exactly it should run. It can run in the browser with web assembly it can run statically on the server it can run interactively on the server if I want it to. In this case running as web assembly gives a really nice usability effect that makes it easy for viewers to locate the content they want to watch.

Compress the Content from Kestrel

By default content that’s delivered from the ASP.NET kestrel web server is uncompressed. We can add brotli compression to the Web server and deliver content in a much smaller package to our visitors with just a few simple lines of code in program.cs. This is something that I think everybody should do with their Internet facing websites:

#if (!DEBUG)
builder.Services.AddResponseCompression(options =>
{
options.EnableForHttps = true;
});
#endif

Add response compression configures the server so that it will deliver broadly compressed content. In this application I wrap it with the conditional debug detection because hot reload does not work with compression enabled.  When we deliver the website to the production web host it will be running in release mode and compression will be enabled.

Optimize all the JavaScript and CSS

CSS AND JavaScript can be minified and combined to reduce the number and size of downloads for this static content that makes our websites look good.  For this website I installed and used the WebOptimizer package available on NuGet.  My configuration for this looks like the following:

This script bundles the CSS files that were delivered with my website template and minifies the one JavaScript file that I manage with my project.

Set long cache-control headers for static content

The last thing that I did was set long duration cash dash control headers for static content like images CSS and Javascript files. This is easy to do with just a few more lines of optional configuration when I configure the static file feature inside of ASP.NET Core:

Summary

This website’s been easy for me to build because I can rely on my normal HTML skills and the plethora of HTML templates and CSS libraries out there to make my website look good. Blazor helps me to make it interactive render quickly and grow as I add more content to it. my cost in interaction with azure is minimal, as I’m using a Basic-2 instance of Azure App Service running Linux to deliver this site.

Adding a watermark

The most visible and easiest to visualize and pass on is a watermark.  Back in the “old days” folks would print letters on paper that had an image or text hidden in them so that you could verify it was an official document.  You’ll find this technology still used in bank checks and in paper currency, with hidden images that are only visible when the paper is held up to light.

With a PDF watermark, we can place content with a lower opacity on-top of or behind the content of our PDF.  A very cool technique that I can use to put a light gray KlipTok logo over the report so that folks know it’s official.

KlipTok logo over a bar graph in a PDF

I inserted this watermark logo with a few lines of code added to my pdf generation code:

private static void ApplyKlipTokWatermark(PdfDocument doc)
{
  var watermark = new HtmlStamper("<img src='https://localhost:5001/wordmark_subtitle.png'/>")
    Opacity = 20,
    VerticalAlignment = VerticalAlignment.Top,
    HorizontalAlignment = HorizontalAlignment.Left,
    VerticalOffset = new Length(1, MeasurementUnit.Inch),
    HorizontalOffset = new Length(2.5, MeasurementUnit.Inch),
    IsStampBehindContent = false
  };

  doc.ApplyStamp(watermark);

}

That is a pretty clear definition of a watermark.  The HtmlStamper class defines the HTML that will be placed on the document, along with a location using Horizontal and Vertical alignments with offsets along with an opacity for the content.  The final parameter, ‘IsStampBehindContent’ determines if this will be placed on top of the PDF content (like in the above sample) or should be placed behind the content like below:

Watermark underneath the opaque graph and not visible

Yea, the graph is opaque so we can’t see the content underneath of it.  For this watermark, let’s keep it on top by setting ‘IsStampBehindContent = false’

PDF Annotations

The second technique we could use would be to introduce a PDF annotation.  This allows us to add a sticky note to a document with additional information that is only available when viewed electronically.  There are configuration options available that will allow viewers to be able to include the annotation on a print out, but for my purpose, I want this to just be a check available electronically.

I added another simple block of code to my PDF rendering class, to add the annotation before the PDF is delivered:

private static void AddDatestampAnnotation(PdfDocument doc, string channelName) {

  var annotation = new IronPdf.Annotations.TextAnnotation()
  {
    Title = "Rendered by KlipTok",
    Subject = "Genuine KlipTok Report",
    Contents = $"This is a genuine report from KlipTok for the Twitch channel {channelName}. It was rendered on {DateTime.UtcNow.ToString()} UTC",
    Icon = IronPdf.Annotations.TextAnnotation.AnnotationIcon.Help,
    Opacity = 0.2,
    Printable = false,
    Hidden = true,
    ReadOnly = true
  };

  doc.AddTextAnnotation(annotation, 0, 550, 750);
 		
}

I really like how easy to read these APIs are from IronPDF.  I created a TextAnnotation object and set the title, subject, contents, an icon and some other visibility preferences.  I the add the text annotation with a method called ‘AddTextAnnotation’ with the page number, x and y coordinates from the bottom left corner of the page.

PDF Annotation displayed over the graph when opened

That’s nice…  but a little too much for this document.  Can we do something a little less intruding over our content and still show some authenticity?  Let’s check out a digital signature

Adding a Digital Signature

Digital signatures are the ultimate in proving that a file or a document came from a genuine source.  This website you’re viewing right now is protected with Transport Layer Security and signed with a certificate.  Let’s see what’s involved in adding a digital signature to our KlipTok report.

var signature = new IronPdf.Signing.PdfSignature("kliptok.pfx", "MY-PASSWORD") {

  SigningContact = "info@kliptok.com",
  SigningLocation = "Philadelphia, PA - USA",
  SigningReason = "Authentic KlipTok Report"

};
		
doc.SignPdfWithDigitalSignature(signature);

That is CRAZY simple.  We create a PdfSignature object by pointing to our certificate (PFX) file, with the appropriate password for that certificate (my password is left out here to protect the innocent).  I added some information about how to contact the signer, where the signing took place, and a reason.  I could have added a visual signature image to go with this, combining features of the watermark technique from above.

Summary

I like the watermark and I like the digital signature techniques to prove KlipTok generated these reports.  Until I find someone attempting to forge KlipTok reports, I’m going to stick with the watermark technique.  It’s simple and looks good on my document.

The IronPDF APIs proved again to be easy to read and simple to implement.  I continue to be impressed with the power provided and how thorough their examples are.  I’ll be wrapping up this new watermark and deploying it to KlipTok very soon.

Preparing the ASP.NET Core site to run Blazor

KlipTok runs as an Azure Static Website with a series of Azure Functions to support it.  While it is possible to run IronPDF on Azure Functions applications, in order to use and generate the a report based on the dashboard that is already present on KlipTok I would need to run Blazor content on a server.  Fortunately, I already have an ASP.NET Core website running on a Linux-based service with other features of KlipTok using Razor Pages.  With a server-side Blazor component, I could easily re-use this dashboard user-interface from the KlipTok front-end application.

Our architecture strategy will be to configure the existing ASP.NET Core website to run Blazor-Server pages that host the same content as appears in the Blazor-WebAssembly application that users typically interact with.  We will add a Minimal-API feature that will trigger IronPDF to render the HTML output of the new Blazor-Server dashboard page as a PDF and return that PDF to the user.

I started by adding Blazor-Server configuration to my existing ASP.NET Core by updating the Program.cs file to add services for Blazor Server:

builder.Services.AddServerSideBlazor();
builder.Services.AddTelerikBlazor();
...
app.MapBlazorHub();
...
// Listing to indicate relative position of the MapFallbackToPage statement
app.UseEndpoints(endpoints =>
{
  endpoints.MapRazorPages();
});
app.MapFallbackToPage("/_Host");

app.Run();

With this added to the website configuration, ASP.NET Core now knows how to work with Blazor content on the server.  I then brought over some Blazor files to run on the server.  This included:

• a Shared folder with the Blazor page layout “MainLayout.razor”
• _Imports.razor
• App.razor
• Pages/_Layout.cshtml to contain the HTML that would host the running Blazor application
• I also created a ‘Blazor’ folder to contain the reports and content that I would build with server-side Blazor.

Solution Explorer with New Folders

Adding the Streamer Dashboard report content

Dashboard for the CSharpFritz channel

The Streamer Dashboard is a tab inside the Streamer page on KlipTok, and not currently managed in an isolated manner.  All of the code to render this content and interact with the data repository are mixed in to the larger Streamer page.  Yes, I have some spaghetti code to unwind and deploy. In this case, it wasn’t too bad as I was able to isolate the markup that made up the inside of the Dashboard and migrate it to StreamerDashboard.razor, and you can see it in the previous image of my Solution Explorer above.

I updated the path and dependencies that were injected to use server-side interactions with the datastore instead of HTTP fetch operations to Azure Function endpoints.

@page "/app/streamerdashboard/{DisplayName}"
@inject IKlipRepository Repo
@inject IChannelRepository ChannelRepo
...
@code {
  public StreamerRecord StreamerRecord { get; set; }

  protected override async Task OnInitializedAsync()
  {

    StreamerRecord = StreamerRecord ?? await Repo.GetChannelSummary(DisplayName, true, false);

  }
}

With this change, my StreamerDashboard.razor file could render HTML at `/app/streamerfashboard/csharpfritz` or similar location based on the Display Name of the Twitch channel sought.  Very cool

I also updated the razor Pages/_Layout.cshtml file to contain less flashy formatting and force a ‘light theme’ for the rendering of content.  For printing to a PDF and a piece of paper, we would want the lighter theme to ensure all content is visible when printed.

Adding the Report Features with IronPDF

I next put all of the configuration for IronPDF into a file I called ReportsExtensions.cs (you can see it in the Solution Explorer image above).  This file contains a single method that isolates all of the configuration for IronPDF and the reports that we will enable on the website.  The source of this file is as follows:

public static WebApplication MapKlipTokReports(this WebApplication app, IWebHostEnvironment host)
{

// Configure IronPDF rendering at startup
AppContext.SetSwitch("System.Drawing.EnableUnixSupport", true);
IronPdf.License.LicenseKey = app.Configuration["IronPdfKey"];
IronPdf.Installation.TempFolderPath = $@"{host.ContentRootPath}/irontemp/";
IronPdf.Installation.Initialize();
IronPdf.Installation.LinuxAndDockerDependenciesAutoConfig = true;
var Renderer = new ChromePdfRenderer();

// Warm up the renderer with simple HTML content
using var PDF = Renderer.RenderHtmlAsPdf("<h2>Hello World<h1>");

// Map the endpoint the report creator will listen to
app.MapGet("/reports/StreamerDashboard/{channel}", 
async (HttpContext ctx, string channel) =>
{

var url = ctx.Request.GetDisplayUrl();
url = url.Substring(0, url.IndexOf("/reports"));

// Format the page
var ironPdfRender = new IronPdf.ChromePdfRenderer();
ironPdfRender.RenderingOptions.PaperSize = IronPdf.Rendering.PdfPaperSize.Letter;
ironPdfRender.RenderingOptions.RenderDelay = 2500;
ironPdfRender.RenderingOptions.ViewPortWidth = 1080;
ironPdfRender.RenderingOptions.CssMediaType = IronPdf.Rendering.PdfCssMediaType.Screen;
ironPdfRender.RenderingOptions.MarginTop = 10;
ironPdfRender.RenderingOptions.MarginLeft = 10;
ironPdfRender.RenderingOptions.MarginRight = 10;
ironPdfRender.RenderingOptions.MarginBottom = 10;
ironPdfRender.RenderingOptions.TextFooter = new TextHeaderFooter
{
RightText = $"As of {DateTime.UtcNow.ToString()} "
};
ironPdfRender.RenderingOptions.UseMarginsOnHeaderAndFooter = UseMargins.Bottom;
ironPdfRender.RenderingOptions.Title = $"Dashboard for Twitch.tv/{channel}";
ironPdfRender.RenderingOptions.FitToPaperMode = IronPdf.Engines.Chrome.FitToPaperModes.AutomaticFit;

// Instruct IronPDF to load the HTML from the Blazor Dashboard page
var pdf = await ironPdfRender.RenderUrlAsPdfAsync($"{url}/app/StreamerDashboard/{channel}");

// Set the Http Context and return the PDF
ctx.Response.ContentType = "application/pdf";
ctx.Response.Headers.Add("Content-Disposition", $"filename={channel.ToLowerInvariant()}.pdf");
await ctx.Response.BodyWriter.WriteAsync(pdf.Stream.ToArray());

});

return app;

}

This is a great little method that shows how you can isolate business processes that configure various endpoints for APIs in your web application.  In this case, we extended the WebApplication object with this static method so that our Program.cs can reference this with a very readable command like:

app.MapKlipTokReports(app.Environment);

The configuration for IronPDF at the top of the MapKlipTokReports method grabs a license key from the server configuration and activates Linux-based rendering for this application.  Additionally, there is a request to warm-up the PDF renderer with a simple bit of HTML that is discarded after its rendered.

The API address for this report generator is defined in the app.MapGet command.  It’s listening on /reports/StreamerDashboard and captures the last bit of the directories requested and converts that to a Twitch channel name that will be sought for the report.

The renderer is then configured with the information about the destination page size, headers and footers to be added.  I placed a nice ‘As Of’ timestamp in the footer of all pages rendered by using the TextFooter property and added a title using the Title property of the renderer.  Finally, the PDF is rendered with a call to the appropriate /api/StreamerDashboard/channelName location and returned as a stream with the appropriate application/pdf content type.

Now that I have the simple configuration for IronPDF built, I can evolve this method in the future so that the IronPDF rendering capabilities are isolated in their own method and my new reports are built to inject the URL of the page to render.  The configuration and presentation of this content is great, and you can check out a sample instance of this report:

Sample PDF report

Wrap-up

I added a ‘Print’ button to the dashboard page of KlipTok that opens a new tab in the browser and links to this report generated by my ASP.NET Core server and IronPDF.  This has been a great experience to build and generate a simple PDF that can be printed and shared with my stream promotion team.  I’ve got a few more ideas that I want to try with IronPDF and will share another blog post in a few days as I add some more advanced PDF features to this report.

What do you think?  Would you use a tool like IronPDF to build PDF exports for your application?

Something that always struck me about the public access to the service was that the content was never cached, never compressed, and in general felt like a simple web server delivering content without some of those features that we REALLY like about the modern web.  Adding cache headers and compressing the content will reduce the number of queries to the server and the bandwidth needed to deliver the content when it is requested.

In this post, I’m going to show you how I activated caching and compression for an Azure Storage blob cache that I wanted to use with my web application KlipTok.

Saving Data to Azure Storage – The Basics

I have a process that runs in the background every 30 minutes to identify the most popular clips on KlipTok and cache their data on Azure storage as a JSON file that can be downloaded on first visit to the website.  The code to save this data looks like the following:

var blobServiceClient = new BlobServiceClient(EnvironmentConfiguration.TableStorageConnectionString);
var containerClient = blobServiceClient.GetBlobContainerClient("cache");
var client = containerClient.GetBlobClient("fileToCache.json");
await client.UploadAsync(myContentToCacheAsStream, true);

This creates a blob client, connects to the container named cache, defines a file named fileToCache.json and uploads the content with overwrite permissions turned on (with the true argument in the last line)

Note:  I have this code embedded in an Azure Function and could use the output binding feature of Azure Functions to write this content.  After running my application with that configuration for a month, I STRONGLY recommend you never use that feature.  When the function is triggered, the output binding immediately deletes the content of the blob.  If there is an error in the function or the function takes time to complete then the rest of your system that depends on that content is going to struggle.  Instead, build a BlobServiceClient and connect to your storage in this way so that you can properly error-handle and minimize the downtime while you are uploading content.

Adding Cache Headers

We can easily add caching headers for this file by adding a few lines to the HttpHeaders using the BlobClient.  I’d like this file to be cached for 30 minutes and available on any public proxy or server.  Let’s add those headers after the UploadAsync call:

await client.SetHttpHeadersAsync(new BlobHttpHeaders
{
    CacheControl = "public, max-age=3600, must-revalidate",
    ContentType = "application/json, charset=utf-8"
});

That’s easy enough.  The CacheControl header has a clear definition that’s been around for a long time and takes a max-age in seconds.  The must-revalidate directive states that caching servers must request a new copy of the file when the cache max-age expires and should not serve a file that is older than max-age.

Compressing Content

Azure Storage does not have a way to gzip compress or brotli compress content and serve it automatically like most webservers do.  On IIS there is a panel and you can clearly activate compression by just checking a box.  With other webservers, there is an entry in the server’s configuration file that will enable gzip compression.

IIS Compression setting

With Azure Storage, we need to do the compression manually and add an appropriate header entry to indicate the compression.  The .NET BCL has a GZipStream object available and we can route content through that using the standard System.Text.JsonSerializer with this code:

var MyContent = GetClipsToCache().ToArray();

using var myContentToCacheAsStream = new MemoryStream();
using var compressor = new GZipStream(myContentToCacheAsStream, CompressionLevel.Optimal);
await JsonSerializer.SerializeAsync(compressor, MyContent, options);
compressor.Flush();

myContentToCacheAsStream.Position = 0;

I get the data to cache with the first line, GetClipsToCache() and put that as an array into the MyContent variable.  A MemoryStream is allocated that will receive the compressed content and a GZipStream is also allocated that will deliver its compressed output into the myContentToCacheAsStream.  Finally, I serialize the data as JSON and write it to the compressor GZipStream that will do the compression and deliver it to the myContentToCacheAsStream variable.  The GZipStream is flushed to ensure all of the data is compressed and the position of the target stream is reset to 0 so that it can be written to the blob storage.

We need to update the headers to include an indication that the content being served is GZip compressed.  Easy enough to update the code we just added for caching headers to include this:

await client.SetHttpHeadersAsync(new BlobHttpHeaders
{
  CacheControl = "public, max-age=3600, must-revalidate",
  ContentType = "application/json, charset=utf-8",
  ContentEncoding = "gzip"
});

Bonus points – Just Use Frontdoor

Maybe you don’t want to write this code and you just want to offload it to another service.  You could configure Azure Frontdoor to deliver this content as another route with compression and caching by just checking a box on the route configuration panel:

Azure Frontdoor Caching and Compression Configuration

Summary

With this additional bit of code, I’ve reduced the size of the file used in the initial download when visiting KlipTok from 250k to 60k, a 76% reduction in bandwidth used.

With the cache-control headers added, browsers and caching servers between my application and my users will keep copies of this file and reduce the number of requests for new content from my server.  As the number of users for my site goes up, and the amount of data I need to deliver goes up, this was a welcome feature to reduce bandwidth and consequently my hosting costs as well.  This saved me more than $400 in my December Azure invoice, so I definitely recommend you try this configuration if you are serving content from Azure Storage.

Investigation

In my case, the application in question is Fider and it manages the feedback site for KlipTok.  It runs out of a container on Azure App Service.  I popped open the logs and found this entry when users would key in new feedback reports:

Logs are reporting that the function ‘similarity’ does not exist

The logs are indicating that Postgres is looking for a function called ‘similarity’.

That’s strange.. I don’t remember configuring anything for that function in Postgres or Fider.  I did some digging, and according to the Postgres documentation, this is a function that is added through the pg_term Postgres extension.  Ok, so let’s check the Azure documentation to see if it is enabled.

According to the docs, the extension is available, but it needs to be added to the server.  I browsed to the server on the Azure portal and set the Server Parameter “azure.extensions” to include the PG_TRGM option:

Azure Portal showing how to configure the PG_TRGM extension

That’s it!  Right? After saving that configuration, the server restarted and that’s all that’s needed… right?

Nope.

The missing bits in the documentation are that you need to activate the extension for your database.  I connected to the database using the handy ‘Connect’ button in the Azure portal.

Connect to Postgres database using the Azure Portal

Once connected, I executed the following ‘Create Extension’ command to activate the extension:

CREATE EXTENSION pg_trgm;

Done!  No restart needed.  The database is updated and my application now runs properly.  The Azure documentation does show that you need to execute the ‘Create Extension’ statement, but its outside of the numeric list of steps to add extensions to the server. I’ve submitted some feedback about that, and called it a day.

In this post, I want to show the code I wrote for the winning IronPDF renderer and explore some of the features as I prepare to connect it to render a report from the Streamer Dashboard page of KlipTok.

Why not just print a PDF of the dashboard page?

The dashboard on KlipTok is rendered by JavaScript and WebAssembly.  In the tests from the comparison (source code on GitHub) I originally loaded the full-featured sports website ESPN.com with code like this:

When I attempt to simply update this code to render KlipTok at kliptok.com, I get the following result:

Simple KlipTok Rendering – Only the splash screen renders

Clearly, I need to dig in a little further and just attempting to render the Blazor Webassembly site is not going to work.  I also tried a few configuration options:

No.. no dice. I kept getting the same splashscreen again and again. I tried extending the timeout periods, thinking I had a race condition where the page wasn’t finished rendering. Let’s take a look at some of the IronPDF features that I can use after I do a little refactoring of KlipTok to get this rendering.

Additional IronPDF features are going to allow me to format the new KlipTok dashboard page nicely for printing.  Let’s take a look at some of these features and apply them to the static KlipTok page used for SEO.

IronPDF document rendering options

The first feature I activated was visible in the test code I used above, EnableJavaScript.  This feature is intended to allow websites that layout their pages with a framework like React, Angular, or Vue to perform their layout before the PDF is rendered.

I also attempted to use the RenderDelay feature to render KlipTok.  RenderDelay directs IronPDF to wait a specific number of seconds to wait before rendering a PDF.  Usually, IronPDF will render immediately after the HTML is loaded.

I also added a TextHeader to the code block above.  This is very cool because we can add some information about the content of the page inside the header.  In this case, I added an “As Of” date.  I could also add a TextFooter with similar LeftText, RightText and CenterText options to place content in the footer.  Even BETTER, I can use an HtmlFooter or HtmlHeader to place an HTMLFragment in the header or footer.  I’m going to use a little bit of HTML with the {page} and {total-page} macros to place a pager in the footer of the pages.

There are MarginLeft, MarginRight, MarginTop, and MarginBottom properties that you can use to set those margins around your content in millimeters.  I found a setting of 10mm in IronPDF with a margin of 0px in my HTML content achieved a nice balance between stretching the content to fill the paper and some reading room around the edge of the content.

By default, IronPDF attempts to render a print media version of a website.  You can force the CSS media to screen mode by setting the CSSMediaType to PdfCssMediaType.Screen and you should render the same content in your PDF that you see on the screen.

Additionally, you can force IronPDF to render a smaller version of the website by setting the ViewPort size in pixels with the ViewPortHeight and ViewPortWidth options.  It’s a good idea to tinker with these two settings and the FitToPaperMode option which lets you specify how you would like IronPDF to place content on the page.  I liked setting a large ViewPort and setting FitToPaperMode to FitToPaperModes.AutomaticFit so that the page content will be stretched to fill the ViewPort and then rendered on the page.

Finally, you’re going to want to specify the paper size to render the HTML content to.  With a PaperOrientation setting for landscape vs. portrait, and a PaperSize property as well, you have a wealth of options for the format you wish to deliver.

The SEO-optimized version of KlipTok rendered as a PDF with margins, header, and footer.

Just the beginning…

I had my problems getting the KlipTok content that was built with Blazor Web Assembly to render using IronPDF.  Fortunately, I’m in a process of refactoring the location and delivery of Blazor components in the application and I can probably move that dashboard content to server-size Blazor and render it in the SEO version of the website.

In my next blog post, I’ll move those components and configure IronPDF to render content as an ASP.NET Core Minimal API running on Azure using the format I just defined in the code above.

NOTE: Your experience might be different

Every Linux system is different, and I can point you in the direction that worked for me.  I cannot guarantee that you will find similar success or answer questions for your configuration.

I started this project on my Twitch stream on Friday December 2nd, and was able to get a simple Blazor MAUI application that played a Twitch clip running on my Windows machine.  I used Visual Studio 2022 and the Android emulator that came with it and was happy to have an initial proof-of-concept application running.

I prefer to use my Linux laptop from KFocus when I am not in my home office. It’s a great machine with plenty of power for development. With a quick web search, I found an article where someone was setting up Android development on Linux.  I read through those steps, updated to .NET 7, and wrote a few scripts to help with my development.  Here’s what I did:

1. I installed Android Studio from the Ubuntu app repository using the Discover app.
2. I opened Android Studio and grabbed the SDK folder from the Android SDK Manager tool, depicted below.  In my case, its sitting in /home/csharpfritz/Android/Sdk. 
3. Installed the .NET MAUI workload into .NET 7 at the command-line with the command: `sudo dotnet workload install maui-android`
4. Installed the Android Debug Bridge (ADB) with `sudo apt install adb`
5. Started and ran the emulator from Android Studio, verifying that it was running with `adb devices`

Now that I have the emulator running, I could build and deploy my application to the emulator with the command:

dotnet build -t:Run -f net7.0-android /p:AndroidSdkDirectory=/home/csharpfritz/Android/Sdk

On first test, it failed miserably and complained about not supporting MacCatalyst and iOS development on Linux.  Not a problem, so I updated the csproj file to have supported frameworks like the following:

<TargetFrameworks>net7.0-android;</TargetFrameworks>
<TargetFrameworks Condition="$([MSBuild]::IsOSPlatform('osx'))">
  $(TargetFrameworks);net7.0-ios;net7.0-maccatalyst
</TargetFrameworks>
<TargetFrameworks Condition="$([MSBuild]::IsOSPlatform('windows'))">
  $(TargetFrameworks);net7.0-windows10.0.19041.0
</TargetFrameworks>

When I now build on Linux, just the Android configuration runs.  I tried to recompile and got errors about the compiler not finding the Java jar tool.  Easy enough, I installed the latest tool with this command:

sudo apt install openjdk-11-jdk-headless

I compiled and was able to deploy to the emulator in 55 seconds!  Progress!

Last steps, I wanted to get the app building and recompiling with dotnet watch.  This way, I can make changes and the app will reflect those changes in the emulator.  My dotnet watch command is:

dotnet watch build -t:Run -f net7.0-android /p:AndroidSdkDirectory=/home/csharpfritz/Android/Sdk

I found that the app didn’t rebuild and deploy when I made changes to the razor files.  Easy enough, I made another addition to my csproj file to include a definition for watching the razor files:

<ItemGroup>
  <Watch Include="**\*.razor" />
</ItemGroup>

With this patched, I was able to build and run the app in watch mode.  As I changed razor files, the app would redeploy to the emulator in 6 seconds!  That’s such a better development experience.  Last thing that I tried, was to add a switch to my script to shut off the analyzers when I’m in watch mode:

dotnet watch build -t:Run -f net7.0-android /p:AndroidSdkDirectory=/home/csharpfritz/Android/Sdk /p:RunAnalyzers=false

That didn’t give me a big boost in performance, but I feel better without the analyzers running when I’m in watch mode.

Have you tried building an Android app on Linux with MAUI?  Do you have any tips or tricks for developers to use in order to have a better experience?  Share with us in the comments below