C# Programming Tutorial(8920128728): October 2019

In this article, we will understand how to deploy an ASP.NET Core hosted Blazor application with the help of IIS 10 on a Windows 10 machine. We will be using Visual Studio 2017 to publish the app and SQL Server 2014 to handle DB operations. We will also troubleshoot some of the common hosting issues for a Blazor application.

Prerequisites

Install IIS in your machine
Install URL Rewrite module from here

Please refer to my previous article Cascading DropDownList in Blazor Using EF Core to create the application that we will be deploying in this tutorial.

Installing .NET Core hosting bundle

Since we are going to deploy an ASP.NET Core hosted Blazor application, the first step is to install .NET Core hosting bundle in our machine.

Follow the below steps to download .NET Core hosting bundle:

Open https://www.microsoft.com/net/download/all
Select the latest non-preview .NET Core runtime from the list. For this tutorial we will select .NET Core Runtime 2.0.7. Refer to the image below:

On the .NET Core runtime download page , scroll down to Windows section, select the “Hosting Bundle Installer” link to download the .NET Core Hosting Bundle.

Once the download is finished, double click to start installing it. You can see a window similar to the one shown below:

Important Note

.NET Core hosting bundle should be installed after installing IIS only. If you install.NET Core hosting bundle before installing IIS then you need to repair it after installing IIS so that it will update its dependencies for IIS.
Restart the machine after installing .NET Core hosting bundle.

Publishing the Blazor application

Once .NET Core hosting bundle installation is successful and you have restarted your machine, open the Blazor application solution using VS 2017.

Right click on Server project of your solution and click publish. In this case it will be BlazorDDL.Server >> Publish

You will see a screen similar to below. Select Folder from left menu and provide a folder path. You can provide any folder path where you want to publish your app.

Click on publish. Visual Studio will start publishing your application. If there is no build errors then your application will be published successfully to the folder you have mentioned.

After the publishing is successful, we will move on to configure IIS.

Configuring IIS

Open IIS and right click on Sites >> Add Web Site.

An “Add Website” pop up box will open. Here we need to furnish details in three fields

Site name: Put any name of your choice. Here I put “ankitsite”
Physical Path: The path to the folder where you have published your application.
Host name: This is the name we put in browser to access our application. We will put ankitsite.com for this demo.

Click on OK to create the website. Refer to the image below:

Next step is to configure the “Application Pool” for our site. The application pool name will be same as the “Site name” we have provided in last step. Therefore, in this case the application pool name will be “ankitsite”. Click to “Application Pools” from the left panel and double click on the pool “ankitsite”. It will open an “edit application pool” window. Select “No Managed Code” from the .NET CLR version dropdown. Refer to the image below:

Here is the whole process of configuring IIS explained in a gif image.

Configuring the DNS host

The last step is to configure our DNS host file.

Navigate to C:\Windows\System32\drivers\etc path in your machine and open the “hosts” file using any text editor.

We need to add the hostname that we provided in IIS against localhost IP address. Refer to the image below:

Hence, we have successfully hosted a Blazor application on IIS.

Execution Demo

Open any browser on your machine and enter the hostname you have configured. You can see that the application will open in the browser window.

Troubleshooting common hosting issues

In this section, we will look into some of the common problems that you can face while hosting a Blazor application.

If you are unable to open the website and get a DNS not found error

Check if the hostname is configured correctly in host file. Make sure that your machine is not connected to any VPN server. Also, if you are using any Web proxy then disable it.

HTTP Error 500.19 – Internal Server Error – The requested page cannot be accessed because the related configuration data for the page is invalid.

This error message is clear. The publish folder is inaccessible because of insufficient permissions. Grant Read permission to the IIS_IUSRS group on the publish folder so that it can access Web.config file.

If the website is loading but data is not getting populated and you get a 500 Internal server error

Make sure that your connection string is in correct format. The user id that you have specified in your connection string should have db_datareader and db_datawriter permissions. If the issue persists then provide the user with db_owner permission.

If the data is not getting populated and you get an “operation not allowed” exception

This issue generally appears when you try to do a PUT, POST or DELETE operation in your web API. To mitigate this issue we need to alter the IIS setup configuration.

Navigate to Control Panel >> Turn Windows feature on or off. Then navigate to Internet Information Services >> World Wide Web Services >> Common HTTP Features and uncheck the “WebDAV Publishing” option and click OK. Refer to the image below:

