Maintenance Mode Plugin

One of the Blazor plugins that I’ve written recently is one that enables me to quickly put a Blazor website into maintenance mode. Here is what that looks like, at runtime:

When in maintenance mode, the plugin essentially hijacks the entire website and prevents anyone from doing, well, pretty much anything.

When not in maintenance mode, the plugin sits quietly in the background and bides it’s time … plotting … scheming …

Nah, just kidding. The plugin doesn’t do anything when maintenance mode is disabled.

Integrating this plugin into a typical server-side Blazor project is super easy. I’ve not tested it, yet, with a WebAssembly project, but it should still work, just fine.

To integrate the plugin start by finding, or creating, whatever Blazor project you want to work with.

Next, add a reference to the CG.Blazor.Maintenance NUGET, which can be found HERE.

Note that my plugin code used to be part of my CG.Blazor project. I have since split that project out into separate projects. CG.Blazor was rapidly becoming a “kitchen sink” library, and I despise those kinds of bloated beasts, so, I moved the plugin code to CG.Blazor.Plugins.

Next, add this to your _Imports.razor file:

@using CG.Blazor.Plugins

Next, add this snippet to your appsettings.json file:

"Plugins": {
    "Modules": [
      {
        "AssemblyNameOrPath": "CG.Blazor.Maintenance",
        "Routed": true,
        "MaintenanceMode": true
      }
    ]
  }

Next, add this code to your ConfigureServices method, in the Startup class:

public void ConfigureServices(IServiceCollection services)
{
    services.AddBlazorPlugins(
        Configuration.GetSection("Plugins")
        );

   // everything else removed, for clarity.
}

Notice that I add the plugins before anything else. That prevents problems in case any of my plugins do things like register handlers, url rewrite rules, etc.

Next, add this code to your Configure method, in the Startup class:

public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
    app.UseBlazorPlugins(env);

   // everything else removed, for clarity. 
}

The next steps are really more about integrating my Blazor plugins, which this package is built upon, but, they still have to be done in order for everything to work, so …

Next, open the _Host.cshtml file and add the following code into the bottom of the head section:

@(Html.Raw(BlazorResources.RenderStyleSheetLinks()))

Next, add the following code to the bottom of the body section:

@(Html.Raw(BlazorResources.RenderScriptTags()))

So what’s going on here? Well, we’re essentially automating the injection of any plugin based resources, into the Blazor application. If you want to know more, go read my articles on Blazor plugins, HERE, HERE, and HERE

Next, open your App.razor file and add the following code:

<Router AppAssembly="@typeof(Program).Assembly" 
        AdditionalAssemblies="@BlazorResources.RoutedAssemblies">
<!-- the rest is removed for clarity -->
</Router>

Check out line 2, that AdditionalAssemblies bit, that’s the part we need to add. The rest of the code is already in your App.razor file, and we don’t need to mess with it.

And that’s it! Not bad, right?

Now, when you start your application, it should display the maintenance mode page. To turn that off, simply change line 6, in your appsettings.json file, where the MaintenanceMode field is, from true, to false. Toggling that value in your appsettings.json file is how you can quickly turn on or off a maintenance mode for the entire website.

"Plugins": {
    "Modules": [
      {
        "AssemblyNameOrPath": "CG.Blazor.Maintenance",
        "Routed": true,
        "MaintenanceMode": false
      }
    ]
  }

To be sure, this plugin is super new and not very well tested. But, it definitely serves a need for me, in one of my projects. I hope it serves a similar need for you, as well.

Next time, I’ll dive into how the plugin does, what it does.

The source code for this project is available, for free, HERE

The NUGET package is available for free, HERE.

There is a complete, working Blazor sample application provided with the source code. Just download the code from GITHUB and look in the samples folder.

Photo by Coby Shimabukuro on Unsplash