.NET Development on Azure Readiness starts here...

Keeping MCP Server config in sync between VS Code and GitHub Copilot CLI

Thu, 26 Feb 2026 00:00:00 +0000

Syncing MCP config from VS Code to Copilot CLI in a few simple steps.

Hey awesome people,

Over the last weeks, Iâ€™ve been jumping between VS Code and Copilot CLI a lot more than usual. One thing kept annoying me: my MCP setup was perfect in VS Code, but I had to keep tweaking pieces again in CLI.

If that sounds familiar, good news: if you already have MCP servers working in VS Code, you can reuse most of that setup in GitHub Copilot CLI.

In this post, Iâ€™ll show you the fastest way to ‘keep both in sync’ from VS Code mcp.json to Copilot CLI mcp-config.json, with the necessary commands for both PowerShell and Bash.

Why this matters

When you move between VS Code and terminal workflows, you really donâ€™t want to rebuild MCP config from scratch every time.

I made that mistake once (probably multiple times, but didn’t want to exagerate too much…), and it was exactly as fun as it sounds: tiny syntax differences, one invalid server name, one missing env var, and suddenly youâ€™re troubleshooting config instead of actually building. (Although I can tell you that this would be a perfect use case for GenAI GitHub Copilot, lol)

This guide helps you:

keep one consistent MCP setup style (VSCode MCP Config as the ‘main’ source)
avoid common config parsing errors in Copilot CLI
‘keep-in-sync’ in a few minutes, even if youâ€™re new to MCP

MCP in plain English

MCP (Model Context Protocol) lets AI tools connect to external capabilities.

Think of MCP servers as â€œskill pluginsâ€ for your assistant, like:

documentation search
GitHub actions (issues, PRs, code search)
browser automation
Azure DevOps operations

File locations you should know

VS Code MCP config is typically found at:

Workspace: ./mcp.json or ./.vscode/mcp.json
User-level:
- Windows: %APPDATA%\\Code\\User\\mcp.json
- macOS: ~/Library/Application Support/Code/User/mcp.json
- Linux: ~/.config/Code/User/mcp.json

Copilot CLI MCP config lives here on all platforms:

~/.copilot/mcp-config.json

VS Code vs Copilot CLI: the important differences

The two formats are very close, but not identical:

Top-level key
- VS Code: servers
- Copilot CLI: mcpServers
Server ID naming rules in Copilot CLI
- allowed: letters, numbers, _, -
- server keys with / must be renamed
VS Code inputs
- supported in VS Code flow
- not used in Copilot CLI config
Placeholder syntax
- VS Code often uses ${env:VAR} and ${input:name}
- Copilot CLI expects $VAR and supports explicit env mappings

None of this is hard, but itâ€™s just different enough to break things when done manually in a hurry.

Fast path (recommended): automate conversion

You can grab both scripts directly from my GitHub repo:

https://github.com/petender/MCP-Clone_VSCode2CLI

Quick clone commands (PowerShell, bash, zsh):

1
2


git clone https://github.com/petender/MCP-Clone_VSCode2CLI.git
cd MCP-Clone_VSCode2CLI

Use one of these scripts:

convert-mcp-config.ps1 (Windows/macOS/Linux with pwsh)
convert-mcp-config.sh (macOS/Linux with bash + python3)

I personally use the PowerShell version most of the time, no surprise I’m primarily a Windows-guy, but didn’t want to assume everyone is using PowerShell nowadays. (You should though ;)

What the script converts automatically

servers -> mcpServers
removes VS Code-only inputs
converts ${input:name} -> $NAME
converts ${env:VAR} -> $VAR
adds/merges env mappings like "VAR": "$VAR"
renames invalid server IDs (for example containing /)

This is exactly the part that saves the most time (and avoids the most headaches).

PowerShell usage (`convert-mcp-config.ps1`)

The script supports cross-platform defaults using your home path.

Easiest mode

1

pwsh -ExecutionPolicy Bypass -File ./convert-mcp-config.ps1

This auto-discovers common input locations and writes to ~/.copilot/mcp-config.json.

Explicit input, default output

1
2


pwsh -ExecutionPolicy Bypass -File ./convert-mcp-config.ps1 \
 -InputPath ./mcp.json

Explicit input and output

1
2
3


pwsh -ExecutionPolicy Bypass -File ./convert-mcp-config.ps1 \
 -InputPath ./mcp.json \
 -OutputPath ~/.copilot/mcp-config.json

Custom home path

1
2
3


pwsh -ExecutionPolicy Bypass -File ./convert-mcp-config.ps1 \
 -InputPath ./mcp.json \
 -UserHome /home/<user>

Bash usage (`convert-mcp-config.sh`)

First run:

1

chmod +x ./convert-mcp-config.sh

Easiest mode

1

./convert-mcp-config.sh

Explicit input, default output

1

./convert-mcp-config.sh --input ./mcp.json

Explicit input and output

1

./convert-mcp-config.sh --input ./mcp.json --output ~/.copilot/mcp-config.json

Custom home path

1

./convert-mcp-config.sh --input ./mcp.json --user-home /home/<user>

Bash prerequisites

bash
python3

Verify in Copilot CLI

After conversion, open Copilot CLI and run:

/mcp reload
/mcp show

If your config is valid, your servers should load without parsing errors.

If they donâ€™t show up right away, donâ€™t panic. In most cases itâ€™s either naming rules or env vars (both covered below).

Required environment variables (for the sample config)

Set these before launching Copilot CLI:

GITHUB_PERSONAL_ACCESS_TOKEN
ADO_ORG
ADO_DOMAIN

PowerShell session example:

1
2
3


$env:GITHUB_PERSONAL_ACCESS_TOKEN = "<your_token>"
$env:ADO_ORG = "<your_ado_org>"
$env:ADO_DOMAIN = "core"

bash/zsh example:

1
2
3


export GITHUB_PERSONAL_ACCESS_TOKEN="<your_token>"
export ADO_ORG="<your_ado_org>"
export ADO_DOMAIN="core"

Manual conversion checklist

If you want to edit by hand, follow this sequence:

rename servers to mcpServers
remove inputs
replace ${input:name} with $NAME
replace ${env:VAR} with $VAR and add/update env
rename server IDs that contain unsupported characters
keep operational properties unchanged (type, command, args, url, version, gallery)

This checklist is also useful as a review checklist in PRs.

Common errors and quick fixes

`MCP server name must only contain alphanumeric characters, underscores, and hyphens`

Cause: a server key still contains / (or another invalid character).

Fix example:

microsoft/playwright-mcp -> microsoft_playwright_mcp

Server starts but fails with auth/runtime errors

Cause: missing or wrong environment variable values.

Fix:

validate variable names exactly
confirm values exist in the active shell session
run /mcp reload again

Also make sure you start Copilot CLI from the same shell/session where variables are set.

`command not found`

Cause: one of the required tools is missing.

Fix:

install dependencies used by your config (docker, npx, uvx, etc.)

Summary

Most VS Code MCP config can be reused in Copilot CLI. The key differences are server ID naming, top-level key name, and placeholder handling.

While one could assume that the MCP Configuration should be standardized across platforms, once I figured out the key syntax differences (GitHub Copilot for the win!), it ended up being much easier than I expected once I stopped doing it manually and automated the boring parts (GitHub Copilot for the win x2!).

If this helped you, feel free to share it with your team so everyone can standardize MCP config faster. And maybe give a little GitHub Star on the repo, so I know you like it ;).

Cheers!!

/Peter

Packt Book Review - Data Science in .NET with Polyglot Notebooks

Sat, 07 Dec 2024 00:00:00 +0000