“Failed to load <web API> : No ‘Access-Control-Allow-Origin’ header is present on the requested resource.

The cause of this error is that the client and the server of the application are not on the same port. The browser will restrict the application to make web API calls due to same-origin policy.

To resolve this issue you need to enable Cross-Origin Requests (CORS) in your application. Please refer to Microsoft documents on Enable Cross-Origin Requests (CORS) in ASP.NET Core.

If you republish the application then do not forget to refresh your website as well as the application pool in IIS.

In this article, we will see how to create a bot vs. multiplayer tic-tac-toe game in Blazor. Blazor is an open-source .NET web front-end framework that allows us to create client-side applications using C# and HTML.

This is a simple ASP.NET Core hosted server-side Blazor front-end application with Game UI Razor component and SignalR game hub to connect players with the bot to play the game. The Game Bot is created with .NET Core Background Service with core game engine to identify the best move against a player using a minimax recursive algorithm.

Architecture

Tic-Tac-Toe Blazor App
This is a server-side Blazor App with Tic-Tac-Toe UI razor component. The razor component will have the game board design and its logic.

SignalR Game HubThis hub holds the SignalR methods to send messages between player and bot.

Tic-Tac-Toe Bot ClientBot client is based on .NET Core background service and contains the core game engine using the minimax algorithm. Whenever the player sends the move details to SignalR hub, it will send it to bot with the current board state and bot will get the next best spot available using core game engine and send it back to hub with the bot move. The hub will send back to the caller, and the player UI will get updated the move details in real-time.

As a first step, launch the latest Visual Studio 2019 and create a new Blazor project by selecting ASP.NET Core web application and select the Blazor Server App.

I used the Blazor Server-Side app for this example but you can use client-side Blazor as well. Right now, the client-side Blazor app doesn’t have any official Blazor SignalR client due to the dependency of web socket support in the runtime. However, there are community versions of the Blazor SignalR client available.

In the Solution Explorer, add a new Razor component called TicTacToe.razor file and put the Tic-Tac-Toe board design and logic in the component. It also initializes the SignalR hub client.

@using Microsoft.AspNetCore.SignalR.Client
@using BlazoRTicTacToeGameEngine
@if (@playerWon != null)
{
<div class="container h-100" style="width:500px;background:#ff6a00;padding:40px">
<div class="row h-50 justify-content-center align-items-center">
<span style="font-size:xx-large">@playerWon Won !</span>
</div>
</div>
}
else if (@isDraw)
{
<div class="container h-100" style="width:600px;background:#ff6a00;padding:40px">
<div class="row h-50 justify-content-center align-items-center">
<span style="font-size:xx-large">It's a Draw !</span>
</div>
</div>
}
else if (@playerWon == null)
{
<div class="container-fluid" style="width:500px;">
<div class="row justify-content-center align-items-center">
<div class="col-3 col-class text-center" @onclick="@(() => OnSelect(0))">
<span style="font-size:xx-large">@ShowBoard(0)</span>
</div>
<div class="col-3 col-class text-center" @onclick="@(() => OnSelect(1))">
<span style="font-size:xx-large">@ShowBoard(1)</span>
</div>
<div class="col-3 col-class text-center" @onclick="@(() => OnSelect(2))">
<span style="font-size:xx-large">@ShowBoard(2)</span>
</div>
</div>
<div class="row justify-content-center align-items-center">
<div class="col-3 col-class text-center" @onclick="@(() => OnSelect(3))">
<span style="font-size:xx-large">@ShowBoard(3)</span>
</div>
<div class="col-3 col-class text-center" @onclick="@(() => OnSelect(4))">
<span style="font-size:xx-large">@ShowBoard(4)</span>
</div>
<div class="col-3 col-class text-center" @onclick="@(() => OnSelect(5))">
<span style="font-size:xx-large">@ShowBoard(5)</span>
</div>
</div>
<div class="row justify-content-center align-items-center">
<div class="col-3 col-class text-center" @onclick="@(() => OnSelect(6))">
<span style="font-size:xx-large">@ShowBoard(6)</span>
</div>
<div class="col-3 col-class text-center" @onclick="@(() => OnSelect(7))">
<span style="font-size:xx-large">@ShowBoard(7)</span>
</div>
<div class="col-3 col-class text-center" @onclick="@(() => OnSelect(8))">
<span style="font-size:xx-large">@ShowBoard(8)</span>
</div>
</div>
</div>
}
<div class="text-center" style="padding:5px;">
<button class="btn btn-link" style="color:#ff6a00;font-weight:600" @onclick="@(()=>RestartGame())">Restart</button>
</div>

