In my previous post, Blazor Data Grid, I showed off a new Blazor web component, and at the bottom of the post, I actually had a demo version of the component right here in this blog, which is running on WordPress. Hat tip to Virtual Dan at http://dano.vfsystems.net/2020/03/blazor-and-wordpress/ for getting me pointed in the right direction!
The gist of it is, since Blazor components can run in WebAssembly, all you need for a functioning embedded component is a Blazor WebAssembly project with a single component, published up to a folder in your WordPress (or other site) directory, a script tag to load blazor’s runtime, and a div with a pre-determined
I started with the default Blazor Web Assembly template in Rider (my IDE of choice, but VS or VS Code work fine as well). In
Program.Main, you see the following line:
This defines the key div as having
id="app", and points to a blazor component or razor file named
App.razor. You can of course change both the
Id string value and the razor file loaded. In my case, I decided that I didn’t need all the routing logic in
App.razor for an embedded component project, so I deleted this (and many other files). At first, I just pointed to the component I wanted to render. Note that if you change the
Id, you will also want to update your
index.html file to match, so you can test your application. Running in debug, you get a simple rendering of your component in a blank page.
[Demo Musical Keyboard (Xylophone) Component]
Now that we have a working Blazor Wasm component, we want to get it up to our WordPress server. I recommend setting up some form of automated deployment on git commit, so that you don’t have to manually copy files every time you make a change (I use Azure DevOps Pipelines, but there are many solutions). Basically, you want everything in the
/wwwroot folder of your publishing step to be directly copied into your root
WordPress folder, like say
/etc/wordpress/. This should be the same folder as
That “everything” mentioned above includes two important folders,
_framework is the .NET Runtime and Wasm assemblies. We will discuss
_content later. You should also see your
Once the files are in place, load up the WordPress post or page editor, and add a “Custom HTML” block. Add the following code (I’m reverting back to the default “app” id here):
<base href="/" />
<link href="YourApplication.styles.css" rel="stylesheet" />
This is based on Virtual Dan’s version, (thanks again). Let’s break it down.
stylesheet link is only important if you actually created any styles for your component. We’ve already mentioned that we need a
div with the correct
Id. Whatever you put inside the div (e.g., “Loading…”) will show for a second or two while blazor boots up. Then it gets overwritten by the contents of your component. Below this is the
script that loads Blazor Web Assembly.
I noticed the
<base href="/" /> in Virtual Dan’s source code on his site. He doesn’t mention it in the explanations, but I figured out the reason for this. Without re-setting the base url, I would get errors with looking for
blazor.webassembly.js at whatever the page url is, like
https://tocode.software/2021/03/04/Blazor/_framework/blazor.webassembly.js. Obviously, I don’t want to put my framework at this location on disk, if I want to share it with multiple pages in the future, and prevent it from breaking if the url ever changes. I did tinker around with starting the
script src with and without the forward slash, but it didn’t seem to work either way, until I discovered what Dan was doing with the
If you’ve successfully followed thus far, publish or preview your wordpress page, and give yourself a high five for running Blazor in WordPress! I will follow up in the next few days with another post about refactoring and supporting multiple components.