Not all website deployment destinations are in the cloud. There are still on-premises scenarios when there is a need to deploy our modern apps to IIS. In this tutorial I show how you would go about running a client-side Blazor web app, together with an API endpoint, under IIS (Internet Information Services) on a Windows 10 development machine. The steps are very similar to doing the same thing on Windows Server.
Prerequisites:
The following are assumed:
- You are working on a Windows 10 computer. The version I used for this article is version 2004. You have Visual Studio 2019 installed on your computer. The exact version of Visual Studio 2019 used for this tutorial is 16.7.0
- You have .NET Core 3.1 (or later) installed on your computer. At the time of writing this post, I have version .NET Core version 3.1.400 installed on my computer.
Create a hosted client-side Blazor application
Let us create a simple Blazor solution that consists of the following projects:
- A server-side API backend ASP.NET application
- A client-side Blazor application
The quickest way to create the above projects is to execute the following command from a terminal window in a working directory on your hard drive:
dotnet new blazorwasm -o BlazorIIS --hosted --no-https
The above command will create solution in a new directory named BlazorIIS without support for SSL. The solution will consist of the following three projects:
- A client-side blazor application
- A server-side API application
- A shared .NET Standard 2.1 class library project
We will make some changes to the the first two application so that we prepare them for deployment to IIS.
Start Visual Studio 2019 and open the solution file named BlazorIIS.sln in the BlazorIIS folder.
Changes to the server-side API application
Make the following changes to the server-side API application.:
1) Edit the Properties/launchSettings.json file in the server-side API application. Around line 6, change the port number on the applicationUrl setting to 55555. Therefore, the setting will look like this:
"applicationUrl": "http://localhost:55555"
2) We need to enable CORS on the server-side API application. This is done by making these changes to Startup.cs:
Add the following code to the ConfigureServices() method:
services.AddCors(options => {
options.AddPolicy("ApiPolicy",
builder => builder
.AllowAnyHeader()
.AllowAnyOrigin()
.AllowAnyMethod()); ;
});
Add this line of code in the Configure() method between app.UseRouting() and app.UseEndpoints():
app.UseCors("ApiPolicy");
Finally, add this annotation to the Controllers/WeatherForecastController.cs file just above the class declaration:
[EnableCors("ApiPolicy")]
The WeatherForecaseController class declaration should look like this:
[ApiController]
[Route("api/[controller]")]
[EnableCors("ApiPolicy")]
public class WeatherForecastController : ControllerBase
Changes to the client-side blazor application
1) Edit the Properties/launchSettings.json file in the client-side Blazor application. Also, around line 6, change the port number on the applicationUrl setting to 44444. Therefore, the setting will look like this:
"applicationUrl": http://localhost:44444
2) To make the Blazor app run under IIS, I disabled integrity check by adding a BlazorCacheBootResources tag in the app’s .csproj file inside the <PropertyGroup> section:
<BlazorCacheBootResources>false</BlazorCacheBootResources>
3) The WeatherForecast API service is being called from the Blazor app from the Pages/FetchData.razor page. Open this file in the Visual Studio editor, go to the bottom of the file and change the single line of code inside the OnInitializedAsync() method so that it makes a proper request to the service on the server. The method should look like this:
protected override async Task OnInitializedAsync() {
forecasts = await Http.GetFromJsonAsync<WeatherForecast[]>("http://localhost:55555/WeatherForecast");
}
Test the application in Visual Studio 2019
Let us make sure the application works in Visual Studio 2019 before we attempt to deploy it into IIS. In ‘Solution Explorer’ right-click on the solution node and select Properties.
Under tab “Common Properties” >> “Startup Project”, click on the “Multiple startup projects” radio button.
Move the server project so that it is above the client project:
Next, change the Action for both the server and client projects to Start.
Click on both the Apply and OK buttons respectively. Now, run the solution by hitting F5 on your keyboard. If you click on “Fetch data” on the left side navigation you should see data is read from the API service.
Publishing our server and client apps
Go into a terminal window inside the root directory of the API server project and execute the following command that produces a release version of your server-side application inside a folder named published:
dotnet publish -c Release -o published
Execute the same command in the root of the client-side Blazor project.
Enabling the IIS feature in Windows 10
We can now start the process of deploying both server-side and client-side application to IIS. If you have not done so yet, you will need to install the IIS (Internet Information Services) feature on your Windows 10 computer. Right-click on the start button the select “Apps and Features” at the very top of the list.
On the right-side, click on “Programs and Features”.
Click on “Turn Windows features on or off” on the left-side.
NOTE: A quicker way to arrive at the same above window is: Run >> optionalfeatures
Expand “Internet Information Services” and “World Wide Web Services”, then enable these features:
- Common HTTP Features
- Health and Diagnostics
- Performance Features
- Security
Similarly, enable “IIS Management Console” under “Internet Information Services” >> “Web Management Tools”. This will provide us with the IIS Management console that we will use to create websites.
Once you click on OK, these features will be installed on your computer. Upon completion, navigate to c:\initpub\wwwroot and you will find these default files.
The iisstart.htm file will be served when you point your browser to http://localhost:
NOTE: It is advisable to reboot your computer at this point.
Adding .dat and .wasm MIME types to IIS
By default, IIS is not aware of two MIME types that are important Blazor artifacts. Therefore, we need to add these MIME types to IIS. Start “Internet Information Services (IIS) Manager”. Click on the root node on the left-side, which displays your computer name, then double-click on “MIME Types”:
Click on Add on the right-side, then add the following MIME types:
File name extension | MIME Type |
.dat | application/octet-stream |
.wasm | application/wasm |
Install ASP.NET Core Hosting Bundle
For IIS to support ASP.NET Core, you will need to install the “ASP.NET Core Hosting Bundle”. Point your browser to https://dotnet.microsoft.com/download/dotnet-core/3.1. Click on the “Hosting Bundle” link.
A file named dotnet-hosting-3.1.6-win.exe gets downloaded to your computer. Go ahead and run this installer.
Deploying the server-side ASP.NET API application
In “File Explorer”, create a folder named weather-api under c:\inetpub\wwwroot. Copy the files in your published folder under your server-side API project into this newly created directory.
Inside “IIS Manager”, right-click on the Sites node the select “Add Website…”.
Set the various values as shown below:
Click on the left-side “Application Pools” node.
In the middle of the windows, double click on weather-api.
In the “Edit Application Pool” dialog, set “.NET CLR version” to “No Managed Code”:
Click on OK. Navigate to http://localhost:55555/weatherforecast and you should experience the following:
This means that our API is deployed to IIS and works as expected.
Deploying the client-side Blazor application
In “File Explorer”, create another folder named blazor-weather-client under c:\inetpub\wwwroot. Copy the files in your published/wwwroot folder under your Blazor client-side project into c:\inetpub\wwwroot\blazor-weather-client.
Just like you did before, inside IIS, create a website for the Blazor client-side application named blazor-weather-client as follows:
Just as you previously did with the API application, edit the Application Pool named blazor-weather-client and change the “.NET CLR version” to “No Managed Code”.
Point your browser to http://localhost:44444/, the client-side Blazor application should show up:
The real test is when you click on ‘Fetch data’. Click on it on the left-side and you should see that data is being read from the other server-side API application also being hosted by IIS but at another website.
These same principles should help you with more production ready scenarios like deployment to IIS on Windows Server and deployment of a Web API application that talks to a database.
Happy coding
No comments:
Post a Comment