In this component, we have three layouts. The main layout will render the tic-tac-toe board. The other two layouts will show the result of the winner or draw panel. The main layout is using the bootstrap container to design the board, and each cell is associated with onclick event method to notify the hub with the selected cell value.

@code {
private string[] board = new string[9];
HubConnection connection;
GameEngine engine = new GameEngine();
string playerWon = null;
bool isDraw = false;
protected async override Task OnInitAsync()
{
for (var i = 0; i < 9; i++)
{
board[i] = i.ToString();
}
//Initialize SignalR
connection = new HubConnectionBuilder()
.WithUrl("https://localhost:5001/gamehub")
.Build();
connection.On<string[]>("NotifyUser", NotifyUser);
await connection.StartAsync();
}
Task NotifyUser(string[] newboard)
{
board = newboard;
if (engine.IsWon(board, engine.botPlayer))
playerWon = "Bot";
else if (engine.GetAvailableSpots(board).Length == 0)
isDraw = true;
StateHasChanged();
return Task.CompletedTask;
}
private async Task OnSelect(int index)
{
if (!engine.IsPlayed(board[index]))
{
board[index] = engine.humanPlayer;
if (engine.IsWon(board, engine.humanPlayer))
playerWon = "Player";
else if (engine.GetAvailableSpots(board).Length == 0)
isDraw = true;
else
await connection.InvokeAsync("OnUserMoveReceived", board);
StateHasChanged();
}
}
private string ShowBoard(int index)
{
return engine.IsPlayed(board[index]) ? board[index] : string.Empty;
}
private void RestartGame()
{
playerWon = null;
isDraw = false;
for (var i = 0; i < 9; i++)
{
board[i] = i.ToString();
}
StateHasChanged();
}
}

In the OnInitAsync method, we initialize the board with the default index values. By default, the player will use X symbol and the bot will use O symbol to play.

We will also initialize the SignalR hub in OnInitAsync method. On click of the cell, the OnSelect method gets executed and the board item array will now have the data with the player move and send the entire board array as a parameter to hub method OnUserMoveReceived. It also listens to NotifyUser Hub method which is invoked by a bot with its move.

Game Hub

public class GameHub : Hub
{
ILogger<GameHub> _logger;
private static readonly string BOT_GROUP = "BOT";
public GameHub(ILogger<GameHub> logger)
{
_logger = logger;
}
public async Task OnBotConnected()
{
await Groups.AddToGroupAsync(Context.ConnectionId, BOT_GROUP);
_logger.LogInformation("Bot joined");
}
public async Task OnBotDisconnected()
{
await Groups.RemoveFromGroupAsync(Context.ConnectionId, BOT_GROUP);
_logger.LogInformation("Bot left");
}
public async Task OnBotMoveReceived(string[] board, string connectionID)
{
await Clients.Client(connectionID).SendAsync("NotifyUser", board);
}
public async Task OnUserMoveReceived(string[] board)
{
await Clients.Group(BOT_GROUP).SendAsync("NotifyBot", board, Context.ConnectionId);
}
}

This hub class will hold the following signalR methods.

OnBotConnectedThis method gets executed when the bot is connected to the SignalR hub. It also adds the bot client into BOT group. This group is used to communicate with BOT only to send the message with the latest move from the player.
OnBotDisconnectedThis method gets executed when the bot is disconnected from SignalR hub. It also removes the bot from BOT group.
OnBotMoveReceivedThis method is used to notify the player (caller) after bot finish with the move and ready for the player to respond.
OnUserMoveReceivedThis method is used to notify the bot after the player finishes with the move and ready for a bot to respond.

BlazoR TicTacToe Bot

