Calling all developers! We invite you to provide your input on Feature Experimentation by completing this brief survey.

 

Jørgen Tonvang
Apr 2, 2020
  4388
(7 votes)

MusicFestival Blazor WebAssembly site!

While we're waiting for the official .NET Core support for Episerver to come out (my beta invite must have been lost in the e-mail), I've ported the excellent MusicFestival SPA to run on Blazor WebAssembly - so you can have SPA templates running purely on .NET Core and Blazor with Episerver CMS today.

What is Blazor and why should you care?

Blazor is a free and open source web framework from Microsoft that allows us to create rich and interactive front-ends using C# and .NET Core. The application is compiled to WebAssembly and served by the browser. 

This enables us to create a dynamic front-end totally independent of Javascript, which means you can say good bye to the ever changing chaos of Babel, Webpack, Linters and the several billion files in your node_modules folder. 

I can't speak for all developers, obviously, but after working with AngularJS, ReactJS and Vue the past 6-7 years - the simplicity of Blazor is very refreshing. While it is still in preview and parts of it are a little rough around the edges, it gets new releases frequently and Microsoft definitely puts a lot of effort into it. 

How does it work with Episerver?

Since Blazor requires .NET Core, the application needs to have it's own project - but the compiled WebAssembly-application can be hosted anywhere. 

For this site, I've set it up so that the Blazor application is published to a subfolder on the Episerver site whenever the project is built. Then there are URL-rewrite rules in place that rewrites all requests to the subdirectory, with exceptions for requests to Content Delivery API and the Episerver-interface. 

Blazor's built in router doesn't support loading components dynamically from routes that are unknown at compile time, so I made a custom router for this that replaces the default. 

I'll make another blog post or two covering the specifics of working with Episerver and Blazor, but until then, please check it out on Github:

https://github.com/jtonvang/musicfestival-blazor

Apr 02, 2020

Comments

valdis
valdis Apr 2, 2020 03:01 PM

very interesting! :) thanks for efforts putting this together

MartinOttosen
MartinOttosen Apr 8, 2020 08:54 AM

Nice work! I've sent you an email to verify we have the correct contact details for the beta, if nothing comes through, please ping me at first.last@epi

Please login to comment.
Latest blogs
Decimal numbers in Optimizely Graph

Storing prices as decimal numbers on a commerce website and planning to expose them through Optimizely Graph? It might not be as straightforward as...

Damian Smutek | Jan 23, 2025 | Syndicated blog

Find and delete non used media and blocks

On my new quest to play around with Blazor and MudBlazor I'm going back memory lane and porting some previously plugins. So this time up is my plug...

Per Nergård (MVP) | Jan 21, 2025

Optimizely Content Graph on mobile application

CG everywhere! I pull schema from our default index https://cg.optimizely.com/app/graphiql?auth=eBrGunULiC5TziTCtiOLEmov2LijBf30obh0KmhcBlyTktGZ in...

Cuong Nguyen Dinh | Jan 20, 2025

Image Analyzer with AI Assistant for Optimizely

The Smart Image Analyzer is a new feature in the Epicweb AI Assistant for Optimizely CMS that automates the management of image metadata, such as...

Luc Gosso (MVP) | Jan 16, 2025 | Syndicated blog

How to: create Decimal metafield with custom precision

If you are using catalog system, the way of creating metafields are easy – in fact, you can forget about “metafields”, all you should be using is t...

Quan Mai | Jan 16, 2025 | Syndicated blog

Level Up with Optimizely's Newly Relaunched Certifications!

We're thrilled to announce the relaunch of our Optimizely Certifications—designed to help partners, customers, and developers redefine what it mean...

Satata Satez | Jan 14, 2025