Updating JSON Validate to Blazor 3.2.0 Preview 3

- 6 minutes read - 1077 words

I built the website JSON Validate with Blazor some time ago for the purposes of trying out Blazor, and have been updating it upon each release of Blazor since. But, I haven’t updated it in a while, and Blazor 3.2.0 Preview 2 and 3 were just released with some cool features so I thought it was about time to update.

Update to 3.2.0 Preview 2

The website is currently on 3.2.0 Preview 1, so I need to update to Preview 2 first. I’ll follow the announcement blog post steps to update.

Install required .NET Core SDK

.NET Core SDK 3.1.102 or later is required to run Preview 2, which you can install from the downloads page. Once that is done, I need to update my global.json in my repo to this as well:

{
    "sdk": {
        "version": "3.1.102"
    }
}

And I also need to update my Azure Pipelines YAML to use this SDK:

  variables:
    ...
    dotnetSDK: 3.1.102
    ...

Update Blazor Templates

Each Blazor release comes with a new set of .NET templates, so although my project is already setup, it’s a good idea to update to the latest templates in case I want to add a new library or whatever. This can be done with the following command:

$ dotnet new -i Microsoft.AspNetCore.Components.WebAssembly.Templates::3.2.0-preview2.20160.5

Update package names

They changed quite a few package names in Preview 2 so these need to be updated. My main Blazor project has the following references:

    <PackageReference Include="Microsoft.AspNetCore.Blazor" Version="$(BlazorVersion)" />
    <PackageReference Include="Microsoft.AspNetCore.Blazor.Build" Version="$(BlazorVersion)" PrivateAssets="all" />
    <PackageReference Include="Microsoft.AspNetCore.Blazor.DevServer" Version="$(BlazorVersion)" PrivateAssets="all" />

These need to be update to become:

  <ItemGroup>
    <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly" Version="$(BlazorVersion)" />
    <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly.Build" Version="$(BlazorVersion)" PrivateAssets="all" />
    <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly.DevServer" Version="$(BlazorVersion)" PrivateAssets="all" />
  </ItemGroup>

I also need to update any usings to reference the new names. The only affected on is in Program.cs:

Before:

using Microsoft.AspNetCore.Blazor.Hosting;

After:

using Microsoft.AspNetCore.Components.WebAssembly.Hosting;

Update package version

I’m using a Directory.Build.props to handle all of my package versions in one file. Currently it looks like this:

<Project>
    <PropertyGroup>
        ...
        <BlazorVersion>3.2.0-preview1.20073.1</BlazorVersion>
        ...
    </PropertyGroup>
</Project>

So I just need to update the Blazor Version to the new preview:

<Project>
    <PropertyGroup>
        ...
        <BlazorVersion>3.2.0-preview2.20160.5</BlazorVersion>
        ...
    </PropertyGroup>
</Project>

Update to new APIs

They also changed some APIs in this release. But none of these apply for my project, so all good!

New features

Preview 2 also includes a set of new features:

  • Integration with ASP.NET Core static web assets
  • Token-based authentication
  • Improved framework caching
  • Updated linker configuration
  • Build Progressive Web Apps

I’m not using static web assets or authentication so there’s nothing to do there. And the framework caching and updated linker configuration are baked into the product, so nothing to do there either. But this app is a PWA but I haven’t done a great job with the configuration so let’s use the PWA feature for this app.

Progressive web app

It looks like the easiest way to integrate this is to create a new Blazor app with PWA features turned on and then pull them into my current project. To create a Blazor Wasm app with PWA you run the following command:

$ dotnet new blazorwasm --pwa -o JsonValidate

This creates a few key files that configure the project as a PWA:

  • JsonValidate.csproj
  • wwwroot/manifest.json
  • wwwroot/service-worker.js
  • wwwroot/service-worker.published.js
  • wwwroot/index.html

The key part of the project file is the handling of which service worker file to use, as there is one for development and one for production. This is done with the following lines:

<Project Sdk="Microsoft.NET.Sdk.Web">

  <PropertyGroup>
    ...
    <ServiceWorkerAssetsManifest>service-worker-assets.js</ServiceWorkerAssetsManifest>
  </PropertyGroup>
  ...
  <!-- When publishing, swap service-worker.published.js in place of service-worker.js -->
  <ItemGroup Condition="'$(DesignTimeBuild)' != 'true'">
    <Content Remove="wwwroot\service-worker.js" />
    <Content Update="wwwroot\service-worker.published.js" Link="wwwroot\service-worker.js" />
  </ItemGroup>

</Project>

I already have a manifest file setup correctly, so I’ll keep mine.

But I’ll pull in the service worker files from the template as mine are botched. I also need to update the index.html file to reflect the service worker filename:

<!DOCTYPE html>
<html>
...
<body>
    <script>navigator.serviceWorker.register('service-worker.js');</script>
</body>
</html>

Test it

Let’s test that the app still works:

Alt Text

We can see that the new caching and linking is working. Everything looks good!

Update to 3.2.0 Preview 3

Now we’ve updated to Preview 2, we can update to Preview 3. I’ll follow the announcement blog post steps to update.

Install required .NET Core SDK

.NET Core SDK 3.1.201 or later is required, which you can install from the downloads page. Once that is done, I need to update my global.json in my repo to this as well:

{
    "sdk": {
        "version": "3.1.201"
    }
}

And I also need to update my Azure Pipelines YAML to use this SDK:

  variables:
    ...
    dotnetSDK: 3.1.201
    ...

Update Blazor Templates

Each Blazor release comes with a new set of .NET templates, so although my project is already setup, it’s a good idea to update to the latest templates in case I want to add a new library or whatever. This can be done with the following command:

$ dotnet new -i Microsoft.AspNetCore.Components.WebAssembly.Templates::3.2.0-preview3.20168.3

Update package version

I’m using a Directory.Build.props to handle all of my package versions in one file. Currently it looks like this:

<Project>
    <PropertyGroup>
        ...
        <AspNetCoreVersion>3.1.1</AspNetCoreVersion>
        <BlazorVersion>3.2.0-preview2.20160.5</BlazorVersion>
        ...
    </PropertyGroup>
</Project>

So I need to update the Blazor and AspNetCore versions:

<Project>
    <PropertyGroup>
        ...
        <AspNetCoreVersion>3.1.3</AspNetCoreVersion>
        <BlazorVersion>3.2.0-preview3.20168.3</BlazorVersion>
        ...
    </PropertyGroup>
</Project>

New features

Preview 3 does come with new features, but I’ll leave these for another blog post. These features are:

  • Debugging in Visual Studio and Visual Studio Code
  • Auto-rebuild in Visual Studio
  • Configuration
  • New HttpClient extension methods for JSON handling

Test it

Let’s test that the app still works:

Alt Text

We can see that the new caching and linking is working. Everything looks good!

Deploying to production

I created a pull request with these changes and it all built correctly. I then merged it to master but my deployment failed. In previous versions the published assets were put in a [project-name]/dist folder where as now they are in a wwwroot folder. Once that was corrected, my release pipeline worked and published to Azure Storage and CDN correctly!

You can see the live website has been updated and now includes the new service worker code!

www.jsonvalidate.net working

Summary

In this post, I upgrade JSON Validate website from Blazor 3.2.0 Preview 1 to Preview 3. This included updating the SDK version, packages names, package versions and including the PWA assets from the new templates. I deployed the new website and everything works well!

Resources

comments powered by Disqus