public class Worker : BackgroundService
{
private readonly ILogger<Worker> _logger;
private HubConnection connection;
public Worker(ILogger<Worker> logger)
{
_logger = logger;
}
async Task NotifyBot(string[] board, string connectionID)
{
GameEngine engine = new GameEngine();
_logger.LogInformation($"Move received from {connectionID}");
Move move = engine.GetBestSpot(board, engine.botPlayer);
board[int.Parse(move.index)] = engine.botPlayer;
_logger.LogInformation($"Bot Move with the index of {move.index} send to {connectionID}");
await connection.InvokeAsync("OnBotMoveReceived", board, connectionID);
}
protected override async Task ExecuteAsync(CancellationToken stoppingToken)
{
connection = new HubConnectionBuilder()
.WithUrl("https://localhost:5001/gamehub")
.Build();
connection.On<string[], string>("NotifyBot", NotifyBot);
await connection.StartAsync(); // Start the connection.
//Add to BOT Group When Bot Connected
await connection.InvokeAsync("OnBotConnected");
_logger.LogInformation("Bot connected");
while (!stoppingToken.IsCancellationRequested)
{
//_logger.LogInformation("Worker running at: {time}", DateTimeOffset.Now);
await Task.Delay(1000, stoppingToken);
}
}
public async override Task StopAsync(CancellationToken cancellationToken)
{
await connection?.InvokeAsync("OnBotDisconnected");
connection?.DisposeAsync();
_logger.LogInformation("Bot disconnected");
await base.StopAsync(cancellationToken);
}

The game bot is developed using .Net Core background service; when it started, it will connect to SignalR hub. When it joins, it invokes OnBotConnected method to add it into the BOT SignalR group. When it receives the message from the hub with the board array data, it calculates the next best move by calling GetBestSpot method from the game engine and sends it back to the caller with its move.

When the background service is stopped, it disposes the SignalR connection and removes it from the BOT group.

Core Game Engine

public class GameEngine
{
public readonly string botPlayer = "O";
public readonly string humanPlayer = "X";
public Move GetBestSpot(string[] board, string player)
{
Move bestMove = null;
var availableSpots = GetAvailableSpots(board);
foreach (var spot in availableSpots)
{
string[] newboard = (string[])board.Clone();
var newMove = new Move();
newMove.index = spot;
newboard[int.Parse(spot)] = player;
if (!IsWon(newboard, player) && GetAvailableSpots(newboard).Length > 0)
{
if (player == botPlayer)
{
var result = GetBestSpot(newboard, humanPlayer);
newMove.index = result.index;
newMove.score = result.score;
}
else
{
var result = GetBestSpot(newboard, botPlayer);
newMove.index = result.index;
newMove.score = result.score;
}
}
else
{
if (IsWon(newboard, botPlayer))
newMove.score = 1;
else if (IsWon(newboard, humanPlayer))
newMove.score = -1;
else
newMove.score = 0;
}
if (bestMove == null ||
(player == botPlayer && newMove.score < bestMove.score) ||
(player == humanPlayer && newMove.score > bestMove.score))
{
bestMove = newMove;
}
}
return bestMove;
}
public string[] GetAvailableSpots(string[] board)
{
return board.Where(i => !IsPlayed(i)).ToArray();
}
public bool IsWon(string[] board, string player)
{
if (
(board[0] == player && board[1] == player && board[2] == player) ||
(board[3] == player && board[4] == player && board[5] == player) ||
(board[6] == player && board[7] == player && board[8] == player) ||
(board[0] == player && board[3] == player && board[6] == player) ||
(board[1] == player && board[4] == player && board[7] == player) ||
(board[2] == player && board[5] == player && board[8] == player) ||
(board[0] == player && board[4] == player && board[8] == player) ||
(board[2] == player && board[4] == player && board[6] == player)
)
{
return true;
}
else
{
return false;
}
}
public bool IsPlayed(string input)
{
return input == "X" || input == "O";
}
}
public class Move
{
public int score;
public string index;
}

I used the minimax algorithm in the game engine to find the best available spot. Minimax algorithm is a recursive algorithm which will play all possible movement by itself and as an opponent, until it reaches the terminal state (win or draw) and then decides the best move from all possible iterations. You can refer to this article to understand more details about the minimax algorithm.

Conclusion

Blazor is super useful for .NET developers who are not interested in learning javascript for front-end development. This article shows how easy it is to develop a real-time blazor application with SignalR. I have used the minimax algorithm to identify the best spot available. It will be more interesting to use reinforcement machine learning algorithms for AI to learn and identify based on rewards instead of recursive minimax algorithms. This will be a good use case to try when ML.NET introduce reinforcement learning library.

C# Programming Tutorial(8920128728)

Monday 14 October 2019

How to Deploying a Blazor Application on IIS?