DEV Community

Sunil Vijendra
Sunil Vijendra

Posted on

Setting up development environment for Blazor WebAssembly

#dotnet #blazor #webassembly #microsoftlearn

I recently took a module on Microsoft Learn called Building webapps with Blazor. Hit some road blocks in setting up the development environment. Sharing my learning here.

I have Visual Studio 2019 installed on my machine (think its 16.4 version) so the dotnet core SDK comes along with it. All of below commands I ran from VS Developer command prompt.

> dotnet --version 3.1.101
Enter fullscreen mode Exit fullscreen mode

To get started, create a new project as below:

> dotnet new blazorwasm -o CICalc No templates matched the input template name: blazorwasm.
Enter fullscreen mode Exit fullscreen mode

Hmmm...I thought I had this covered as I have VS 2019!!! So, I need to install the template.

> dotnet new --install Microsoft.AspNetCore.Components.WebAssembly.Templates::3.2.0 > dotnet new blazorwasm -o CICalc The template "Blazor WebAssembly App" was created successfully. Processing post-creation actions... Running 'dotnet restore' on C:\Work\BuildChallenge\CICalc\CICalc.csproj... Restore completed in 10 sec for C:\Work\BuildChallenge\CICalc\CICalc.csproj. Restore succeeded.
Enter fullscreen mode Exit fullscreen mode

This is cool! Lets run...

> dotnet run <bunch of build errors>
Enter fullscreen mode Exit fullscreen mode

This is tricky! So, lets copy that error and Google...and I figure that I should update to latest dotnet core SDK. So, I did a VS update from from 16.4 to 16.6. If you do not have Visual Studio then download the latest .NET core SDK from here.

> dotnet --version 3.1.300 > dotnet run crit: Microsoft.AspNetCore.Server.Kestrel[0] Unable to start Kestrel. System.InvalidOperationException: Unable to configure HTTPS endpoint. No server certificate was specified, and the default developer certificate could not be found or is out of date. To generate a developer certificate run 'dotnet dev-certs https'. To trust the certificate (Windows and macOS only) run 'dotnet dev-certs https --trust'. For more information on configuring HTTPS see https://go.microsoft.com/fwlink/?linkid=848054. <<snip>>
Enter fullscreen mode Exit fullscreen mode

Wait, when dotnet core SDK is installed, it should come with a developer certificate. Lets generate a certificate and trust the same:

> dotnet dev-certs https > dotnet dev-certs https --trust
Enter fullscreen mode Exit fullscreen mode

This gives a pop-up like below!!

Install Developer https cert

Restart the command prompt and go to project folder and run the app. If it still does not work (which was the case with me!!), do the following:

> dotnet dev-certs https --clean > dotnet dev-certs https -t
Enter fullscreen mode Exit fullscreen mode

After running these, restart the developer command prompt and go to the project folder and run:

C:\Work\BuildChallenge\CICalc>dotnet run info: Microsoft.Hosting.Lifetime[0] Now listening on: https://localhost:5001 info: Microsoft.Hosting.Lifetime[0] Now listening on: http://localhost:5000 info: Microsoft.Hosting.Lifetime[0] Application started. Press Ctrl+C to shut down. info: Microsoft.Hosting.Lifetime[0] Hosting environment: Development info: Microsoft.Hosting.Lifetime[0] Content root path: C:\Work\BuildChallenge\CICalc
Enter fullscreen mode Exit fullscreen mode

And open browser with https://localhost:5001 and you should see your First Blazor app:

First Blazor app

Happy Learning!

Top comments (0)