In this post, I want to share my review of my next technical book I read recently, Data Science in .NET with Polyglot Notebooks this time from Matt Eland, (https://bsky.app/profile/matteland.dev) published by Packt Publishing and available on Amazon as well as other e-book subscription platforms.

If you have been following me for a while, you know I’m gradually learning more about coding and developing applications, especially using the .NET framework. More recently, I also started using Jupyter Notebooks to animate my Azure AI workshops - specifically Semantic Kernel demos - a bit more, by running .NET Interactive mode, which allows me to show snippets of .NET code running from the Notebook, instead of the (boring) Terminal window.

Seeing Matt’s post on Twitter regarding his upcoming book, immediately got my attention, given the technology he was about to cover. (Honestly, the Data Science part initially didn’t do it for me, LOL)

Book Review

“Data Science in .NET with Polyglot Notebooks” is an insightful guide aimed at experienced .NET developers (which is not me…) who are eager to delve into the realms of data science, machine learning, and AI. This book stands out for its practical approach, leveraging the familiar .NET ecosystem to introduce complex data science concepts through interactive experiments. Reason I call out experienced .NET developers here, is because the book provides a wealth of code examples and data science specific. While I understand more and more about .NET and am able to build sample (demo) apps, in a lot of chapters, the data science piece was way above my head. But that doesn’t mean anything, and definitely shouldn’t stop YOU from going through the book if you are in the Data Science space.

Matt’s journey from ‘just being a .NET developer = his words’ to a developer-data scientist is reflected in the structure and content of the book. He effectively bridges the gap between traditional software development and modern data science, making it accessible for those already proficient in .NET technologies. The book covers a wide range of topics, including data analysis, data visualization, machine learning with ML.NET, and AI orchestration using tools like OpenAI and Semantic Kernel.

One of the book’s biggest strengths is its hands-on approach. Each chapter is designed to be interactive, encouraging readers to experiment with code in VS Code or GitHub Codespaces. (With the code being available on GitHub, other IDE development environments can obviously be used as well if that’s more in your wheelhouse…) This method not only reinforces learning but also helps developers (even juniors like myself) to see the immediate application of their skills in new domains. Which for me was the Semantic Kernel topic primarily.

The book is well-organized, starting with the basics of what Jupyter Notebooks are, a good overview of .NET developing framework, followed by data science and gradually moving towards more advanced topics.

From the list below, the bold highlighted were most relevant to the knowledge I wanted to gain:

Chapter 1: Data Science, notebooks, and kernels
Chapter 2: Exploring Polyglot Notebooks
Chapter 3: Getting Data & Code into Your Notebooks
Chapter 4: Working with Tabular Data & DataFrames
Chapter 5: Visualizing Data
Chapter 6: Visualizing Variable Relationships
Chapter 7: Classification Experiments with ML.NET AutoML
Chapter 8: Regression Experiments with ML.NET AutoML
Chapter 9: Beyond AutoML: Pipelines, Trainers, & Transforms
Chapter 10: Deploying machine learning models
Chapter 11: Generative AI in Polyglot Notebooks
Chapter 12: AI Orchestration with Semantic Kernel
Chapter 13: Enriching documentation with Mermaid diagrams
Chapter 14: Extending Polyglot Notebooks
Chapter 15: Adopting and deploying Polyglot Notebooks

The most interesting - but again, harder chapters for me because of being new to the Data Scientist craft - were the chapters on working with tabular data, visualizing data, and performing classification and regression experiments with ML.NET AutoML are particularly noteworthy. Additionally, Matt doesn’t hold back from delving into the deployment of machine learning models and the integration of generative AI, providing a comprehensive overview of the current capabilities of .NET in the data science space. From which I learned most by reading through this book to be honest.

Matt’s writing is clear and engaging, making complex topics approachable. His personal anecdotes and practical tips add a relatable touch, making the book not just a technical manual but also a narrative of his own learning journey. Which is also something I always try to add to my own technical books. Sure, you want to get the tech stuff, but hey, writing tech books is done by a human being with a certain set of experience. You want the tech stuff, you get the human being view for free…

Summary

In conclusion, “Data Science in .NET with Polyglot Notebooks” is a valuable resource for .NET developers looking to expand their skill set into data science and AI. It offers a blend of theoretical knowledge and practical application, making it a must-read for anyone interested in the intersection of .NET and data science.

If you’re still looking for a Christmas stocking stuffer, an overall little Holidays present for yourself or your acquintances, let this be a great recommendation.

If you got access to the book and reading it, or have read it already, don’t hesitate reaching out and providing your feedback.

To Matt… thanks man, this is a great work of art! Thanks for inspiring me to continue expanding my skillset on .NET, AI, Semantic Kernel, by throwing Notebooks at me, and teasing my brain with Data Science…

Cheers!!

/Peter

Introduction to Semantic Kernel

Sun, 15 Sep 2024 00:00:00 +0000

Introduction to Developing Azure AI Solutions

In today’s rapidly evolving tech landscape, Artificial Intelligence (AI) has become a cornerstone for innovation. Azure AI offers a robust suite of tools and services that empower developers to build intelligent applications. From natural language processing (NLP) to computer vision, Azure AI provides the building blocks to create solutions that can understand, interpret, and respond to human inputs in a meaningful way. While Microsoft has several Copilot offerings for different use cases, ranging from an AI assistant in Azure, Copilot in M365 or web and mobile, there are still valid use cases for developing your own custom Copilot. One of the key components in this ecosystem is the Semantic Kernel, a powerful tool that enhances the capabilities of AI models by providing semantic understanding.

The Kernel is the central component of Semantic Kernel. In its easiest format, the Kernel is a Dependency Injection objects, which manages all of the services and plugins necessary to run your AI application. If you provide all of your services and plugins to the kernel, they will then be seamlessly used by the AI as needed.

What is Semantic Kernel?

Semantic Kernel is a framework designed to bridge the gap between raw data and meaningful insights. It leverages advanced machine learning algorithms to understand the context and semantics of the data, enabling more accurate and relevant responses. Unlike traditional keyword-based approaches, Semantic Kernel focuses on the meaning behind the words, making it a valuable asset for applications that require a deep understanding of language.

Difference Between Using Semantic Kernel and Other Solutions Such as PromptFlow

While both Semantic Kernel and PromptFlow are designed to enhance AI capabilities, they serve different purposes and offer unique advantages. PromptFlow is a tool that helps in designing and managing prompts for AI models, ensuring that the inputs are structured in a way that maximizes the model’s performance. On the other hand, Semantic Kernel goes a step further by interpreting the meaning behind the inputs, providing a more nuanced and context-aware response.

Key Differences:

Focus: PromptFlow is primarily concerned with the structure and format of prompts, while Semantic Kernel focuses on understanding the semantics and context.
Use Cases: PromptFlow is ideal for scenarios where the input needs to be carefully crafted to elicit the desired response from the AI model. Semantic Kernel is better suited for applications that require a deep understanding of language and context.
Complexity: Semantic Kernel involves more complex algorithms and models to interpret the data, whereas PromptFlow is more straightforward in its approach.

Sample Code Scenarios of Using Semantic Kernel, Using C# .NET Code

Scenario 1: Text Classification

 1
 2
 3
 4
 5
 6
 7
 8
 9
10


using Microsoft.SemanticKernel;
using Microsoft.SemanticKernel.Models;

var kernel = new SemanticKernel();
var model = kernel.LoadModel("text-classification-model");

var inputText = "Azure AI is transforming the tech industry.";
var classification = model.Classify(inputText);

Console.WriteLine($"Classification: {classification}");

Scenario 2: Sentiment Analysis

 1
 2
 3
 4
 5
 6
 7
 8
 9
10


using Microsoft.SemanticKernel;
using Microsoft.SemanticKernel.Models;

var kernel = new SemanticKernel();
var model = kernel.LoadModel("sentiment-analysis-model");

var inputText = "I love using Azure AI services!";
var sentiment = model.AnalyzeSentiment(inputText);

Console.WriteLine($"Sentiment: {sentiment}");

Scenario 3: Named Entity Recognition (NER)

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13


using Microsoft.SemanticKernel;
using Microsoft.SemanticKernel.Models;

var kernel = new SemanticKernel();
var model = kernel.LoadModel("ner-model");

var inputText = "Microsoft was founded by Bill Gates and Paul Allen.";
var entities = model.RecognizeEntities(inputText);

foreach (var entity in entities)
{
 Console.WriteLine($"Entity: {entity.Name}, Type: {entity.Type}");
}

Scenario 4: Question Answering

 1
 2
 3
 4
 5
 6
 7
 8
 9
10


using Microsoft.SemanticKernel;
using Microsoft.SemanticKernel.Models;

var kernel = new SemanticKernel();
var model = kernel.LoadModel("question-answering-model");

var question = "What is Azure AI?";
var answer = model.AnswerQuestion(question);

Console.WriteLine($"Answer: {answer}");

Conclusion

Semantic Kernel is a powerful tool that enhances the capabilities of AI models by providing a deeper understanding of language and context. By leveraging Semantic Kernel, developers can build more intelligent and responsive applications that go beyond simple keyword matching. Whether you’re working on text classification, sentiment analysis, named entity recognition, or question answering, Semantic Kernel offers the tools and frameworks needed to create sophisticated AI solutions. As AI continues to evolve, tools like Semantic Kernel will play a crucial role in shaping the future of intelligent applications.

I hope this article provides you with a comprehensive overview of Semantic Kernel and its applications. If you have any questions or need further details, feel free to ask! In a next blog post, we’ll go over several use cases with many more code snippets, to give you enough examples to start building/developing your own Copilots. Stay tuned!

Cheers!!

/Peter

Building your first Blazor .NET8 app - MSTS Summit

Thu, 30 May 2024 00:00:00 +0000

Introduction

I got invited to present on Blazor .NET8 as part of the [https://mstechsummit.pl/en/](MS Tech Summit Poland (MSTS Summit)), for which I’m very excited and honored. For most of my public speaking engagements, I try to focus on live demos, with only a minimum amount of slides, and this session is no different.

To help my audience in reproducing the demos in their own time, I decided to write out the steps.

This app introduces Blazor .NET8 development, and more specifically how to easily create a Single Page App using HTML, CSS and a bit of C# code. Once the app is live, I expand with data integration features, using Entity Framework and making API calls to an external API Service.

While I’ve been using Blazor .NET for about 3 years now as a hobby project, I feel like I am still learning development with .NET for the first time at age 48. Having succeeded in getting an actual app up-and-running, I wanted to continue sharing my experience, inspiring other readers (and viewers of the MSTS session) to learn coding as well. And maybe becoming a passionate Blazor developer as myself.

Prerequisites

If you want to follow along and building this sample app from scratch, you need a few tools to get started:

Visual Studio 2022 version 17.9.7 or newer, to develop the application (VSCode or other dev tools will work as well, but I’m not that familiar with those…)
- Community Edition can be downloaded for free here (Visual Studio 2022 Community Edition â€“ Download Latest Free Version (microsoft.com))
GitHub Account to store the application code in source control
- Sign Up for free here (https://github.com/join)
Azure Subscription to run Azure App Service web application
- Get a Free Azure Subscription here (https://azure.microsoft.com/en-us/free/)

Deploying your first Blazor Web Assembly app from a template

Visual Studio (and .NET) provide different Blazor templates, both as an â€œempty templateâ€, as well as one with a functional â€œsample weather appâ€, and both options are available for Server and Web Assembly.

With the release of .NET8 last November, the Product Group decided to simplify getting started with Blazor, using the Blazor Web App template. Actually allowing you to decide wether to use WebAssembly, Server or both, in the same project.

Launch Visual Studio 2022, and select Create New Project
From the list of templates, select Blazor Web App

Provide a name for the project, e.g. BlazorMSTS, and store it to your local machine’s folder of choice
Click Next to continue the project creation wizard
Select .NET 8.0 (Long Term Support) as Framework version
Select None for authentication type
Select Server for Interactive Render Mode
Select Per Page/component for Interactivity location
Click Create to complete the project creation wizard and wait for the template to get deployed in the Visual Studio development environment. The Solution Explorer looks like below:

Run the app by pressing Ctrl-F5 or select Run from the upper menu (the green arrow) and wait for the compile and build phase to complete. The web app should load successfully in a new browser window.

Wander around the different parts of the web app to get a bit familiar with the features. With the Blazor Server hosting model, components are executed on the server from within an ASP.NET Core app. UI updates, event handling, and JavaScript calls are handled over a SignalR connection using the WebSockets protocol. The state on the server associated with each connected client is called a circuit. Circuits aren’t tied to a specific network connection and can tolerate temporary network interruptions and attempts by the client to reconnect to the server when the connection is lost.
Close the browser, which brings you back into the Visual Studio development environment.
This confirms the Blazor Server app is running as expected.

In the next section, you learn how to update the Home.razor page and add your own custom HTML-layout, CSS structure and actual runtime code.

Using the sample app to understand the core of Blazor

In the Blazor running app, navigate to the Counter page by clicking the Counter option in the navigation sidebar to your left. Selecting the Click me button will perform an increment of the current count without a page refresh. Having this kind of interactivity, used to require JavaScript, but with Blazor you can use C# now.

You can find the implementation of the Counter component at Counter.razor file located inside the Components/Pages directory.

We talked about Components in our presentation as well. Every razor page, can be a component. Let’s use that in the next example:

Open the Home.razor file in Visual Studio. The Home.razor file already exists, and it could be seen as the replacement for the former index.html or default.asp in previous web applications. It’s located in the Components/Pages folder inside the BlazorApp directory that was created earlier.

Adding the Counter component - coming from the Counter page - to the app’s homepage is possible by adding a element at the end of the Home.razor file. That’s it!!

1
2
3
4
5
6
7
8
9


@page "/"

<PageTitle>Home</PageTitle>

<h1>Hello, world!</h1>

Welcome to your new app.

<Counter />

Running the app again, will now show the Counter component, nicely on the Home Page. How easy, yet cool is that? DevOps engineers would call this minimizing technical debt, as instead of reusing and duplicating code, you can now just reuse full components.

Updating the template with your custom code

Blazor allows you to combine web page layout code (Razor pages), basically HTML and CSS, together with actual application source code (C# DotNet), in the same razor files. I canâ€™t compare it with previous development environments, but it seems to be one of the great things about Blazor â€“ and I really like it, since itâ€™s somewhat simplifying the structure of your application source code itself.

Traditionally, this means creating the necessary HTML and CSS layout, followed by writing the Code-piece. Little bit what we talked about with the Counter.Razor page.

Most Web Apps rely or provide some sort of Data back-end, to allow users to pull up information, or maybe creating and editing new information into a database. in .NET, this usually gets done by Entity Framework, allowing interaction with different kinds of databases, such as SQL Server, but also Azure SQL, Azure Cosmos DB as well as non-Microsoft scenarios such as Oracle or Postgresql and others.

The cool thing is, Visual Studio provides a Scaffolding Wizard for Entity Framework, which automates a big part of the process of creating web page entry form, as well as the different CRUD (Create, Read, Update, Delete) operations - both the layout, as well as the logical coding piece behind the different action buttons, is getting created.

Let’s check out what that looks like.

Using DotNet Entity Framework Scaffolding for Razor/Blazor

The starting point for any data content interaction in a web app, starts with a data model. This is a C#-class, which contains the structure of the actual data you want to use. In this example, let’s consider working with Conference Data, such as a Conference Session Title, a Speaker, Session abstract, Technical Domain, Session duration, etc…

A basic model class could look like this:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10


public class ConferenceSession
{
public int Id { get; set; }
public string? Title { get; set; }
public string? Speaker { get; set; }
public string? Abstract { get; set; }
public string? TechnicalDomain { get; set; }
public int Duration { get; set; }
public bool IsPublished { get; set; }
}

In the Blazor Project folder Components, create a new subfolder “Data”, and create a file ConferenceSession.cs, in which you copy the above sample content.

With the Class Model in place, you can now make use of the Scaffolding wizard. From the Project, right-click, and select Add New Scaffolded Item

From the list of options, select Razor Component and Razor Components Using Entity Framework (CRUD)

From the popup window, complete the necessary settings:

Template: CRUD (this provides Create, Read, Update and Delete functionality; in a real-world application, you might select only one or more options)
Model Class: ConferenceSession, which refers to the Model Class created earlier
DbContext Class: New/Add - accept the default name, or any other name of choice
Database Provider: SQL Server

This will install the necessary Microsoft.EntityFrameworkCore Nuget Packages, creates the DBContext to interact with SQL Server, but - and this is rather cool - it will also create the necessary Razor Pages for the data model, including the CRUD action links.

Below the /ConferenceSessionPages subfolder, notice the different Create, Delete, Edit, Details and Index pages. Open the Create.razor page in the Visual Studio editor:

, and check the first couple of lines:

1
2
3
4


@page "/conferencesessions/create"
@inject BlazorApp1.Data.BlazorApp1Context DB
@using BlazorApp1.Components.Data
@inject NavigationManager NavigationManager

the @page directive, points to the URL address to use to connect to this page; the @inject refers at Dependency Injection, a capability of .NET to recognize ‘services’ such as Database interaction, Navigation Menu Manager, etc. the @using directive tells this page, to recognize the content of the Data folder within the project (where the ConferenceSession class model is created)

The next code block contains the HTML layout of the actual Conference Session items.

The last code block, in between the @code {} section, is the C# code allowing us to create new items, and interact with the SQL Server DB Context.

Open the Program.cs file; notice the builder.Services.AddDbContext lines of code, which refers at the SQL Server Database integration service. Also created as part of the Scaffolded Item wizard.
Before you can run the actual app, we need to initialize the actual database and Database context, for which we need to run some commandline actions. From the Visual Studio menu, select Tools / Nuget Package Manager Console.

run:

1

Add-Migration ConferenceSessions

next, run:

1

Update-Database

which recognizes our ConferenceSession.cs Model Class, and transforms it into SQL Query language.

Let’s run the app again, and validate our ConferenceSession CRUD Pages. If you remember from the set of Pages created for us, one of them is the Index.razor, which has a @page directive of /conferencesessions. This means, if we browse to our app default URL, and add /conferencesessions, it will provide us with the ‘home page’ of the Conference Sessions. Let’s try that.

Click the Create New link, which redirects you to the /conferencesessions/create page. Complete the fields and click ‘Create’ to save the record

With the new record saved, you get redirected back to the Index page; notice the line item is there, together with a few additional CRUD links to the side for Editing, Deleting and opening the Details of the item.

Wasn’t that cool? Think for a minute how powerful this is… from scratch to having a somewhat workable app ready in less than 20 minutes!

With the main parts of the app ‘ready’ (trust me, there is a lot more we can continue working on, which I might actually do in later continuing blog posts…), you might finish this process - which is not part of the MSTS Summit session because of time limits - and publish this to Azure Static Web Apps. the below steps should guide you through the process.

Publish Blazor Web Assembly app to Azure Static Web Apps

In this last section, I will show you how to publish this webapp to Azure Static Web Apps, a web hosting service in Azure for static web frameworks like Blazor, React, Vue and several other.

From the Azure Portal, create new resource / static web app
Provide base information for this deployment:

Resource group â€“ any name of choice
Name of the app â€“ any unique name for the app
Source = GitHub
Plan = Free
Region = any region of your choice

Scroll down and authenticate to GitHub; Next, select your source repo in Github where the code is stored (the one we just created)
Click Build Details to provide more parameters regarding the Blazor app itself. Note you need to change the default App location from /Client to /, since our source code is in the root of the Blazor Web Assembly, without using ASP.Net hosted back-end.
Once published, it will trigger a GitHub Actions pipeline to publish the actual content
The YAML pipeline code is stored in the .github/workflows/ subfolder within the GitHub repository. You shouldnâ€™t need to update this file though. It just works out-of-the-box.
Check in Actions whatâ€™s happening:
Open the details for the Build & Deploy workflow
Selecting any step in the Action workflow will show more details:
Wait for the workflow to complete successfully.
Navigate back to the Azure Static Web app, click itâ€™s URL and see the Blazor Web App is running as expected.

Summary

In this article, I provided all the necessary steps to build a Blazor .NET 8 Web Server application. Started from the default template, you updated snippets of code to inject Components, and we also used the Scaffolded Item wizard to provide CRUD operations to a data model.

I would like to thank the organizing team of MS Tech Summit Poland 2024 for having accepted my session submission for the 3rd year in a row. Especially since this was my first attempt to do some (semi)live coding, to share my excitement of how I learned to write and build code at age 48. Iâ€™m already brainstorming on what Blazor app I can share in next yearâ€™s edition…

/Peter

ScifiDevCon 2024 : Building a Marvel Hero App using Blazor and .NET8

Sat, 18 May 2024 00:00:00 +0000

Building a Marvel Hero catalog app using Blazor Server and .NET8

Introduction

At the end of 2022, as part of the Festive Tech Calendar community initiative, I provided a step-by-step instruction blog on how to build a Blazor Web Assembly app from scratch, using .NET7.

About 18 months later, a lot of things have changed in the .NET8 world, which also impacted positively new features around the Blazor Web App Framework, on both Web Assembly (Client/Browser) and Server side.

I decided to rewrite/update the steps, using the same idea for the app, but this time redeveloping it from scratch, using .NET8 and Blazor WebAssembly RenderMode. If you want to see the live coding in action, head over to https://www.scifidevcon.com, a great community initiative to celebrate the month of May, Geekiness, Developing, cloud and everything else that fits in the combination of all those topics in a virtual conference.

This app introduces Blazor .NET8 development, and more specifically how to easily create a Single Page App using HTML, CSS and API calls to an external API Service at https://developer.marvel.com

While I’ve been using Blazor .NET for about 3 years now as a hobby project, I feel like I am still learning development with .NET for the first time at age 48. Having succeeded in getting an actual app up-and-running, I wanted to continue sharing my experience, inspiring other readers (and viewers of the ScifiDevCon session) to learn coding as well. And maybe becoming a passionate Marvel Comics fan as myself.

Prerequisites

If you want to follow along and building this sample app from scratch, you need a few tools to get started:

Visual Studio 2022 version 17.9.7 or newer, to develop the application (VSCode or other dev tools will work as well, but I’m not that familiar with those…)
- Community Edition can be downloaded for free here (Visual Studio 2022 Community Edition â€“ Download Latest Free Version (microsoft.com))
GitHub Account to store the application code in source control
- Sign Up for free here (https://github.com/join)
Azure Subscription to run Azure App Service web application
- Get a Free Azure Subscription here (https://azure.microsoft.com/en-us/free/)
Marvel Developer Account to get access to the API back-end
- Register for free at https://developer.marvel.com

Deploying your first Blazor Web Assembly app from a template

Launch Visual Studio 2022, and select Create New Project
From the list of templates, select Blazor Web App

Provide a name for the project, e.g. BlazorMarvel8, and store it to your local machine’s folder of choice
Click Next to continue the project creation wizard
Select .NET 8.0 (Long Term Support) as Framework version
Select None for authentication type
Select WebAssembly for Interactive Render Mode
Select Per Page/component for Interactivity location
Click Create to complete the project creation wizard and wait for the template to get deployed in the Visual Studio development environment. The Solution Explorer looks like below:

Run the app by pressing Ctrl-F5 or select Run from the upper menu (the green arrow) and wait for the compile and build phase to complete. The web app should load successfully in a new browser window.

Wander around the different parts of the web app to get a bit familiar with the features. In the context of .NET 8, Blazor WebAssembly projects typically consist of two separate projects: an app and an app.client. The app project is the server-side part of the Blazor application, which can serve pages or views as a Razor Pages or MVC app. The app.client project contains the client-side Blazor application that runs in the browser on a WebAssembly-based .NET runtime.

The separation of the client and server projects in the Blazor WebAssembly hosting model provides a clear separation of concerns, allowing for server-side functionality, integration with ASP.NET Core features, and flexibility in hosting and deployment options. This architecture aligns well with the server-client model and the capabilities of the ASP.NET Core framework.

For instance, Blazor WebAssembly can be standalone for simple, offline apps, but having a separate server project unlocks improved security, scalability, complex server tasks, and potential offline features, making it ideal for more elaborate and demanding applications. As your application grows or requires server-side functionality, having a separate server project provides a scalable and maintainable architecture.

This design pattern, where decoupling or loosely coupled apps are encouraged, is preferred over tightly coupled applications, especially as the complexity of the project increases.

Close the browser, which brings you back into the Visual Studio development environment.
This confirms the Blazor Server app is running as expected.

In the next section, you learn how to update the Home.razor page and add your own custom HTML-layout, CSS structure and actual runtime code.

Updating the template with your custom code

Another take is creating the web page layout first, and only adding logic later on. So letâ€™s start with creating a basic web page, adding a search field and a button. All Razor Pages the app uses, are typically stored in the \Components subfolder.

You can chose to reuse the Home.razor sample page and continue from there, or create a new Razor Page and update the route path. To show you how Blazor Components are working, let’s define our SearchMarvel page, as a new page under the \Pages section in the Client project. Save it as SearchMarvel.razor
In this part, we start with adding a search field and a search button to the web page layout. Insert the following snippet of code, replacing all the current content on the page:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19


@page "/searchmarvel"

<h1 class="text-center text-primary"> Blazor Marvel Finder</h1>

<div class="text-center">

<div class="p-2">

<input class="form-control form-control-lg w-50 mx-auto mt-4" placeholder="Enter Marvel Character" />

</div>

<div class="p-2">

<button class="btn btn-primary btn-lg">Find your Favorite Marvel Hero</button>

</div>

</div>

This adds the necessary objects on the web page.
And letâ€™s run this update to see what we have for now.

So the layout for the search part of the app is done. Letâ€™s move on with the design of the actual response / result items. The return from the Marvel API can be presented in a table gridview, but thatâ€™s not that nice-looking; I remembered having physical cards as collector items as a kid, so I did some searching for a similar digital experience. Interesting enough, there is a CSS-class object â€œcardâ€, which nicely reflects this experience. So letâ€™s add the next snippet of code for this response layout.
Add the following code, below the snippet you copied earlier:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32



 <div class="container">

 <div class="row row-cols-1 row-cols-md-2 row-cols-lg-3">

 <div class="col mb-4">

 <div class="card">

 <img src="https://via.placeholder.com/300x200"

 class="card-img-top">

 <div class="card-body">

 <h5 class="card-title">Marvel Hero Name</h5>

 <p class="card-text">

 Character details

 </p>

 </div>

 </div>

 </div>

 </div>

 </div>

What this snippet does, is adding a â€œcontainerâ€ object, in which we create a small table view having 3 rows and 1 column. The card composition shows the Hero title on top, the Marvel Hero character details in the middle and an image of the character as well.

Letâ€™s run the code again to test if everything works as expected.

Now wait, we lose quite some time on stopping the app, updating code, starting it again â€“ so what we can do is use the new VS2022 feature called Hot Reload / if I set this to â€œHot Reload on Saveâ€, it will dynamically update the runtime state of the app based on my edits. Letâ€™s check it out.
While in debugging mode, check the â€œflameâ€ icon in the menu:

Enable the setting â€œHot Reload on File Saveâ€.
Edit the card-title â€œMarvel Hero Nameâ€ to â€œMarvel Character Nameâ€ and check how the app refreshes itself without needing to stop/start.

The search field is not doing anything yet, so we need to make sure â€“ that whenever we type something in that field - it kicks of an API call to the Marvel API back-end.

First, we need to use the bind-value parameter for this field, linking it to a search task; Update the line with the field box as follows:

1
2

 <input class="form-control form-control-lg w-50 mx-auto mt-4" placeholder="Enter Marvel Character" @bind-value="whotofind" />

add @bind-value=â€whotofindâ€ at the end of the line.

Ignore the errors regarding the â€œwhotofindâ€ for now. We’ll fix that in a minute.

Next, we need to update the button code to actually pick up an action when clicking on it; this is done using the @onclick event

Add **@onclick=FindMarvel**

The code snippet complains about unknown attributes, which is what we need to add in the actual code section of the app page:
Add the following @code section below the HTML/CSS layout

1
2
3
4
5
6
7
8
9


@code {
 private string whotofind;

 private async Task FindMarvel()
 {
 // Call the Marvel API
 Console.WriteLine("Marvel Character to find: " + whotofind);
 }
}

Within the curly brackets, we can use regular C# code
Start with defining a string for the â€œwhotofindâ€
Followed by defining a method (task) for the FindMarvel onclick action â€“ for now, letâ€™s write something to the console to validate our search field is working as expected

The string â€œwhotofindâ€ refers to the search field object, where the Task â€œFindMarvelâ€ refers to the button click action. So easy said, whenever we click the button, it will pick up the string content from the search field, and send it to the Marvel API back-end. As we donâ€™t have that yet, Iâ€™m just writing the data to the console, which is always a great test to validate the code is working as expected.

Save the file, which will throw a warning regarding the hot reload. Since we added new actual code snippets, hot reload canâ€™t just go and recognize it. So a reload is neededâ€¦

Select â€œRebuild and Apply Changesâ€
Enter the name of a Marvel character, for example â€œthorâ€, and notice nothing happens on the console/terminal. Why not?? Is it an error in our code, did we miss anything,…?

NO and YES :)… our code is fine, but we are missing a new .NET8 feature for Blazor apps… we need to specify the Render Mode

Note > for more details on Blazor app Render Mode, check this article I guest-authored for SitePoint a few weeks ago, explaining the different options and how to use them.

Remember when we created the Visual Studio project, we defined the WebAssembly Render Mode. Now to make this work, there are a few more changes needed in the source code:

a) Define the InteractiveWebAssembly Render Mode in the App.razor file b) (Optionally), specify the InteractiveWebAssembly Render Mode for Pages and/or Components

So depending a bit on how much control you want, or how frequently you want to use Interactive Render mode, you would specify this in your App.razor, as a Global parameter - turning the full Blazor App into that mode. Or, if not all pages and/or components require that Render Mode, you can add the specific parameter to individual components.

In this example, I’ll show you how to use it on a ‘per page’ level, knowing that either one would be OK for this sample app.

At the top of your SearchMarvel.razor page, after the @page line, add the following:

1

@rendermode InteractiveWebAssembly

which tells the page/component should use the Interactive Render Mode, which “enables” the button event in our case.

Save the changes, and run the app; enter a Marvel character name in the search field, click the Find Button and notice the search field string is shown in the console now. This is what InteractiveWebAssembly Render Mode is doing…

I think the bare minimum app layout development is ready, so itâ€™s time to set up the Marvel API-part of the solution in the next section.

Configuring the Marvel Developer API Backend Code interaction

Head over to the Marvel Developer website https://developer.marvel.com and grab the necessary API information.

Select Create Account + Accept Terms & Conditions
Grab the API keys (public & private)

Public: 579a41c9eccaf70a3a09c1xxxxxxxxxxx

Private: 6362bd53a4c307c96fb27xxxxxxxxxx
To allow requests to come into the Marvel API back-end, you need to specify the source URL domains where the requests are coming from. Add localhost here, which is the URL you use for all testing on your development workstation. Later on, once the app runs in Azure, you need to add the Azure Service URL here as wellâ€¦

Once set up, head over to â€œinteractive documentationâ€, and walk through the different API placeholders and keywords one can use, to show the capabilities. For the app later on, we will use the â€œnamestartswithâ€, as it is the most easy to use â€“ names could work, but it requires knowing the explicit name of the character, and having it correctly spelled.

Click the â€œTry it outâ€ button. The result shows the outcome + the exact URL that was used:

Blazor WebAssembly doesn’t come with the HTTPClient package installed by default, which means we need to add the Nuget package for this. (Although if you want, you could also find Nuget packages that provide similar functionality), as well as specifying the necessary Service, in both the server-side and client-side project.
From the app.client project, select Manage Nuget Packages, and search for Microsoft.Extension.Http as package name.

Once the package got installed, update the Program.cs file in the client project, by adding the following line below the “var builder = WebAssemblyHostBuilder… line:

1

builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri("https://gateway.marvel.com:443/v1/public") });

Next, open the Program.cs on the server-side project, and add the following line to the //Add Services to the container section:

1

builder.Services.AddHttpClient();

Next, using .NET dependency injection, create a reference to the HTTPCLient in your Blazor SearchMarvel.razor page

1
2
3
4
5
6
7
8



@page "/"

@inject HttpClient HttpClient

<h1 class="text-center text-primary"> Blazor Marvel Finder</h1>

<div class="text-center">

As you could see from the Marvel output, they are using JSON; this means, when calling the HttpClient, we also receive a JSON object back.

To ‘recognize’ the data from the JSON response into our Web App, we need to link it to a data model, using a Csharp class. There’s a few different ways to do this, either creating it manual, using the Visual Studio ‘Edit - Paste Special - as JSON”, which will create the necessary Class setup for you. However, in this specific scenario, I don’t need all the details from the JSON Response (although you could definitely update the app yourself to display all the information you want, related to a Marvel Character…)
To help transforming a JSON Response into an actual C-Sharp Class, I often rely on a free website, https://www.jSON2CSharp.com, which allows for pasting in a JSON payload, which then gets converted to c# class structure

In the VStudio app.client project, create a new subfolder â€œModelsâ€, and add a new Item in there, called MarvelResult.cs

We could copy the content from the JSON deserialize output into this class object, but for this sample, we donâ€™t need all the provided data by Marvel â€“ so I made some changes and ended up with the core pieces of data I want, like image, name, description

The code snippet I’m using for this example, looks like follows:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34


{

public class MarvelResult

namespace BlazorMarvel8.Models
{
 public class MarvelResult
 {
 public string AttributionText { get; set; }
 public Datawrapper Data { get; set; }

 public class Datawrapper
 {
 public List<Result> Results { get; set; }
 }

 public class Result
 {
 public int Id { get; set; }
 public string Name { get; set; }
 public string Description { get; set; }
 public Image Thumbnail { get; set; }

 public class Image
 {
 public string Path { get; set; }
 public string Extension { get; set; }
 }
 }
 }
}


}

With the class in place, letâ€™s update the SearchMarvel.razor, to make sure it recognizes the model class MarvelResult. To do this, we need to add a private MarvelResult, reflecting the data class we just created;

1

private MarvelResult _marvelResult;

As we stored the MarvelResult.cs class model in a different folder within the application source code, we also need to update our Page details, telling it to â€œuseâ€ the Models subfolder to find it. This is done using the @using statement on top of the Home.razor page:

1
2
3
4
5


@using BlazorMarvel8.Models

@page "/"

@inject HttpClient HttpClient

Where now the Class gets nicely recognized

Letâ€™s update the Task FindMarvel, with the required code snippet to recognize the dynamic URL to connect to, as well as calling the HttpClient function. As per the Marvel API docs, we also need to integrate the api Public key into our URL search string, so we have to define the string for this first.

Btw, the full Request URL to use is visible from the Interactive Documentation page where we ran the ’try it now’ search task (https://gateway.marvel.com:443/v1/public/characters?nameStartsWith=spider&apikey=579a41c9eccaf70a3a09c1722ef6c2fc)

The updated code snippet looks like this now:

1
2
3
4
5
6
7
8
9


@code

{

private MarvelResult _marvelResult;

private string whotofind;

private string MarvelapiKey = "579a41c9eccaf70a3a09c1722ef6c2fc";

After which we can update the Task FindMarvel as follows:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17


private async Task FindMarvel()

{

Console.WriteLine(whotofind);

var url = $"characters?nameStartsWith={whotofind}&apikey={MarvelapiKey}";

_marvelResult = await HttpClient.GetFromJsonAsync<MarvelResult>(url, new System.Text.Json.JsonSerializerOptions

{

PropertyNamingPolicy = System.Text.Json.JsonNamingPolicy.CamelCase

});

}

While all the code pieces are done, note that as of .NET6, it started checking for Nullable values. This is what the green squickly lines are identifying. What this means is that the value could be equal to null, which could potentially break your application, since it expects to have a real value in there.
I wouldnâ€™t recommend it to change, but for this little sample app, it would be totally OK to disable the nullable check. This can be done from the Properties of the Project

Render JSON Response data into HTML Layout

Thatâ€™s all from a code snippet perspective, where now the last piece of updates is back into the HTML Layout of the web page itself, updating the content of the card object:
Since we most probably get an array of results back, meaning more than one, we need to go through a â€œfor eachâ€ loop; also, there might be scenarios where we are not getting back any results (like the character doesnâ€™t exist, a typo in the characterâ€™s name,â€¦), so we will add a little validation check on that too, using an if = !null

Letâ€™s go ahead!

At the top of the card object (class=container), or right below the
section where we defined the search button, insert the @if statement, and move the whole div section between the curly brackets, updating the fixed fields we defined earlier, with the MarvelResult class objects:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25


@if (_marvelResult != null)


{
 <div class="container">
 <div class="row row-cols-1 row-cols-md-2 row-cols-lg-3">

 @foreach (var result in _marvelResult.Data.Results)
 {
 <div class="col mb-4">
 <div class="card">
 <img src="@($"{result.Thumbnail.Path}.{result.Thumbnail.Extension}")"
 class="card-img-top">
 <div class="card-body">
 <h5 class="card-title">@result.Name</h5>
 <p class="card-text">
 @result.Description
 </p>
 </div>
 </div>
 </div>
 }
 </div>
 </div>
}

Run the app and see the result in action

Thatâ€™s it for now. Great job!

Making the cards â€˜flipâ€™

Note: this part is left out of the ScifiDevCon presentation to keep the video within the expected time â€“ what weâ€™re doing here is integrating more CSS layout components on to a new Page in the web app, which provides a more dynamic look-and-feel to the Marvel cards we have.

While CSS can be difficult â€“ and trust me it is â€“ I literally googled for â€œflipping cards CSSâ€ and found a snippet of code on https://w3schools.com, and it worked almost straight awayâ€¦

Here we go:

Letâ€™s copy the current state of the page we have, and store it in a different page; so we grab SearchMarvel.razor and copy/paste it to FlipMarvel.razor this will allow me to also demonstrate some other Blazor features around Menu Navigation and how to use object-specific css; meaning, CSS that will only be picked up by the specific page, and not interfere with the rest of the application CSS we already have.
Open FlipMarvel.razor page; First thing we need to change, is the Page Routing, pointing to the â€œ/flipâ€ routing directory instead of the â€œ/â€, as that one is linked to the index.razor page.
Go to this link: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_flip_card
Select the code between the tags

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77


 <style>

body {

font-family: Arial, Helvetica, sans-serif;

}

.flip-card {

background-color: transparent;

width: 300px;

height: 300px;

perspective: 1000px;

}

.flip-card-inner {

position: relative;

width: 300px;

height: 300px;

text-align: center;

transition: transform 0.6s;

transform-style: preserve-3d;

box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);

}

.flip-card:hover .flip-card-inner {

transform: rotateY(180deg);

}

.flip-card-front, .flip-card-back {

position: absolute;

width: 300px;

height: 300px;

-webkit-backface-visibility: hidden;

backface-visibility: hidden;

}

.flip-card-front {

background-color: #bbb;

color: black;

}

.flip-card-back {

background-color: #2980b9;

color: white;

transform: rotateY(180deg);

}

</style>

and paste this under the @using section and the section of the code you already have (Note: ignore the @using marveltake2.models in the screenshot, itâ€™s the name of my test project)

Next, we need to update the layout of the card item itself, in the section within the â€œforeachâ€ loop, as thatâ€™s where the data is coming in, and getting displayed

@foreach(var result in _marvelResult.Data.Results)

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33


{

<div class="col mb-4">

<div class="flip-card">

<div class="flip-card-inner">

<div class="flip-card-front">

<img class="thumbnail" src="@($"{result.Thumbnail.Path}.{result.Thumbnail.Extension}")" style="width:300px;height:300px;">

</div>

<div class="flip-card-back">

<h5>@result.Name</h5>

<p>

@result.Description

</p>

</div>

</div>

</div>

</div>

}

What we do here is basically pointing to the different CSS-snippets for each style we want to get applied; we have the flip-card div class, next the flip-card-inner and flip-card-front. For the front, we want to use the image, so we keep the img class details as is, but change the width and height to 300px, to make sure it looks like a nice rectangular on screen.

Next, we add a class for the flip-card-back, where we will show the Marvel character name and description.

Thatâ€™s all we need to have for now; so letâ€™s have a look, by launching the app

Since the previous page was index.razor, itâ€™s getting loaded by design (from the index.html). so we need to update the URL to pick up the /flip page, by adding it to the end of the URL, such as https://localhost:7110?flip (note, the port number will be different on your end)

Search for a character, and see the outcome cards:

About the same as before, but letâ€™s hoover over a card:
It flips and shows the character name and description (if provided by Marvel) to the back of the card

Cool!!

Letâ€™s switch back to the code and add a menu item for the â€œflipâ€ page to our left-side navigation menu.
Open the file NavMenu.razor within the Server-Side Layout folder.
Add a new
section for this menu item, by copying one from above + make minor changes to the href reference (flip) and change the Menu item word to Flip
The icons are coming from the open iconic library, which is also referenced as part of Blazor bootstrap. Know you can change to MudBlazor, Telerik Progress or several other bootstrap frameworks to have layout-rich styles.
Open https:://useiconic.com and find a suitable icon, for example loop-circular

 1
 2
 3
 4
 5
 6
 7
 8
 9
10



<div class="nav-item px-3">

<**NavLink** class="nav-link" href="flip">

<span class="oi oi-loop-circular" aria-hidden="true"></span> Flip

</**NavLink**>

</div>

When you run the app again, the new Menu item will appear. Given the href=â€flipâ€, it will redirect to the base URL (https://localhost:7110) /flip route

Since we are changing the layout a bit here, why not modify the default purple color from the Blazor template, to the well-known Marvel dark-red?

Open MainLayout.razor
Notice the
Paste in the following style object:

1

<div style="background-image:none;background-color:darkred;" class="sidebar">

This changes the default purple color to darkred.

This completes our development part. Letâ€™s move on to the next step, and integrate our app code with GitHub Source Control (which actually should have happened at the start, before writing a single line of code â€“ but hey, itâ€™s a sample scenario right)

Integrating Visual Studio with GitHub Source Control

With that, letâ€™s close this project and save it to GitHub; so you can grab it as a reference. From the explorer, click â€œGit changesâ€ tab and select Create GitHub Repository

Click Create and Push, and provide a description as commit message (I typically call this first action the â€œinitâ€).
Wait for the git clone action to complete successfully. Connect to the GitHub repository and confirm all source code is there.

Note: the actual source code I used for the Festive Tech Calendar presentation can be found here: petender/FestiveBlazor2022live (github.com)

Whenever you would make changes in the source code in Visual Studio and save the changes, Git Source Control will keep track of these and allowing you to commit the changes into the GitHub repository. I would recommend you to commit changes frequently, basically after each â€œimportantâ€ update to the code.

Publish Blazor Web Assembly app to Azure Static Web Apps

In this last section, I will show you how to publish this webapp to Azure Static Web Apps, a web hosting service in Azure for static web frameworks like Blazor, React, Vue and several other.

From the Azure Portal, create new resource / static web app
Provide base information for this deployment:

Resource group â€“ any name of choice
Name of the app â€“ any unique name for the app
Source = GitHub
Plan = Free
Region = any region of your choice

Scroll down and authenticate to GitHub; Next, select your source repo in Github where the code is stored (the one we just created)
Click Build Details to provide more parameters regarding the Blazor app itself. Note you need to change the default App location from /Client to /, since our source code is in the root of the Blazor Web Assembly, without using ASP.Net hosted back-end.
Once published, it will trigger a GitHub Actions pipeline to publish the actual content
The YAML pipeline code is stored in the .github/workflows/ subfolder within the GitHub repository. You shouldnâ€™t need to update this file though. It just works out-of-the-box.
Check in Actions whatâ€™s happening:
Open the details for the Build & Deploy workflow
Selecting any step in the Action workflow will show more details:
Wait for the workflow to complete successfully.
Navigate back to the Azure Static Web app, click itâ€™s URL and see the Blazor Web App is running as expected.
When searching for a Marvel Character, this throws an error though, which can be validated from the Inspect option of the browser:
Remember at the start, where we configured the API calls at the Marvel Developer site, we needed to specify the source URLs from where the calls are allowed. This Azure Static Web App URL is not configured. (Hence why I didnâ€™t worry too much about including my APIKey as hard-coded string in the source code).
Click Update to save those changes. Trigger a new search, which should reveal the actual Marvel character details. Remember you can use both the default (index) page, as well as the flip page.

Summary

In this article, I provided all the necessary steps to build a Blazor .NET 8 Web Assembly application. Started from the default template, you updated snippets of code to create a search field and corresponding action button to trigger the search. You learned about using HTTPClient to interact with an external API Back-End. Once this was all working, you looked into using some additional â€œflip cardâ€ CSS layout features, and how to update the Blazor Navigation Menu.

Once the development work was done, we saved the code in a GitHub repository.

Last, you deployed an Azure Static Web App, interacting with the GitHub repository to pick up the source code and publish it using GitHub Actions workflow.

I would like to thank the organizing team of ScifiDevCon 2024 for having accepted my session submission for the 3rd year in a row. Especially since this was my first attempt to do some (semi)live coding, to share my excitement of how I learned to write and build code at age 48. Iâ€™m already brainstorming on what Blazor app I can share in next yearâ€™s edition…

/Peter

Festive Tech Calendar 2022 - Building a Marvel Hero app using Blazor Web Assembly and Azure Static Web Apps

Wed, 28 Dec 2022 00:00:00 +0000

Building a Marvel Hero catalog app using Blazor Web Assembly

Introduction

This article describes all the steps on how to develop a Marvel Hero catalog app, using Blazor Web Assembly, and is a companion guide to the Festive Tech Calendar 2022 session I presented. This app introduces Blazor .NET development, and more specifically how to easily create a Single Page App using HTML, CSS and API calls to an external API Service at https://developer.marvel.com

As I am learning development with .NET for the first time in 47 years, and succeeding in having an actual app up-and-running, I wanted to share my experience, inspiring other readers (and viewers of the session) to learn coding as well. And maybe becoming a passionate Marvel Comics fan as myself.

I hope you enjoy the steps, feel free to contribute to this project at petender/FestiveBlazor2022live (github.com) if you want to co-learn more Blazor stuff together with me.

Prerequisites

If you want to follow along and building this sample app from scratch, you need a few tools to get started:

Visual Studio 2022 to develop the application (VSCode or other dev tools will work as well)
- Community Edition can be downloaded for free here (Visual Studio 2022 Community Edition â€“ Download Latest Free Version (microsoft.com))
GitHub Account to store the application code in source control
- Sign Up for free here (https://github.com/join)
Azure Subscription to run Azure Static Web Apps web application
- Get a Free Azure Subscription here (https://azure.microsoft.com/en-us/free/)
Marvel Developer Account to get access to the API back-end
- Register for free at https://developer.marvel.com

Deploying your first Blazor Web Assembly app from a template

Visual Studio provides Blazor Web Assembly templates, both as an â€œempty templateâ€, as well as one with a functional â€œsample weather appâ€. Although I wonâ€™t use a lot from the template, I like to start with the weather app sample application, as it comes with all necessary building blocks to get started.

Launch Visual Studio 2022, and select Create New Project
From the list of templates, select Blazor Web Assembly App

Click Next to continue the project creation wizard
Select .NET 7 (Standard Term Support) as Framework version
Keep all other default settings as is

Click Create to complete the project creation wizard and wait for the template to get deployed in the Visual Studio development environment. The Solution Explorer looks like below:

Run the app by pressing Ctrl-F5 or select Run from the upper menu (the green arrow) and wait for the compile and build phase to complete. The web app should load successfully in a new browser window.

Wander around the different parts of the web app to get a bit familiar with the features. The Home button brings up the index.razor page, and can be seen as the Homepage of the app. The + Counter Page demonstrates how you can build out interaction using buttons and running a count function. The Fetch data section shows a basic outcome of an API-call to a JSON-data-structure, to publish data in a gridview.
Close the browser, which brings you back into the Visual Studio development environment.
This confirms the Blazor Web Assembly app is running as expected

In the next section, you learn how to update the index.razor page and add your own custom HTML-layout, CSS structure and actual runtime code.

Updating the template with your custom code

Blazor allows you to combine web page layout code, basically HTML and CSS, together with actual application source code, in the same razor files. I canâ€™t compare it with previous development environments, but it seems to be one of the great things about Blazor â€“ and I really like it, since itâ€™s somewhat simplifying the structure of your application source code itself.

Another take is creating the web page layout first, and only adding logic later on. So letâ€™s start with creating a basic web page, adding a search field and a button

You can chose to reuse the index.razor sample page and continue from there, or create a new Razor Page and update the route path. For simplicity and ease of this scenario, Iâ€™m reusing the existing index.razor page.
In this part, we start with adding a search field and a search button to the web page layout. Insert the following snippet of code:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19


<**PageTitle**>Index</**PageTitle**>

<h1 class="text-center text-primary"> Blazor Marvel Finder</h1>

<div class="text-center">

<div class="p-2">

<input class="form-control form-control-lg w-50 mx-auto mt-4" placeholder="Enter Marvel Character" />

</div>

<div class="p-2">

<button class="btn btn-primary btn-lg">Find your Favorite Marvel Hero</button>

</div>

</div>

This adds the necessary objects on the web page.
And letâ€™s run this update to see what we have for now.

So the layout for the search part of the app is done. Letâ€™s move on with the design of the actual response / result items. The return from the Marvel API can be presented in a table gridview, but thatâ€™s not that nice-looking; I remembered having physical cards as collector items as a kid, so I did some searching for a similar digital experience. Interesting enough, there is a CSS-class object â€œcardâ€, which nicely reflects this experience. So letâ€™s add the next snippet of code for this response layout.
Add the following code:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32



 <div class="container">

 <div class="row row-cols-1 row-cols-md-2 row-cols-lg-3">

 <div class="col mb-4">

 <div class="card">

 <img src="https://via.placeholder.com/300x200"

 class="card-img-top">

 <div class="card-body">

 <h5 class="card-title">Marvel Hero Name</h5>

 <p class="card-text">

 Character details

 </p>

 </div>

 </div>

 </div>

 </div>

 </div>

Letâ€™s run the code again to test if everything works as expected.

Now wait, we lose quite some time on stopping the app, updating code, starting it again â€“ so what we can do is use the new VS2022 feature called Hot Reload / if I set this to â€œHot Reload on Saveâ€, it will dynamically update the runtime state of the app based on my edits. Letâ€™s check it out.
While in debugging mode, check the â€œflameâ€ icon in the menu:

Enable the setting â€œHot Reload on File Saveâ€.
Edit the card-title â€œMarvel Hero Nameâ€ to â€œMarvel Character Nameâ€ and check how the app refreshes itself without needing to stop/start.

The search field is not doing anything yet, so we need to make sure â€“ that whenever we type something in that field, it kicks of an API call to the Marvel API back-end.
First, we need to use the bind-value parameter for this field, linking it to a search task; Update the line with the field box as follows:

1
2

 <input class="form-control form-control-lg w-50 mx-auto mt-4" placeholder="Enter Marvel Character" @bind-value="whotofind" />

add @bind-value=â€whotofindâ€ at the end of the line

Ignore the errors regarding the â€œwhotofindâ€ for now.

Next, we need to update the button code to actually pick up an action when clicking on it; this is done using the @onclick event

Add @onclick=FindMarvel

The code snippet complains about unknown attributes, which is what we need to add in the actual code section of the app page:

Those were the 2 placeholders for the Blazor code section, which can be defined within the same Razor page, a rather unique approach to Blazor code.
Save the updates again; notice how Hot Reload is not able to refresh the changes just like that, since it is more than just a cosmetic change in HTML.

Click Edit for now, since we will add more code to the Page.

Add the following @code section below the HTML/CSS layout

Within the curly brackets, we can use regular C# code
Start with defining a string for the â€œwhotofindâ€
Followed by defining a method (task) for the FindMarvel onclick action â€“ for now, letâ€™s write something to the console to validate our search field is working as expected

The code syntax looks like this:

1
2
3
4
5
6
7
8
9


private string whotofind;

private async Task FindMarvel()

{

Console.WriteLine(whotofind);

}

The string â€œwhotofindâ€ refers to the search field object, where the Task â€œFindMarvelâ€ refers to the button click action. So easy said, whenever we click the button, it will pick up the string content from the search field, and send it to the Marvel API back-end. As we donâ€™t have that yet, Iâ€™m just writing the data to the console, which is always a great test to validate the code is working as expected.

Save the file, which will throw a warning regarding the hot reload. Since we added new actual code snippets, hot reload canâ€™t just go and recognize it. So a reload is neededâ€¦

Select â€œRebuild and Apply Changesâ€
Enter the name of a Marvel character, for example â€œthorâ€, which will move that to the Output console. This confirms both the bind-value property as well as the search button and corresponding action behind it is working as it should be.
I think the app is ready from our perspective, so itâ€™s time to set up the Marvel API-part of the solution in the next section.

Configuring the Marvel Developer API Backend

head over to the Marvel Developer website https://developer.marvel.com and grab the necessary API information.

Select Create Account + Accept Terms & Conditions
Grab the API keys (public & private)

Public: 579a41c9eccaf70a3a09c1xxxxxxxxxxx

Private: 6362bd53a4c307c96fb27xxxxxxxxxx
To allow requests to come into the Marvel API back-end, you need to specify the source URL domains where the requests are coming from. Add localhost here, which is the URL you use for all testing on your development workstation. Later on, once the app runs in Azure, you need to add the Azure Service URL here as wellâ€¦

Once set up, head over to â€œinteractive documentationâ€, and walk through the different API placeholders and keywords one can use, to show the capabilities. For the app later on, we will use the â€œnamestartswithâ€, as it is the most easy to use â€“ names could work, but it requires knowing the explicit name of the character, and having it correctly spelled.

Click the â€œTry it outâ€ button. The result shows the outcome + the exact URL that was used:

Blazor Web Assembly already has an HTTP Client built-in, although if you want, you could also find Nuget packages that provide similar functionality â€“ but for now, letâ€™s stick with the built-in one. The details of this service are part of the program.cs file

The hostenvironment points to our local development workstation, so the only thing we need to do hear is changing this Uri to the Marvel API Gateway Uri, as follows:

https://gateway.marvel.com:443/v1/public/"

builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(“https://gateway.marvel.com:443/v1/public/") });

next, relying on Blazor dependency injection, create a reference to the HTTPCLient in your Blazor index.razor page

1
2
3
4
5
6



@page "/"

@inject HttpClient HttpClient

<**PageTitle**>Index</**PageTitle**>

As you could see from the Marvel output, they are using JSON; this means, when calling the HttpClient, we also receive a JSON object back, which is not useful for presenting the data as such. What we need to do is deserialize the result, for which we create a class

A useful website for helping with this, is jSON2CSharp.com, allowing you to paste in a JSON payload, which gets converted to c# class structure

In the VStudio project, create a new folder â€œModelsâ€, and add a new Item in there, called MarvelResult.cs

We could copy the content from the JSON deserialize output into this class object, but for this sample, we donâ€™t need all the provided data by Marvel â€“ so I made some changes and ended up with the core pieces of data I want, like image, name, description

The code snippet looks like follows:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45


{

public class MarvelResult

{

public string AttributionText { get; set; }

public Datawrapper Data { get; set; }

public class Datawrapper

{

public List<Result> Results { get; set; }

}

public class Result

{

public int Id { get; set; }

public string Name { get; set; }

public string Description { get; set; }

public Image Thumbnail { get; set; }

public class Image

{

public string Path { get; set; }

public string Extension { get; set; }

}

}

}

}

With the class in place, letâ€™s update the code to compile the dynamic URL, instead of the fixed gateway.marvel.com one. First, we need to add a private MarvelResult, reflecting the data class we just created;

1

private MarvelResult _marvelResult;

as we stored this in a different folder within the application source code, we also need to update our Page details, telling it to â€œuseâ€ the Models subfolder to find it. This is done using the @using statement on top of the index.razor

Where now the Class gets nicely recognized

Letâ€™s update the Task FIndMarvel, with the required code snippet to recognize the dynamic URL to connect to, as well as calling the HttpClient function
As per the Marvel API docs, we need to integrate the api Private key into our URL search string, so we have to define the string for this

1
2
3
4
5
6
7
8
9


@code

{

private MarvelResult _marvelResult;

private string whotofind;

private string MarvelapiKey = "579a41c9eccaf70a3a09c1722ef6c2fc";

After which we can update the Task FindMarvel as follows:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17


private async Task FindMarvel()

{

Console.WriteLine(whotofind);

var url = $"characters?nameStartsWith={whotofind}&apikey={MarvelapiKey}";

_marvelResult = await HttpClient.GetFromJsonAsync<MarvelResult>(url, new System.Text.Json.JsonSerializerOptions

{

PropertyNamingPolicy = System.Text.Json.JsonNamingPolicy.CamelCase

});

}

Where the url is coming from the gateway.marvel.com part in the HttpClient service definition + the dynamic url part where we specify the characters search option, the nameStartsWith, pointing at the bind-value object whotofind, and adding the MarvelapiKey string.
While all the code pieces are done, note that .NET6 started checking for Nullable values. This is what the green squickly lines are identifying. What this means is that the value could be equal to null, which could potentially break your application, since it expects to have a real value in there.
I wouldnâ€™t recommend it to change, but for this little sample app, it would be totally OK to disable the nullable check. This can be done from the Properties of the Project

Thatâ€™s all from a code snippet perspective, where now the last piece of updates is back into the HTML Layout of the web page itself, updating the content of the card object:
Since we most probably get an array of results back, meaning more than one, we need to go through a â€œfor eachâ€ loop; also, there might be scenarios where we are not getting back any results (like the character doesnâ€™t exist, a typo in the characterâ€™s name,â€¦), so we will add a little validation check on that too, using an if = !null

Letâ€™s go ahead!

At the top of the card object (class=container), or right below the
section where we defined the search button, insert the @if statement, and move the whole div section between the curly brackets

1
2
3
4
5


@if (_marvelResult != null)

{

<div class="container">

Next, define the @foreach loop for the actual card item, and update the image placeholder URL with the content from the MarvelResult JSON string (thumbnail path and extension:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30


@foreach (var result in _marvelResult.Data.Results)

{

<div class="col mb-4">

<div class="card">

<img src="@($"{result.Thumbnail.Path}.{result.Thumbnail.Extension}")"

class="card-img-top">

<div class="card-body">

<h5 class="card-title">@result.Name</h5>

<p class="card-text">

@result.Description

</p>

</div>

</div>

</div>


}

Run the app and see the result in action

Thatâ€™s it for now. Great job!

Making the cards â€˜flipâ€™

Note: this part is left out of the Festive Tech Calendar presentation to keep the video within the expected time â€“ what weâ€™re doing here is integrating more CSS layout components on to a new Page in the web app, which provides a more dynamic look-and-feel to the Marvel cards we have.

Here we go:

Letâ€™s copy the current state of the page we have, and store it in a different page; so we grab index.razor and copy/paste it to flip.razor this will allow me to also demonstrate some other Blazor features around Menu Navigation and how to use object-specific css; meaning, CSS that will only be picked up by the specific page, and not interfere with the rest of the application CSS we already have.
Open flip.razor page; First thing we need to change, is the Page Routing, pointing to the â€œ/flipâ€ routing directory instead of the â€œ/â€, as that one is linked to the index.razor page.
Go to this link: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_flip_card
Select the code between the tags

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77


 <style>

body {

font-family: Arial, Helvetica, sans-serif;

}

.flip-card {

background-color: transparent;

width: 300px;

height: 300px;

perspective: 1000px;

}

.flip-card-inner {

position: relative;

width: 300px;

height: 300px;

text-align: center;

transition: transform 0.6s;

transform-style: preserve-3d;

box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);

}

.flip-card:hover .flip-card-inner {

transform: rotateY(180deg);

}

.flip-card-front, .flip-card-back {

position: absolute;

width: 300px;

height: 300px;

-webkit-backface-visibility: hidden;

backface-visibility: hidden;

}

.flip-card-front {

background-color: #bbb;

color: black;

}

.flip-card-back {

background-color: #2980b9;

color: white;

transform: rotateY(180deg);

}

</style>

and paste this under the @using section and the section of the code you already have (Note: ignore the @using marveltake2.models in the screenshot, itâ€™s the name of my test project)

Next, we need to update the layout of the card item itself, in the section within the â€œforeachâ€ loop, as thatâ€™s where the data is coming in, and getting displayed

@foreach(var result in _marvelResult.Data.Results)

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33


{

<div class="col mb-4">

<div class="flip-card">

<div class="flip-card-inner">

<div class="flip-card-front">

<img class="thumbnail" src="@($"{result.Thumbnail.Path}.{result.Thumbnail.Extension}")" style="width:300px;height:300px;">

</div>

<div class="flip-card-back">

<h5>@result.Name</h5>

<p>

@result.Description

</p>

</div>

</div>

</div>

</div>

}

Next, we add a class for the flip-card-back, where we will show the Marvel character name and description.

Thatâ€™s all we need to have for now; so letâ€™s have a look, by launching the app

Since the previous page was index.razor, itâ€™s getting loaded by design (from the index.html). so we need to update the URL to pick up the /flip page, by adding it to the end of the URL, such as https://localhost:7110?flip (note, the port number will be different on your end)

Search for a character, and see the outcome cards:

About the same as before, but letâ€™s hoover over a card:
It flips and shows the character name and description (if provided by Marvel) to the back of the card

Cool!!

Letâ€™s switch back to the code and add a menu item for the â€œflipâ€ page to our left-side navigation menu.
Open the file NavMenu.razor within the Shared folder.
Add a new
section for this menu item, by copying one from above + make minor changes to the href reference (flip) and change the Menu item word to Flip
The icons are coming from the open iconic library, which is also referenced as part of Blazor bootstrap. Know you can change to MudBlazor, Telerik Progress or several other bootstrap frameworks to have layout-rich styles.
Open https:://useiconic.com and find a suitable icon, for example loop-circular

 1
 2
 3
 4
 5
 6
 7
 8
 9
10



<div class="nav-item px-3">

<**NavLink** class="nav-link" href="flip">

<span class="oi oi-loop-circular" aria-hidden="true"></span> Flip

</**NavLink**>

</div>

When you run the app again, the new Menu item will appear. Given the href=â€flipâ€, it will redirect to the base URL (https://localhost:7110) /flip route

Since we are changing the layout a bit here, why not modify the default purple color from the Blazor template, to the well-known Marvel dark-red?

Open MainLayout.razor
Notice the
Paste in the following style object:

1

<div style="background-image:none;background-color:darkred;" class="sidebar">

This changes the default purple color to darkred.

This completes our development part. Letâ€™s move on to the next step, and integrate our app code with GitHub Source Control (which actually should have happened at the start, before writing a single line of code â€“ but hey, itâ€™s a sample scenario right)

Integrating Visual Studio with GitHub Source Control

With that, letâ€™s close this project and save it to GitHub; so you can grab it as a reference. From the explorer, click â€œGit changesâ€ tab and select Create GitHub Repository

Click Create and Push, and provide a description as commit message (I typically call this first action the â€œinitâ€).
Wait for the git clone action to complete successfully. Connect to the GitHub repository and confirm all source code is there.

Note: the actual source code I used for the Festive Tech Calendar presentation can be found here: petender/FestiveBlazor2022live (github.com)

Whenever you would make changes in the source code in Visual Studio and save the changes, Git Source Control will keep track of these and allowing you to commit the changes into the GitHub repository. I would recommend you to commit changes frequently, basically after each â€œimportantâ€ update to the code.

Publish Blazor Web Assembly app to Azure Static Web Apps

In this last section, I will show you how to publish this webapp to Azure Static Web Apps, a web hosting service in Azure for static web frameworks like Blazor, React, Vue and several other.

From the Azure Portal, create new resource / static web app
Provide base information for this deployment:

Resource group â€“ any name of choice
Name of the app â€“ any unique name for the app
Source = GitHub
Plan = Free
Region = any region of your choice

Scroll down and authenticate to GitHub; Next, select your source repo in Github where the code is stored (the one we just created)
Click Build Details to provide more parameters regarding the Blazor app itself. Note you need to change the default App location from /Client to /, since our source code is in the root of the Blazor Web Assembly, without using ASP.Net hosted back-end.
Once published, it will trigger a GitHub Actions pipeline to publish the actual content
The YAML pipeline code is stored in the .github/workflows/ subfolder within the GitHub repository. You shouldnâ€™t need to update this file though. It just works out-of-the-box.
Check in Actions whatâ€™s happening:
Open the details for the Build & Deploy workflow
Selecting any step in the Action workflow will show more details:
Wait for the workflow to complete successfully.
Navigate back to the Azure Static Web app, click itâ€™s URL and see the Blazor Web App is running as expected.
When searching for a Marvel Character, this throws an error though, which can be validated from the Inspect option of the browser:
Remember at the start, where we configured the API calls at the Marvel Developer site, we needed to specify the source URLs from where the calls are allowed. This Azure Static Web App URL is not configured. (Hence why I didnâ€™t worry too much about including my APIKey as hard-coded string in the source code).
Click Update to save those changes. Trigger a new search, which should reveal the actual Marvel character details. Remember you can use both the default (index) page, as well as the flip page.

Summary

In this article, I provided all the necessary steps to build a Blazor Web Assembly application. Started from the default template, you updated snippets of code to create a search field and corresponding action button to trigger the search. You learned about using HTTPClient to interact with an external API Back-End. Once this was all working, you looked into using some additional â€œflip cardâ€ CSS layout features, and how to update the Blazor Navigation Menu.

Once the development work was done, we saved the code in a GitHub repository.

Last, you deployed an Azure Static Web App, interacting with the GitHub repository to pick up the source code and publish it using GitHub Actions workflow.

I would like to thank the organizing team of Festive Tech Calendar 2022 for having accepted my session submission for the 3rd year in a row. Especially since this was my first attempt to do some (semi)live coding, to share my excitement of how I learned to write and build code at age 47. Iâ€™m already brainstorming on what Blazor app I can share in next yearâ€™s edition

Happy Holidays everyone!

/Peter

Book review - Building Blazor WebAssembly Applications with gRPC

Sat, 17 Dec 2022 00:00:00 +0000

In this post, I want to share my review of another Blazor book I read recently, Building Blazor WebAssembly Applications with gRPC this time from Vaclav Perakek, published by Packt Publishing and available on Amazon as well as other e-book subscription platforms.

If you have been following me for a while, you know I’m gradually learning more about coding and developing applications, especially using the Blazor .NET framework.

What intrigued me even more with this book, is the gRPC integration. While I heard about before, from far away honestly, I never really looked into it. So besides learning more about Blazor itself, seeing how other much more advanced developers are using the framework, as well as learning on how they write code, I also learned more about what gRPC is all about.

What is gRPC

gRPC has been developed by Google, and described as a high performance Remote Procedure Call RPC framework. (I remember ’traditional’ RPC from my long gone Exchange Server consultant days…). using gRPC, a client application can directly call a method on a foreign server back-end, as if it were a local object to the client, making it a perfect choice for distributed applications and services-oriented architecture. As with any similar RPC-based system - such as in my Exchange Server past - the concept starts from defining a service, specifying the methods that can be called remotely, together with defining the parameters and return types. On the server side, that’s where the service interface is running, and the gRPC server component handles the requests.

gRPC is supported across all popular development languages, such as Java, Ruby, Go, Python,… and now also in Blazor .NET.

If you want to learn more about gRPC, head over to the gRPC official docs.

What is Blazor WebAssembly

Blazor is a high-performance web development framework, created by Microsoft, and part of the broader .NET language family. It allows developers write applications using the familiar C# language. The applications are supported in all modern web browsers using the WebAssembly technology. Where developers would look into JavaScript before, they can now build the same Single Page Applications (SPA) using C-sharp dotnet language. Blazor exists in both WebAssembly (browser-only) runtime, as well as Blazor Server, where it runs on an ASP.NET Server back-end.

If you want to learn more about Blazor, you might have a look at some of my former blog posts on how to get started:

Book Review

With that out of the way, let’s have a look at what the book has to offer.

I loved going through the book, as it is hands-on from the start. Kicking off the project, starting from the Blazor WASM template in Visual Studio / VSCode, and actually heavily cleaning it up, so you are almost starting from a blank canvas, you learn how to build a web application front-end, which connects to a SQL Server back-end. Without gRPC, this would probably be relying on a REST API call, so that was a nice differentiator for me to learn about.

Already in the first chapter, Vaclav is jumping into code snippets, clearly explaining how it works, but also often explaining the reasoning behind it. So instead of just copy/pasting code into your own applications, you can almost look into his brain and way of thinking, which helped me understanding the concepts much better.

Chapter 2 is where you create your first Blazor Web Assembly Application, starting from a template, but heavily customizing to a workable application example. Chapter 3 describes Entity Framework as a process to create a database back-end, and how to interact with it.

Chapter 4 brings the two worlds together, using REST API calls, allowing for CRUD operations from the web application towards the database. This was really helpful for me, as I haven’t done much around interacting with an actual database to create, update or delete information. While the sample app we’re building is around movies and viewers, the concept is valid for about any database-type you could think off (online webshop, HR application with employee data, overall customer information management, etc…)

Chapter 5 is where the gRPC integration becomes important. You learn how to build the gRPC services on the server-side, as well as how to consume them from the web app client-side. This was mind-blowing to me, as it was something totally new in my knowledge spectrum. While functionally you are doing the same as with REST, this somewhat felt easier to develop, and the performance seemed better (as in pulling up data from the database…). While my recordset was quite small, I can see a big performance increase here for real-life applications with thousands or tens of thousands of records to work with continuously.

Having arrived at this point, I think you could say you should have learned enough to continue your own journey On how to build more complete, powerful WebAssembly-based client applications, connecting to a database server back-end. The possibilities are unlimited.

However, Vaclav didn’t stop here, but continued the book with a chapter on Source Generators. As he explains, this technology allows for generating source code automatically, so basically helping developers adding more functionality into applications, without needing to write all the code yourself.

In the last Chapter 7, Vaclav shares some best practices on how to use gRPC together with C#.

Summary

While this book wasn’t the largest (about 165 pages), it allowed me to learn more new things about what it takes to build WebAssembly-based web applications, using gRPC instead of the more traditional REST API method. I’m still not an experienced developer, but it teased me to look into more capabilities of Blazor, as well as how to build more services-oriented applications.

I would recommend this book to developers who are new to Blazor like myself, but it is definitely also a good read for more experienced developers who want to learn more about gRPC-based communication between client/server.

I’m off now, providing my 5-star review on Amazon for this book.

See you later folks!!

Cheers!!

/Peter

Deploying .NET6.0 Blazor App using dotnet commandline

Mon, 08 Nov 2021 00:00:00 +0000

Hello readers,

About 2 months ago, I promised I would start writing down my adventures in the DotNet Blazor development world, which you can read about in my first and second post.

Welcome to “Coding Apps in Blazor from a non-developer standpoint - Part 3”

This next article will cover about the same as the previous one, deploying the Blazor Server app template, but instead of using Visual Studio GUI for this, I’ll use the dotnet commandline tool this time. As it comes with some cool enhancements and options. And, next to that, it’s always nice to rely on command shell to speed up certain tasks.

Prerequisites

To make sure you are ready to go and follow-along, let me list up some prereqs:

The only prereq for the actual creation part, would be the .NET RunTime:

.NET RunTime In order to run C# and .NET applications, one needs to have the necessary .NET RunTime installed on the development workstation. In a later article, I’ll describe how you can publish Blazor apps to Azure App Services or Containerized workloads, where you will notice the .NET RunTime is required as well. If you are running Visual Studio 2019, install the .NET 5.0 RunTime; if, like me, you are running Visual Studio 2022 Preview, you can directly go for .NET 6.0

(I’m running Windows 11, Visual Studio 2022 Preview 7.0, which means it could look a bit different on your machine, although most steps will be identical…)

However, what’s the point in creating an application placeholder folder, if you are not customizing and developing, right? Which means you still need a Developer Interface for the actual coding. Nice thing is, that you are not limited to Visual Studio, but could also use Visual Studio Code, JetBrains Rider, or basically any other IDE you prefer.

Visual Studio IDE Any flavor of Visual Studio 2019 or later should work (know that 2022 is getting launched Nov 8th…), and depending on your situation, you might already have access to a licensed edition of Standard, Professional or Enterprise from your employer. If not, totally fine, as there is also a free Community Edition available from the link I shared
Visual Studio Code VS Code is a “lightweight”, yet superpowerful source code editor which runs on your desktop and is available for Windows, macOS and Linux. It comes with built-in support for JavaScript, TypeScript and Node.js and has a rich ecosystem of extensions for other languages (such as C++, C#, Java, Python, PHP, Go) and runtimes (such as .NET and Unity). Common extensions I’ve been using since day 1 are Azure App Services, ARM Template tools, Docker Containers and Kubernetes. And because of the built-in support for C# and .NET overall, it’s a perfect target for developing Blazor applications.

Using .NET commandline to Create a Blazor Web Assembly App

Assuming you have all the prereqs covered, you can create your first Blazor Web Assembly App by going through the following steps:

Open your preferred commandline Shell (Command Prompt, Windows Terminal or PowerShell) and validate the dotnet version by initiating the following command:

1

dotnet --version

In my case, I’m running the .NET 6.0 RC2 Preview, which should shift to a Release version later today :)

Next, create a subfolder for your Blazor Application, by initating the “MD” (Make Directory on a Windows Machine) command, and “CD” (Change Directory) to navigate to the subfolder

1

md dotnetblazordemo

followed by

1

cd dotnetblazordemo

Next, pull up the Blazor templates by initiating the following command:

1

dotnet new --list Blazor

As you can see, there is both a template for Blazor Server and Blazor Web Assembly; As I showed you how to deploy a Blazor Server App in the Visual Studio GUI post, let’s deploy a Blazor Web Assembly alternative this time. Remember, Web Assembly is a browser capability, allowing you to run full .NET code directly in the browser, without requiring a server-backend. For more details, check back on my Blazor introductory article in which I positioned the different Blazor versions and their characteristics.

Inititate the following command:

1

dotnet new blazorwasm --hosted

Which nicely creates all necessary components for our Blazor App, containing the Client (Front-End), Server (Back-End) and Shared components.

To actually run the Blazor Web Assembly app, move into the “Server” folder (cd Server…) and kick off the “dotnet run” command:

1

dotnet run

This starts with compiling (Building…) the app, and showing a successful run, exposing the different ports the app is listening on (https and http)

Open your favorite browser, and connect to the https://localhost: address; easiest (on Windows) is Ctrl+click and selecting the URL.

You now have a fully functional Blazor App running in the browser. Congratulations. (for details on what the app is about, feel free to check my notes in my previous article)

More dotnet Blazor command line options

While I could have stopped the article here and thanking you for following along, I wanted to emphasize some other capabilities from the dotnet commandline, and covering some of the additional parameters to choose from. Note: I will only touch on the Blazor-specific options, not all the overall dotnet commandline options available.

To get an idea about all different options available, run the following command:

1

dotnet new blazorwasm --help

deploy a specific Framework version

With different .NET Framework versions available on the same developer station, it might be necessary to specify a specific version of .NET to use; this is possible by adding the -f or –framework parameter to the dotnet new blazorwasm syntax, followed by the version identifier net5.0, net6.0 or netcoreapp3.1

include ASP.NET Core host

We used this parameter in the previous steps, but I didn’t really explain what it did. If you want to build a “client” Web Assembly version, which runs with an ASP.NET Server-backend, you need to specify the -ho or –hosted parameter

Let’s run a similar command as before to create a Blazor Web Assembly app, without specifying the –hosted parameter, to see the difference:

1

dotnet new blazorwasm

Once created, check the file structure of this new application folder:

As you can see, there is no separation for the Client and Server code files, but we only have the Pages and Shared folder.

Integrate Azure AD authentication

It might be required to integrate authentication into your Blazor Web Assembly app, and why not considering Azure Active Directory for this, right? While there is a bit more required than what the commandline parameters give you, it’s a great starting point, deploying a new Blazor app which is pre-authentication ready. To do this, specify the -au or –auth parameter

1

dotnet new blazorwasm -au individual

The creation process is about the same as before; so let’s trigger another dotnet run action and connect to the app from the browser:

Nice! There is a prompt here, informing us to customize the Program.cs file, and provide the necessary Azure AD Authentication for our application identity

Let’s have a look at the Program.cs file, which also contains a little snippet and pointer where to add the necessary Azure AD Authentication settings and where to find additional info in the docs.

Running Blazor App as Progressive Web App

I won’t drill down on all the details on what a Progressive Web App is about, but in short, it allows you to turn your Web Assembly browser-based app into a “desktop”-mode application, or even using it “offline” (depending on app specifics). This is done by defining the -p or –pwa parameter.

Let’s try it out:

1
2
3


dotnet new blazorwasm -p 

dotnet run

and testing it again from the browser by connecting to https://localhost:

From the browser properties, navigate to Apps and select Install this app

and confirming the popup prompt Install once more.

Once installed, you can set some additional settings by clicking the Allow button.

From here, your app will run in a separate docked window, just like any other Windows Application. You could also add a shortcut to the desktop, taskbar or start Menu.

Summary

In this post, I introduced you to creating your First Blazor Web Assembly App, using the dotnet commandline syntax. Starting from the base Blazorwasm template creation, I also covered several interesting creation parameters that could come in handy when creating Blazor Web Assembly apps, directly from the commandline.

In a next Blazor-related post, I’ll walk you through some fundamental layout customization options, changing the look and feel of the navigation bar, the top bar and the actual web app pages themselves by introducing HTML and CSS primarily.

For now, take care of yourself and your family, see you again soon with more Blazor-news.

Cheers, Peter

Coding Apps in Blazor from a non-developer standpoint - Part 2

Sun, 07 Nov 2021 00:00:00 +0000

Hello readers,

About 2 months ago, I promised I would start writing down my adventures in the DotNet Blazor development world, which you can read in my first Blazor-related post here.

While that post was more of a “setting the scene” how I ended up in learning Blazor (and C# mainly) and what the differences are between Blazor Server and Blazor WebAssembly, it also listed up the TOP 8 objectives I want to get out of these articles.

Let’s kick it off with the first one, Deploying your first Blazor Server App

Prerequisites

To make sure you are ready to go and follow-along, let me list up some prereqs:

Visual Studio IDE Any flavor of Visual Studio 2019 or later should work (know that 2022 is getting launched Nov 8th…), and depending on your situation, you might already have access to a licensed edition of Standard, Professional or Enterprise from your employer. If not, totally fine, as there is also a free Community Edition available from the link I shared
.NET RunTime In order to run C# and .NET applications, one needs to have the necessary .NET RunTime installed on the development workstation. In a later article, I’ll describe how you can publish Blazor apps to Azure App Services or Containerized workloads, where you will notice the .NET RunTime is required as well. If you are running Visual Studio 2019, install the .NET 5.0 RunTime; if, like me, you are running Visual Studio 2022 Preview, you can directly go for .NET 6.0

(I’m running Windows 11, Visual Studio 2022 Preview 7.0, which means it could look a bit different on your machine, although most steps will be identical…)

Using Visual Studio IDE to Create a Blazor Server App

Assuming you have all the prereqs covered, you can create your first Blazor Server App by going through the following steps:

Launch Visual Studio on your machine, and select Create a new Project

In the search box, type blazor

Notice there is a different template for a Blazor Server app or a Blazor Web Assembly app; for now, select Blazor Server App + Next
In the Configure Your New Project step, set a name for your new project, for example MyFirstBlazorApp, and update the location if needed (Notice how VStudio is by default pointing to your user’s profile directory, creating a sources and repos subfolder structure)

This brings us to the Additional Information step, where you specify the Framework, which (preferably, but not required…) is the latest .NET 6.0 (Long-Term Support)

Confirm by clicking the Create button. After only a few minutes, the new Project got created and is available for “customizing”.

Before launching the app and see it in action, let’s quickly describe the core application folder/file structure:

(1). Solution - the way Visual Studio combines all code; a Solution can have a single project or multiple projects
(2). Project - A project is a combination of dev source code, which gets compiled into a workable application (the runtime)
(3). Data - SubFolder, which contains classes, presenting data; in this example, it generates weatherforecast information randomly
(4). Pages - Blazor is using razor-pages, which are resonsible for the actual layout of a web page. It typically has a @page identifier for the actual page, followed by an HTML-code section and an actual C#-code section
(5). Shared - Blazor can share code (pages) between a Server and Web Assembly (Client) project. Those pages will preferably be saved in the Shared folder, to avoid duplicating source code between both
(6). Appsettings.JSON - this file contains application settings to run, for example Logging information, Database Connection Strings, Authentication Keys,...
(7). Program.cs - The actual "core" of the application runtime; this is where you define which services should be used, amongst other coding information where relevant

Run the sample app (in Debug Mode) by pressing “F5” orby Right-click on the Project / Debug / Run Instance
- This starts running the application on a dynamic browser port in your default browser,
- as well as automatically switching Visual Studio to the Diagnostics and Error blades

The application loads in the browser and shows the layout of the app; feel free to click around the different menu options in the left Navigation Bar and become familiar with the base app functionality
- Navigation Bar is the left menu, which allows you to easily navigate across your application pages
- The middle section is loading a specific razor-page, displaying HTML layout and data (the WeatherForecast information)
- Top Menu bar, currently only having an “About” hyperlink to the .NET website

From the Navigation Bar, select Counter; this opens the “Counter” page, which has a button, responding to each Click, and changing the value of the Current count field.

Switch back to Visual Studio, and open the Counter.razor file, displaying the actual code content. Notice the first section (@page) has a pointer to /counter; this is called a route. (If you would switch back to the browser, you will see that once you select the Counter option in the Navigation Bar, the URL switches to /counter; if you navigate to Fetch Data, the route will switch to /fetchdata, which is loading the FetchData.Razor page file. If you navigate to Home, it’s loading the index.html page from the Pages-directory).

The @code section of the counter.razor page, is where the actual C#-code lives. While it only has a few lines of code here, it actually works fine.

The code section
1

private int currentCount = 0;
specifies the currentCount field to be equal to zero. This happens every time the application is loaded (yes, you can try that out…).
The next code section,
1 2 3 4

private void IncrementCount() { currentCount++; }
is getting triggered whenever the “Click Me” button is getting clicked, because of the @onclick-event specified for the button HTML-object. Followed by a basic C#-code language function “++”, which means, add a value 1 to the current value of the object currentCount.

Easy said, whenever you start the app, the counter value is 0, but gets increased with a value “1”, every time you click the “Click Me” button.

Debugging a Blazor App

Since we are in “Visual Studio Debug mode” (I’ll write much more on that in a later article…), let me briefly show you what it allows you to do. In short, it allows you to set a breakpoint, which gets prompted for during the run time of the application. To set a breakpoint, move your mouse pointer to the front of a line of code (or a code section) (the grey bar), and click. This adds a red dot, which reflects the breakpoint.

From here, switch back to the application in the browser, and click the “Click Me” button again in the Counter page. Notice how you get brought back into Visual Studio, where the breakpoint got updated with a yellow arrow, identifying where you are in the debugging (we only have 1 breakpoint for now, but very convenient if you have several of those set…). It will also show the actual value of the CurrentCount in a little popup balloon message, as well as below in the Autos section

Quit Debugging-mode by pressing Shift-F5, or by clicking the Stop button (red square button in the top menu) in Visual Studio, or by closing the browser that’s running the Blazor app.
Last, clear the Breakpoint in Visual Studio by clicking on it again.

Summary

In this post, I introduced you to creating your First Blazor Server App, using the Visual Studio template for this application type. I described the core folder/file structure of your Blazor Project, as well as explaining some of the base concepts of razor pages. You learned how to run your application, as well as using the basics of debugging, by setting a breakpoint and validating the outcome.

Btw, if you are interested in developing with Blazor, you can hire a Blazor developer from Toptal, a leading platform for connecting top-tier developers with clients.

For now, take care of yourself and your family, see you again soon with more Blazor-news.

Cheers, Peter

Coding Apps in Blazor from a non-developer standpoint

Mon, 06 Sep 2021 00:00:00 +0000

Hello readers,

The ones who know me already, know I have used traditional on-premises datacenter infrastructure for the first 15 years of my career, before I jumped onto Azure public cloud. Yes, I was an infra guy. And sometimes I still think I am, although I’m more and more shifting to containers and devops over the last 3 years.

With the 25 years of IT experience, there was always 1 skillset missing… coding, or learning a development language in better words.

After talking to several DevOps folks within Microsoft and elsewhere, it became clear I had to learn some language, if I wanted to take this DevOps thing serious (trust me, it is not required, but definitely recommended, now I look back how I talk about DevOps with some development skills acquired)

So many languages to choose from

Once I set my mind to it, the next question was, what language am I going to learn myself?

Python seemed the easiest, is quite popular, but didn’t appeal to me for still an unknown reason.
Java seemed the most professional, but also the most complex.
Go looked promising, but I never really seen it in action.
C# and DotNet was like the natural go to, as we are using a lot of DotNet examples during different Azure workshops I’m delivering every week

DotNet as my logical example

Within the DotNet (https://dotnet.microsoft.com/learn/dotnet/what-is-dotnet) family, you still have a few different options:

DotNet Core, which gives you cross-platform .NET implementation for browsers, apps on any platform OS
DotNet Framework, supporting full Windows applications, and websites
Xamarin/Mono, which is a DotNet implementation for mobile apps

How I ended up with Blazor

If I was going to develop “something”, it would probably be a console app (easy to demo) or a web application (perfect for my Azure training deliveries and I can run it in Azure and Containers -> bonus) From there, my mind was set to start developing Web Applications, and more specifically by using Blazor (https://dotnet.microsoft.com/apps/aspnet/web-apps/blazor).

Over Christmas holidays, I started building my library of learning material, which consisted of Microsoft Docs, Youtube videos and other community sessions. (I’ll cover some of these in another article later)

I also started working on building an app from scratch, which would make my life as an Azure trainer easier, as well as for my colleagues.

I managed to build a “useable” web application over the course of a few months, spending about 10 hours a week; As I approached 3000 followers on Twitter recently, I decided to come up with a series of posts on Blazor, explaining what I learned, where I struggled (and still am), to help others who are like myself, starting with no dev experience whatsoever.

What is Blazor

Blazor comes in 2 different flavors:

Blazor Server
Blazor Web Assembly

Blazor Server is closest to a traditional ASP.Net application, running on a web server, which can be Windows or Linux, as well as a containerized platform. Updates in the web app layout, the actual events (clicking buttons, routing pages,…) and JavaScript handling (yes, I’ll detail that in another article) are all transferred between client (your browser) and the server (the backend) using SignalR. Think of this as a messaging handler between client and server.

Blazor WebAssembly is a 2nd flavor, which doesn’t require a server back-end, but rather runs all DotNet code directly in the browser. This is not a DotNet something, but rather a capability of WebAssembly (WASM in short), an open standard which aims to allow running powerful applications natively in a browser. If any Server-side events are needed, you can integrate it with Blazor Server or other API-based back-ends.

Blazor as terminology is coming from a combination of “Browser” and “Razor” (https://docs.microsoft.com/en-us/aspnet/core/razor-pages/?view=aspnetcore-5.0&tabs=visual-studio), if you were wondering.

The way I see it (as non-developer :) ), is that those Razor Pages are like a simplified programming language in itself, combining HTML layout controls and actual C# coding together. By routing Razor Pages across different Razor-files (cshtml as extension), you build up your application. They are also recognized by the “@page” directive at the beginning of each file.

Below is a sample Razor Page, coming from the default Blazor Server or Blazor Web Assembly template in Visual Studio - which I will describe in a later blog post how to deploy it and what it does).

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16


@page "/counter"

<h1>Counter</h1>

<p>Current count: @currentCount</p>

<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>

@code {
 private int currentCount = 0;

 private void IncrementCount()
 {
 currentCount++;
 }
}

As you can see, the @page directive points to the “name” of this web page, being the “counter page”. Thinks of this as browsing to https://yourwebsiteURL/counter

next, there is a bit of HTML code for the actual layout of the page, and last, it contains some C# code with the actual intelligence of the counter button.

The way this page looks in the browser is like this:

What am I going to do from here?

As promised, my idea is to share as much of what I learned from Blazor in the last few months, and taking you through a process to start learning to build your own Blazor applications. The following will be covered over a series of articles in the next coming weeks:

Deploying your first Blazor Server App
Customizing the basic layout
Updating Navigation Menu items
Creating API Controllers to read data
Integrating Entity Framework to read data from SQL DB
Building forms for CRUD (create, read, update, delete) operations
Integrating with external API Services to read data
Publishing Blazor Server to Azure App Services

I hope you will learn from this, and enjoy the journey as much as I did, and still do. While I am far from calling myself a developer, it feels rather rewarding to see how code can be turned into a useful application!

Btw, if you are interested in developing with Blazor, you can hire a Blazor developer from Toptal, a leading platform for connecting top-tier developers with clients.

Talk to you soon,

Cheers, Peter

Dotnet tool install dotnet-ef failing with unauthorized

Sun, 27 Dec 2020 00:00:00 +0000

Hi all,

I hope you all have great holidays this time around, giving you the opportunity to spend time with your family as well as having the opportunity to learn some new skills, which in my case means learning Blazor, a Framework within the DotNet family, allowing for “any-client” applications (browser, mobile device).

My learning journey involves building a front-end Web App, connecting to a SQL (Azure) database back-end. To make this work, I want to use the SQL Server Entity Framework.

What happened?

Besides installing the necessary Nuget Packages within my application, I also need to install the dotnet-ef Entity Framework Tools, initiating the following command:

1

dotnet tool install --global dotnet-ef

which was throwing an error

What to check?

Based on the error message and description, there were a few things to validate:

Using Preview release features; not valid in my case since I’m not using preview release.
Unauthorized access to the Nuget Feed; not valid in my case, since I am not using any Package Feed integration; all Nuget packages can be downloaded directly from Nuget.org
Mistyped the name of the tool; well, no, it was correct

I know I was using DotNet 5.0.1 for my Blazor project, and I know I have the correct SDK and Framework installed on my machine. Let’s validate by running

1

dotnet --version

I also installed the different EntityFramework Packages I need (FrameworkCore, Design, SQLServer,…), and those are also version 5.0.1

How to fix this error?

This explicit versioning led me to the solution; what if I specify that version for the tool, as somehow recommended as a first thing to check (although that was referring to preview, but hey, let’s give it a try…)

1

dotnet tool install --global dotnet-ef --version 5.0.1

following by running

1

dotnet ef

which loaded fine this time! Problem solved!

I guess the root cause of the issue is related to my “mixed” setup, where I still have the dotnetcore 3.1 on my machine as well, probably confusing the dotnet environment. By explicitly referring to the version you want to use, you can avoid seeing weird error messages.

thanks, Peter

publish your first dotnet5 app to Azure App Services

Tue, 10 Nov 2020 00:00:00 +0000

Today, Nov 10th, was the official date of the long-announced “dotnet5 Framework”, and it is described as a major release. Still being new in the developer world myself, I know the basics of ASP.NET 3.7 and 4.5, so I can imagine jumping to a 5.0 release is indeed a big thing.

.NET 5.0 improvements

The biggest improvements announced by the Product Team are:

Migration-friendly for older .NET versions
Production-ready from day 1 of release (thorough-tested for http://www.dot.net and http://www.bing.com websites)
Enhanced performance
ClickOnce client app publishing
Smaller container image footprint
Supportability for Windows Arm64 and WebAssembly (Blazor)

Support will go into Feb 2022, which seems the release date for DotNet 6.0 LTS

Another big deal is the Unification of the DotNet platform; what this means is that the .NET standard and characteristics will be available across different scenarios (mobile apps, web apps, webassembly, desktop apps, IOT,…) relying on the same set of APIs, tools and languages. While not all has been integrated and unified yet, it’s still on the roadmap to become fully unified by version 6.0 in about 18 months from now.

More details about the dotnet 5.0 release can be read in the “announcement blog:”

Developer Environment dependencies

Visual Studio 2019

In order to use the .NET 5.0 Framework, an update of Visual Studio 2019 is required. More specifically, it needs to be version 16.8.0; if all is set as default in your IDE, you should get this prompt to upgrade automatically; if this has been disabled, you could launch the upgrade yourself by starting the Visual Studio Installer from within the Visual Studio menu option Tools / Get Tools and Features…

Visual Studio for MAC

Updating to the “latest version” of Visual Studio for MAC should bring in support for .NET 5.0;

Visual Studio Code

Integration of .NET 5.0 into VIsual Studio Code is managed out of the “C# Extension”, so if you update this one to the latest version, you are good to go too.

Creating your first .NET 5.0 Project in Visual Studio

Now the prerequirements have been covered, let’s give it a try and build a new ASP.NET Web Application:

From the Visual Studio 2019 menu, select File / New / Project…
From the list of templates, select “ASP.NET Core Web Application”

Press Create; in the next step, from the top, select .NET Core and ASP.NET Core 5.0

Choose ASP.NET Core Web App as template + confirm by pressing the Create button. Wait for the project to load.
From Solution Explorer, select the Project you just created (the bold title), and open its Properties; this will also confirm the .NET 5.0 Framework

Publishing your Web App to Azure App Services

Developing an app is one thing, but what’s giving more joy than seeing it running in Azure? Here we go:

(Assumptions: you have an active Azure subscription, and the necessary RBAC permissions to create and deploy App Services…)

From Solution Explorer / select your Project (the bold title), right click to open the context menu, and select publish

From the Publish wizard Target step, select Azure; click Next

From the wizard’s Specific Target step, select Azure App Service (Linux); click Next

From the wizard’s App Service step, Click the + sign to **create a new Azure App Service

- provide a **unique** name for the webapp, using lowercase characters
- specify a new for a **new Resource Group**
- specify a new **App Service Plan** for example S1 - 1.75Gb Memory

Validate all the settings, and confirm by pressing Finish

From the summary page, press Publish; This starts the publishing process.

Wait for it to complete successfully. The process can be viewed from the Output window

After waiting another few seconds, your default browser opens the Web App URL, and shows the web app running
Let’s validate the App Service Configuration settings from within the Azure Portal:

Log on to https://portal.azure.com using your Azure Admin Credentials
Browse to App Services
Notice the App Service you just created
Browse to this App Service’s Configuration (under Settings)

Notice the correct .NET 5.0 version

Summary

In this article, you got introduced to the new .NET 5.0 Framework. I walked you through the Project setup in VIsual Studio 2019 for an ASP.NET Core 5.0 based web application, followed by publishing this to a new Azure App Service resource.

As always, I hope you learned from this article; ping me whenever you got any (Azure) questions.

Take care, Peter

.NET Development on Azure Readiness starts here...

Keeping MCP Server config in sync between VS Code and GitHub Copilot CLI

Why this matters

MCP in plain English

File locations you should know

VS Code vs Copilot CLI: the important differences

Fast path (recommended): automate conversion

What the script converts automatically

PowerShell usage (convert-mcp-config.ps1)

Easiest mode

Explicit input, default output

Explicit input and output

Custom home path

Bash usage (convert-mcp-config.sh)

Easiest mode

Explicit input, default output

Explicit input and output

Custom home path

Bash prerequisites

Verify in Copilot CLI

Required environment variables (for the sample config)

Manual conversion checklist

Common errors and quick fixes

MCP server name must only contain alphanumeric characters, underscores, and hyphens

Server starts but fails with auth/runtime errors

command not found

Summary

Packt Book Review - Data Science in .NET with Polyglot Notebooks

Book Review

Summary

Introduction to Semantic Kernel

Introduction to Developing Azure AI Solutions

What is Semantic Kernel?

Difference Between Using Semantic Kernel and Other Solutions Such as PromptFlow

Key Differences:

Sample Code Scenarios of Using Semantic Kernel, Using C# .NET Code

Scenario 1: Text Classification

Scenario 2: Sentiment Analysis

Scenario 3: Named Entity Recognition (NER)

Scenario 4: Question Answering

Conclusion

Building your first Blazor .NET8 app - MSTS Summit

Introduction

Prerequisites

Deploying your first Blazor Web Assembly app from a template

Using the sample app to understand the core of Blazor

Updating the template with your custom code

Using DotNet Entity Framework Scaffolding for Razor/Blazor

Publish Blazor Web Assembly app to Azure Static Web Apps

Summary

ScifiDevCon 2024 : Building a Marvel Hero App using Blazor and .NET8

Introduction

Prerequisites

Deploying your first Blazor Web Assembly app from a template

Updating the template with your custom code

Configuring the Marvel Developer API Backend Code interaction

Render JSON Response data into HTML Layout

Making the cards â€˜flipâ€™

Integrating Visual Studio with GitHub Source Control

Publish Blazor Web Assembly app to Azure Static Web Apps

Summary

Festive Tech Calendar 2022 - Building a Marvel Hero app using Blazor Web Assembly and Azure Static Web Apps

Introduction

Prerequisites

Deploying your first Blazor Web Assembly app from a template

Updating the template with your custom code

Configuring the Marvel Developer API Backend

Making the cards â€˜flipâ€™

Integrating Visual Studio with GitHub Source Control

Publish Blazor Web Assembly app to Azure Static Web Apps

Summary

Book review - Building Blazor WebAssembly Applications with gRPC

What is gRPC

What is Blazor WebAssembly

Book Review

Summary

Deploying .NET6.0 Blazor App using dotnet commandline

Prerequisites

Using .NET commandline to Create a Blazor Web Assembly App

More dotnet Blazor command line options

PowerShell usage (`convert-mcp-config.ps1`)

Bash usage (`convert-mcp-config.sh`)

`MCP server name must only contain alphanumeric characters, underscores, and hyphens`

`command not found`