Week 2, Day 5 of #30DaysOfSWA!!
- Introduction: Blazor WebAssembly
- Quickstart: Simple Blazor SWA
- Advanced: Blazor SWA + Wordpress CMS
- Exercise: Remix Fritz's Hat Collection!
Today's post has contributions from two well-known technologists in the .NET community.
First, say hello to Justin Yoo - a core member of the .NET Cloud Advocacy team, Microsoft MVP alumnus, and a popular speaker and author. Find him @justinchronicle or follow him here on dev.to
Next, say hello to Jeff Fritz - a popular Twitch livestreamer @theLiveCoders, a Program Manager at Microsoft and the creator of KlipTok, a Blazor application that makes social discovery and sharing of streaming clips, easier. Check back in week 4 for a post on KlipTok!
What if I told you that was not always the case? What if you could write web applications in C#, running in a .NET runtime inside the browser! Turns out you can - thanks to Blazor.
What is Blazor?
What is Web Assembly?
Running .NET code inside web browsers is made possible by WebAssembly(
How does Blazor WebAssembly Work?
Want to learn how you can deploy a simple Blazor application to Azure Static Web Apps? We have you covered! Follow this tutorial to learn how to deploy an existing Blazor app to Azure Static Web Apps.
The end result will look something like this - a single page Blazor web application that displays weather data returned from a serverless API - beginning with this starter app,
Want to try a more complex example? Check out this advanced tutorial (from Justin Yoo).
Here's a brief introduction from that post:
One of the most popular scenarios to build a static website is to run a blog site for myself or my organisation. WordPress is the most popular service for this purpose. Now, you want to migrate your WordPress blog site to a static website, but it doesn't look easy.
What if you still want to use the WordPress site to write content but only want to refresh the UI outside the site? What if you can even use C# for it through Blazor WebAssembly? You are now able to use the existing WordPress site as the data source of truth and build a UI in a separate instance with your preferred method. Does that sound attractive?
Join Justin as he walks through the steps required to:
- use the serviced Wordpress instance as a headless CMS
- build the Blazor WebAssembly app using Wordpress
- host the completed app on Azure Static Web Apps
The end result is something like this. Don't forget to **check out the dev.to blog post behind this and try it out for yourself!
Hopefully you're ready to try something fun that will reinforce what you learned today.
Say Hello to (Jeff) Fritz's Really Cool Hats
Fritz's Really Cool Hats is an open-source static web site built with Blazor WebAssembly, incorporating C# Azure Functions and Azure Storage, and deployed using Azure Static Web Apps. The project was created by Jeff Fritz - the face behind many Twitch livestreams and the popular Beginners Series To Blazor.
For this exercise:
- Fork the repository and clone it locally.
- Open project in Visual Studio - press F5 to launch (app and api).
- Configure your Azure Storage account to add your own images
- Use the quickstart to deploy to Azure Static Web Apps.
Explore the source and the GitHub Actions files in the original repository to understand how the app is structured. Then share your deployed project with us by tagging a tweet with #30DaysOfSWA.
Here are some resources to get you started with your Blazor journey into