CSS live reloading on Blazor
Tags: blazor, webdev
Published: 2020-03-20 13:05:00

---
title: CSS live reloading on Blazor
published: true
description: Take back "CSS live reloading" on Blazor App Development!
tags: blazor, webdev
---

# 5~8 years ago...

Do you remember past ASP.NET Web app development seen?

Visual Studio 2012~2015 gave us a great experience for ASP.NET Web app development, like this:

- Page Inspector
- CSS Auto-Sync (a.k.a "CSS live reloading")

[![fig0](https://github.com/jsakamoto/Toolbelt.AspNetCore.CssLiveReloader/blob/master/.assets/fig2.png?raw=true)](https://channel9.msdn.com/Blogs/ASP-NET-Site-Videos/visual-studio-2012-page-inspector)  
_["Channel 9 | ASP.NET Site Videos | Visual Studio 2012 Page Inspector"](https://channel9.msdn.com/Blogs/ASP-NET-Site-Videos/visual-studio-2012-page-inspector)_

But the big wave of JavaScript SPA frameworks broken these comfortable experience, because it didn't concern Visual Studio. :(

# Take back "CSS live reloading"

Now, 2020, I 'was hoping to take back the "CSS live reloading" feature in my Blazor web app development scenario, strongly, day by day.

Fortunately (or unfortunately?), the Blazor app doesn't provide the "CSS component" feature, at this time.  
Therefore, I thought that the "CSS live reloading" feature (especially, without reloading the entire current document) will be achieved easily.

That's right. After a few hours researching, I could find many "live reloading" solutions.

# But, I couldn't be satisfied...

However, I couldn't be satisfied any solutions I found.

Because the reloading CSS of those solutions **are not smoothly**.

- One of those solutions **reloaded entire the HTML document**, even when one of the CSS files is updated.
- One of those solutions **reloaded all of the CSS files** that are included in the document, even when one of the CSS files is updated.
- All of those solutions that I found caused **strongly flicker** when the CSS files are reloading. (It dropped all styles at first, and apply the latest CSS after that.)

I was feeling, any solutions I found couldn't reach the great experience that I met 5 years ago which was provided by Visual Studio 2015.

# It's time to "Reinventing the wheel"!

So I decided to "Reinventing the wheel".  
That means I have to make my own "CSS live reloading" solution/product.

A few days later, I did it finally, and publish it as an open-source library.

# "ASP.NET Core CSS Live Reloader"

I published my achivement as a NuGet package **"ASP.NET Core CSS Live Reloader"** (`Toolbelt.AspNetCore.CssLiveReloader`). 

- _[NuGet Gallery | Toolbelt.AspNetCore.CssLiveReloader](https://www.nuget.org/packages/Toolbelt.AspNetCore.CssLiveReloader/)_

It is a middleware for ASP.NET Core 3.1+ app.

After you installed this package into your ASP.NET Core app (such as hosting server for Blazor WebAssembly app),

```shell
$ dotnet add package Toolbelt.AspNetCore.CssLiveReloader
```

and after you added using for this middleware in your Startup class,

```csharp
...
using Toolbelt.Extensions.DependencyInjection; // <- Add this, and...
...
public class Startup
{
  ...
  public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
  {
    ...
    if (env.IsDevelopment())
    {
      ...
      app.UseCssLiveReload(); // <- Add this!
```

"CSS live reloading" feature will be started works fine!

![fig1](https://raw.githubusercontent.com/jsakamoto/Toolbelt.AspNetCore.CssLiveReloader/master/.assets/fig1.gif)

It's **flicker-free**, and **it doesn't reload the entire document**.


# "Blazor Dev Server with CSS live reloader"

If you are developing Blazor WebAssembly standalone app (not ASP.NET Core hosted), there is a more easy way.

I published my work as a fork version of Blazor Dev Server, **"Blazor Dev Server with CSS live reloader"** (`Toolbelt.Blazor.DevServer.WithCssLiveReloader`).

- _[NuGet Gallery | Toolbelt.Blazor.DevServer.WithCssLiveReloader](https://www.nuget.org/packages/Toolbelt.Blazor.DevServer.WithCssLiveReloader/)_

Therefore, what you have to do is, just exchange package reference in your project file (.csproj) from `Microsoft.AspNetCore.Components.WebAssembly.DevServer` package to `Toolbelt.Blazor.DevServer.WithCssLiveReloader` package.

![fig2](https://raw.githubusercontent.com/jsakamoto/Toolbelt.Blazor.DevServer.WithCssLiveReloader/master/.assets/fig1.gif)

## How does it work?

The basic concept is the same with other "CSS live reloading" solutions.

1. The server process injects a small JavaScript code into the requested HTML document.
2. That JavaScript code connects to the server process to receive events from the server process. (My packages use "Server-Sent Events" (SSE) technology.)
1. The server process watch the CSS files.
2. When the server process detects the CSS files are changed, the server process sends the event to that JavaScript code to notify which CSS file should be reloaded.

The most interesting point of my package is, how to implement smooth and flicker-free CSS reloading.

My implementations is as below:

1. The JavaScript code clone a `link` element which to be reloaded, and add `onload` event handler to that cloned `link` element. (The JavaScrip code also updates the "reload token" in `href` URL to avoid browser's cache.)
2. The JavaScript code inserts that cloned `link` element into the DOM at the **before** of the original `link` element.  
![fig3.1](https://raw.githubusercontent.com/jsakamoto/Toolbelt.AspNetCore.CssLiveReloader/master/.assets/fig3.1.png)
3. After loading the new CSS file is completed, the browser fires the `onload` event of that cloned `link` element. Then, the event handler removes the original `link` element from DOM.  
![fig3.2](https://raw.githubusercontent.com/jsakamoto/Toolbelt.AspNetCore.CssLiveReloader/master/.assets/fig3.2.png)  
![fig3.3](https://raw.githubusercontent.com/jsakamoto/Toolbelt.AspNetCore.CssLiveReloader/master/.assets/fig3.3.png)


# Conclusion

I think, "ASP.NET Core CSS Live Reloader" and "Blazor Dev Server with CSS live reloader" will provide a more comfortable CSS live reloading experience for you.

I'm happy if these packages improve your Blazor programming life.

Happy coding :)