Setting up development environment for Blazor WebAssembly
Tags: dotnet, blazor, webassembly, microsoftlearn
Published: 2020-06-01 04:19:54

I recently took a module on [Microsoft Learn](https://docs.microsoft.com/en-us/learn/) called [Building webapps with Blazor](https://docs.microsoft.com/en-us/learn/modules/build-blazor-webassembly-visual-studio-code/). 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](https://dotnet.microsoft.com/download).

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

![Install Developer https cert](https://dev-to-uploads.s3.amazonaws.com/i/0b89t9tcjkq6ub184hiy.PNG)

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](https://localhost:5001) and you should see your First Blazor app:

![First Blazor app](https://dev-to-uploads.s3.amazonaws.com/i/9d8mr9apa0komvxwzjvv.PNG)

Happy Learning!