Blazor WASM Publishing to IIS

Blazor WASM Publishing to IIS

blazor

20 Articles

Improve

In this article, let's learn about Publishing Blazor apps to IIS in windows machine.

Table of Contents

  1. Introduction
  2. Publishing to IIS
  3. Summary

Introduction

With ASP.NET Blazor WebAssembly (WASM) you can create .NET web applications that run completely inside of the browser sandbox. The publish output of a Blazor WASM project are all static files. Now that you can run .NET web applications without server-side code, you can deploy these applications to IIS. With the Blazor WebAssembly hosting model:

  • The Blazor app, its dependencies, and the .NET runtime are downloaded to the browser in parallel.
  • The app is executed directly on the browser UI thread.

Publishing to IIS

Prerequisites

  1. Install IIS in your machine.

    Installing IIS
  2. Install URL Rewrite module from here.

    Installing URL Rewrite
  3. Install Hosting Bundle for Latest .NET Version from here. .NET 6.0 is the latest version at the time of writing.

    Installing .NET Windows Hosting Bundle
  4. Restart the machine after installing all the above prerequisites.

Publishing

  1. Open the project in Visual Studio.

    open project in visual studio
  2. Right click the project and click on publish.

    right click and publish
  3. Click on New Publish Profile.

    click on new publish profile
  4. Select Folder target and click on Next.

    select folder target
  5. Leave the path to default location or change it to new path.

    set publish path
  6. CLick on publish.

    click publish

If there are no build errors, then your application will be published successfully in the folder you have mentioned. After the publishing is successful, we will move on to configure IIS.

Note: In the publish directory, you will find a web.config file and a wwwroot folder. The config file helps you host your application in IIS, but you don't need that file for static site hosts.

Configuring IIS

  1. Open IIS and right-click on Sites >> Add Web Site.
  2. An “Add Website” pop up box will open. Here we need to furnish details in six fields.
  3. Site name: Put any name of your choice. Here I put "ilovedotnet".
  4. Physical Path: The path to the folder where you have published your application.
  5. Binding Type: Select https.
  6. (Optional) - Binding Port: Change to anyport example, 44353 or leave it to 443.
  7. (Optional) - Host name: This is the name we put in the browser to access our application. We will put ilovedotnet.com for this demo.
  8. SSL Certificate: Select IIS Express Development Certificate.
configuring iis

Next step is to configure the “Application Pool” for our site. The application pool name will be the same as the “Site name” we have provided in the last step. Therefore, in this case, the application pool name will be “ilovedotnet”.

  1. Click to “Application Pools” from the left panel.
  2. Double click on the pool “ilovedotnet”.
  3. It will open an “edit application pool” window.
  4. Select “No Managed Code” from the .NET CLR version drop-down.
configure application pool

Configuring DNS Host

The last step is to configure our DNS host file.

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

    hosts file
  2. We need to add the hostname that we provided in IIS against the localhost IP address.

    configuring hosts file

Demo

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

final output

Troubleshooting common hosting issues

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

    Check if the hostname is configured correctly in the 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.

  2. 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.

  3. 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 the 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

Summary

In this article, we learned how to deploy a Blazor application on IIS in windows machine. We also learned how to resolve some of the common hosting issues while deploying a Blazor application.

  • Blazor
  • Publishing
  • IIS