Setting up development environment for Blazor WebAssembly

Sunil Vijendra — Mon, 01 Jun 2020 04:19:54 +0000

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

To get started, create a new project as below:

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

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.

This is cool! Lets run...

> dotnet run
<bunch of build errors>

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

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

This gives a pop-up like below!!

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

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

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

Happy Learning!

DEV Community: Sunil Vijendra

Setting up development environment for Blazor WebAssembly