#12: Headless CMS & SWA – Built With Blazor

Welcome to Week 2, Day 5 of #30DaysOfSWA!!

Over the previous couple of days we have been exploring JavaScript-based frameworks for constructing internet apps. At this time, we change our consideration to our wonderful .NET group and speak about constructing Static Net Apps with Blazor

What We’ll Cowl

  • Introduction: Blazor WebAssembly
  • Quickstart: Easy Blazor SWA
  • Superior: Blazor SWA + WordPress CMS
  • Train: Remix Fritz’s Hat Assortment!

In regards to the Authors

At this time’s publish has contributions from two well-known technologists within the .NET group.

First, say whats up to Justin Yoo – a core member of the .NET Cloud Advocacy staff, Microsoft MVP alumnus, and a well-liked speaker and writer. Discover him @justinchronicle or observe him right here on style-tricks.com

Subsequent, say whats up to Jeff Fritz – a well-liked Twitch livestreamer @theLiveCoders, a Program Supervisor at Microsoft and the creator of KlipTok, a Blazor utility that makes social discovery and sharing of streaming clips, simpler. Test again in week 4 for a publish on KlipTok!

csharpfritz image

Blazor WebAssembly

After we take into consideration internet functions, we usually consider creating with JavaScript, HTML, and CSS. In truth, a lot of you studying this sequence might determine yourselves as JavaScript builders when discussing trendy internet apps.

What if I advised you that was not at all times the case? What in case you may write internet functions in C#, working in a .NET runtime contained in the browser! Seems you’ll be able to – due to Blazor.

What’s Blazor?

Blazor is a framework for building interactive client-side web UI with .NET. Builders can construct interactive internet functions utilizing C# (as an alternative of JavaScript) – and lengthen experiences to hybrid desktop and cellular apps with .NET capabilities.

What’s Net Meeting?

Operating .NET code inside internet browsers is made potential by WebAssembly(wasm) – a binary instruction format and open internet commonplace that’s designed as a moveable compilation goal for programming languages. It supplies a sandboxed runtime that may be applied inside JavaScript digital machines (like these in trendy internet browsers) to assist internet apps.

How does Blazor WebAssembly Work?

Blazor WebAssembly is a framework for constructing single web page app (SPA) that works with all trendy internet browsers, together with cellular variations. Blazor apps are written utilizing Razor elements in a .NET runtime. The .NET code is then executed by way of WebAssembly within the browser’s JavaScript sandbox. WebAssembly makes use of JavaScript interoperability to get full entry to browser options. Find out how Blazor web apps work.

How does Blazor WebAssembly Work

Easy Blazor SWA

Wish to be taught how one can deploy a easy Blazor utility to Azure Static Net Apps? We now have you coated! Observe this tutorial to discover ways to deploy an present Blazor app to Azure Static Net Apps.

The tip outcome will look one thing like this – a single web page Blazor internet utility that shows climate information returned from a serverless API – starting with this starter app,

Quickstart demo

Blazor SWA and WordPress

Wish to attempt a extra complicated instance? Take a look at this superior tutorial (from Justin Yoo).

Here is a quick introduction from that publish:

One of the vital standard eventualities to construct a static web site is to run a weblog web site for myself or my organisation. WordPress is the most well-liked service for this function. Now, you need to migrate your WordPress weblog web site to a static web site, nevertheless it does not look simple.

What in case you nonetheless need to use the WordPress web site to jot down content material however solely need to refresh the UI outdoors the positioning? What in case you may even use C# for it by Blazor WebAssembly? You are actually in a position to make use of the present WordPress web site as the info supply of reality and construct a UI in a separate occasion together with your most well-liked technique. Does that sound engaging?

Be part of Justin as he walks by the steps required to:

  • use the serviced WordPress occasion as a headless CMS
  • construct the Blazor WebAssembly app utilizing WordPress
  • host the finished app on Azure Static Net Apps

The tip result’s one thing like this. Remember to **try the style-tricks.com weblog publish behind this and take a look at it out for your self!

Final demo

Train: Remix Fritz’s Hats!

Hopefully you are able to attempt one thing enjoyable that can reinforce what you realized in the present day.

Say Whats up to (Jeff) Fritz’s Actually Cool Hats

Fritz’s Really Cool Hats is an open-source static web page constructed with Blazor WebAssembly, incorporating C# Azure Capabilities and Azure Storage, and deployed utilizing Azure Static Net Apps. The mission was created by Jeff Fritz – the face behind many Twitch livestreams and the favored Beginners Series To Blazor.

Visit The Deployed Site

Hats demo

For this train:

Discover the supply and the GitHub Actions information within the authentic repository to grasp how the app is structured. Then share your deployed mission with us by tagging a tweet with #30DaysOfSWA.


Listed here are some assets to get you began together with your Blazor journey into

Add a Comment

Your email address will not be published. Required fields are marked *