Blazor WASM Publishing to IIS
Blazor
29 Articles
In this article, let's learn about Publishing
Blazor apps to IIS
in windows machine.
Note: If you have not done so already, I recommend you read the article on Blazor WASM Dynamic Component.
Table of Contents
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
Install IIS in your machine.
Install URL Rewrite module from here.
Install Hosting Bundle for Latest .NET Version from here. .NET 6.0 is the latest version at the time of writing.
- Restart the machine after installing all the above prerequisites.
Publishing
Open the project in Visual Studio.
Right click the project and click on publish.
Click on New Publish Profile.
Select Folder target and click on Next.
Leave the path to default location or change it to new path.
CLick on 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
- 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 six fields.
- Site name: Put any name of your choice. Here I put "ilovedotnet".
- Physical Path: The path to the folder where you have published your application.
- Binding Type: Select https.
- (Optional) - Binding Port: Change to anyport example, 44353 or leave it to 443.
- (Optional) - Host name: This is the name we put in the browser to access our application. We will put ilovedotnet.com for this demo.
- SSL Certificate: Select IIS Express Development Certificate.
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”.
- Click to “Application Pools” from the left panel.
- Double click on the pool “ilovedotnet”.
- It will open an “edit application pool” window.
- Select “No Managed Code” from the .NET CLR version drop-down.
Configuring 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 the localhost IP address.
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.
Troubleshooting common hosting issues
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.
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 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.