Aspnetcore: Working C# Blazor Wasm Sample

[MelbourneDeveloper]

Is your feature request related to a problem? Please describe.

No

Describe the solution you'd like

A C# Blazor Wasm sample

Additional context

All the templates for creating a Blazor Wasm app seem to have been removed. All the tutorials that exist point to content that has been removed. For example, one blog post recommended running this

dotnet new blazorwasm -o blazor-web

But, the result is:

No templates matched the input template name: blazorwasm.

Surely there's a sample somewhere?

[marcusturewicz]

Probably a silly question, but have you got the Blazor templates installed?

dotnet new -i Microsoft.AspNetCore.Blazor.Templates::3.1.0-preview4.19579.2

https://docs.microsoft.com/en-au/aspnet/core/blazor/get-started?view=aspnetcore-3.1&tabs=visual-studio

I have to do this every time I install a new .NET Core SDK - previously installed templates get wiped.

[MelbourneDeveloper]

@marcusturewicz I think you've steered me in the right direction. I believe that I probably don't, but the reason for that is probably that I need to have the preview version of .NET Core installed. So, Blazor Wasm is still only preview?

[marcusturewicz]

I don't believe you need a preview SDK installed, it should work with 3.1.101 for instance. Yes, Blazor Wasm still preview until May 2020 I believe.

[MelbourneDeveloper]

@marcusturewicz this is all I see.

[MelbourneDeveloper]

@marcusturewicz I tried running the command you posted but it doesn't seem to do anything. Where do I get the template from?

[mkArtakMSFT]

Thanks for contacting us.
Please share the following information so that we can help you out:

• The result of dotnet new -u
• The result of dotnet --version
• The version of the Visual Studio you've installed.

[MelbourneDeveloper]

@mkArtakMSFT

Dotnet Version: 3.1.100
Visual Studio:
Microsoft Visual Studio Professional 2019
Version 16.3.5
VisualStudio.16.Release/16.3.5+29411.108

Result of dotnet new -u

Template Instantiation Commands for .NET Core CLI

Currently installed items:
Microsoft.DotNet.Common.ProjectTemplates.3.0
Details:
NuGetPackageId: Microsoft.DotNet.Common.ProjectTemplates.3.0
Version: 2.0.0-preview8.19373.1
Author: Microsoft
Templates:
Class library (classlib) C#
Class library (classlib) F#
Class library (classlib) VB
Console Application (console) C#
Console Application (console) F#
Console Application (console) VB
Uninstall Command:
dotnet new -u Microsoft.DotNet.Common.ProjectTemplates.3.0

Microsoft.DotNet.Common.ProjectTemplates.2.1
Details:
NuGetPackageId: Microsoft.DotNet.Common.ProjectTemplates.2.1
Version: 1.0.2-beta3
Author: Microsoft
Templates:
Class library (classlib) C#
Class library (classlib) F#
Class library (classlib) VB
Console Application (console) C#
Console Application (console) F#
Console Application (console) VB
Uninstall Command:
dotnet new -u Microsoft.DotNet.Common.ProjectTemplates.2.1

Microsoft.DotNet.Test.ProjectTemplates.2.1
Details:
NuGetPackageId: Microsoft.DotNet.Test.ProjectTemplates.2.1
Version: 1.0.2-beta4-20181009-2100240
Author: Microsoft
Templates:
Unit Test Project (mstest) C#
Unit Test Project (mstest) F#
Unit Test Project (mstest) VB
xUnit Test Project (xunit) C#
xUnit Test Project (xunit) F#
xUnit Test Project (xunit) VB
Uninstall Command:
dotnet new -u Microsoft.DotNet.Test.ProjectTemplates.2.1

Microsoft.DotNet.Web.ProjectTemplates.3.0
Details:
NuGetPackageId: Microsoft.DotNet.Web.ProjectTemplates.3.0
Version: 3.0.0
Author: Microsoft
Templates:
Blazor Server App (blazorserver) C#
ASP.NET Core Empty (web) C#
ASP.NET Core Empty (web) F#
ASP.NET Core gRPC Service (grpc) C#
Razor Class Library (razorclasslib) C#
ASP.NET Core Web App (webapp) C#
ASP.NET Core Web App (Model-View-Controller) (mvc) C#
ASP.NET Core Web App (Model-View-Controller) (mvc) F#
ASP.NET Core Web API (webapi) C#
ASP.NET Core Web API (webapi) F#
Worker Service (worker) C#
Uninstall Command:
dotnet new -u Microsoft.DotNet.Web.ProjectTemplates.3.0

Microsoft.DotNet.Web.ProjectTemplates.2.1
Details:
NuGetPackageId: Microsoft.DotNet.Web.ProjectTemplates.2.1
Version: 2.1.12
Author: Microsoft
Templates:
ASP.NET Core Empty (web) C#
ASP.NET Core Empty (web) F#
Razor Class Library (razorclasslib) C#
ASP.NET Core Web App (razor) C#
ASP.NET Core Web App (Model-View-Controller) (mvc) C#
ASP.NET Core Web App (Model-View-Controller) (mvc) F#
ASP.NET Core Web API (webapi) C#
ASP.NET Core Web API (webapi) F#
Uninstall Command:
dotnet new -u Microsoft.DotNet.Web.ProjectTemplates.2.1

Microsoft.DotNet.Web.Spa.ProjectTemplates
Details:
NuGetPackageId: Microsoft.DotNet.Web.Spa.ProjectTemplates
Version: 2.1.12
Author: Microsoft
Templates:
ASP.NET Core with Angular (angular) C#
ASP.NET Core with React.js (react) C#
ASP.NET Core with React.js and Redux (reactredux) C#
Uninstall Command:
dotnet new -u Microsoft.DotNet.Web.Spa.ProjectTemplates

Microsoft.DotNet.Common.ItemTemplates
Details:
NuGetPackageId: Microsoft.DotNet.Common.ItemTemplates
Version: 3.1.0
Author: Microsoft
Templates:
dotnet gitignore file (gitignore)
global.json file (globaljson)
NuGet Config (nugetconfig)
Solution File (sln)
Dotnet local tool manifest file (tool-manifest)
Web Config (webconfig)
Uninstall Command:
dotnet new -u Microsoft.DotNet.Common.ItemTemplates

Microsoft.DotNet.Common.ProjectTemplates.3.1
Details:
NuGetPackageId: Microsoft.DotNet.Common.ProjectTemplates.3.1
Version: 3.1.0
Author: Microsoft
Templates:
Class library (classlib) C#
Class library (classlib) F#
Class library (classlib) VB
Console Application (console) C#
Console Application (console) F#
Console Application (console) VB
Uninstall Command:
dotnet new -u Microsoft.DotNet.Common.ProjectTemplates.3.1

Microsoft.DotNet.Test.ProjectTemplates.3.0
Details:
NuGetPackageId: Microsoft.DotNet.Test.ProjectTemplates.3.0
Version: 1.0.2-beta4.19354.2
Author: Microsoft
Templates:
Unit Test Project (mstest) C#
Unit Test Project (mstest) F#
Unit Test Project (mstest) VB
xUnit Test Project (xunit) C#
xUnit Test Project (xunit) F#
xUnit Test Project (xunit) VB
Uninstall Command:
dotnet new -u Microsoft.DotNet.Test.ProjectTemplates.3.0

Microsoft.DotNet.Web.ProjectTemplates.3.1
Details:
NuGetPackageId: Microsoft.DotNet.Web.ProjectTemplates.3.1
Version: 3.1.0
Author: Microsoft
Templates:
Blazor Server App (blazorserver) C#
ASP.NET Core Empty (web) C#
ASP.NET Core Empty (web) F#
ASP.NET Core gRPC Service (grpc) C#
Razor Class Library (razorclasslib) C#
ASP.NET Core Web App (webapp) C#
ASP.NET Core Web App (Model-View-Controller) (mvc) C#
ASP.NET Core Web App (Model-View-Controller) (mvc) F#
ASP.NET Core Web API (webapi) C#
ASP.NET Core Web API (webapi) F#
Worker Service (worker) C#
Uninstall Command:
dotnet new -u Microsoft.DotNet.Web.ProjectTemplates.3.1

Microsoft.DotNet.Web.Spa.ProjectTemplates.3.0
Details:
NuGetPackageId: Microsoft.DotNet.Web.Spa.ProjectTemplates.3.0
Version: 3.0.0
Author: Microsoft
Templates:
ASP.NET Core with Angular (angular) C#
ASP.NET Core with React.js (react) C#
ASP.NET Core with React.js and Redux (reactredux) C#
Uninstall Command:
dotnet new -u Microsoft.DotNet.Web.Spa.ProjectTemplates.3.0

Microsoft.DotNet.Wpf.ProjectTemplates
Details:
NuGetPackageId: Microsoft.DotNet.Wpf.ProjectTemplates
Version: 3.1.0-rtm.19565.1
Author: Microsoft
Templates:
WPF Application (wpf) C#
WPF Class library (wpflib) C#
WPF Custom Control Library (wpfcustomcontrollib) C#
WPF User Control Library (wpfusercontrollib) C#
Uninstall Command:
dotnet new -u Microsoft.DotNet.Wpf.ProjectTemplates

NUnit3.DotNetNew.Template
Details:
NuGetPackageId: NUnit3.DotNetNew.Template
Version: 1.7.0
Author: akharlov
Templates:
NUnit 3 Test Project (nunit) C#
NUnit 3 Test Item (nunit-test) C#
NUnit 3 Test Project (nunit) F#
NUnit 3 Test Item (nunit-test) F#
NUnit 3 Test Project (nunit) VB
NUnit 3 Test Item (nunit-test) VB
Uninstall Command:
dotnet new -u NUnit3.DotNetNew.Template

Microsoft.DotNet.Test.ProjectTemplates.3.1
Details:
NuGetPackageId: Microsoft.DotNet.Test.ProjectTemplates.3.1
Version: 1.0.2-beta4.19511.1
Author: Microsoft
Templates:
Unit Test Project (mstest) C#
Unit Test Project (mstest) F#
Unit Test Project (mstest) VB
xUnit Test Project (xunit) C#
xUnit Test Project (xunit) F#
xUnit Test Project (xunit) VB
Uninstall Command:
dotnet new -u Microsoft.DotNet.Test.ProjectTemplates.3.1

Microsoft.DotNet.Web.ItemTemplates
Details:
NuGetPackageId: Microsoft.DotNet.Web.ItemTemplates
Version: 3.1.0
Author: Microsoft
Templates:
Protocol Buffer File (proto)
Razor Component (razorcomponent) C#
Razor Page (page) C#
MVC ViewImports (viewimports) C#
MVC ViewStart (viewstart) C#
Uninstall Command:
dotnet new -u Microsoft.DotNet.Web.ItemTemplates

Microsoft.DotNet.Web.Spa.ProjectTemplates.3.1
Details:
NuGetPackageId: Microsoft.DotNet.Web.Spa.ProjectTemplates.3.1
Version: 3.1.0
Author: Microsoft
Templates:
ASP.NET Core with Angular (angular) C#
ASP.NET Core with React.js (react) C#
ASP.NET Core with React.js and Redux (reactredux) C#
Uninstall Command:
dotnet new -u Microsoft.DotNet.Web.Spa.ProjectTemplates.3.1

Microsoft.Dotnet.WinForms.ProjectTemplates
Details:
NuGetPackageId: Microsoft.Dotnet.WinForms.ProjectTemplates
Version: 4.8.1-rtm.19564.4
Author: Microsoft
Templates:
Windows Forms (WinForms) Application (winforms) C#
Windows Forms (WinForms) Class library (winformslib) C#
Uninstall Command:
dotnet new -u Microsoft.Dotnet.WinForms.ProjectTemplates

Microsoft.AspNetCore.Blazor.Templates
Details:
NuGetPackageId: Microsoft.AspNetCore.Blazor.Templates
Version: 3.1.0-preview4.19579.2
Author: Microsoft
Templates:
Blazor WebAssembly App (blazorwasm) C#
Uninstall Command:
dotnet new -u Microsoft.AspNetCore.Blazor.Templates

[MelbourneDeveloper]

@mkArtakMSFT can someone please just point me to a working sample? That's all I'm asking. Just a repo somewhere so I can just see it working.

[mkArtakMSFT]

@MelbourneDeveloper your VS version seem to be outdated.
Please update to the latest VS 2019 release. I assume the template will show up after the update.

[MelbourneDeveloper]

@mkArtakMSFT nope. Still doesn't have the Web Assembly template.

Can you please point me to a working sample? You could easily just post one on Github.

[adrianwright109]

@MelbourneDeveloper as Blazor Web Assembly is still in preview you have to manually install the template from the command line for it to show up in VS, see the Blazor docs for details:
https://docs.microsoft.com/en-gb/aspnet/core/blazor/get-started?view=aspnetcore-3.1&tabs=visual-studio

[MelbourneDeveloper]

@adrianwright109 everyone keeps pointing me to that article but it doesn't work. Any chance you could create a project and post it somewhere so I can get going?

[tnc1997]

Any chance you could create a project and post it somewhere so I can get going?

@MelbourneDeveloper if you are having difficulty in getting the Blazor templates working, then feel free to clone this temporary repository as a starting point so that you can get going. I created a new project using the dotnet new -i Microsoft.AspNetCore.Blazor.Templates::3.2.0-preview1.20073.1 and dotnet new blazorwasm -o WebApplication commands and pushed it to that repository. Hope that helps, let me know if you have issues running the project using the dotnet run command.

[MelbourneDeveloper]

@tnc1997 thanks. Is that a Wasm sample?

[tnc1997]

Is that a Wasm sample?

@MelbourneDeveloper yes, it was created using the Blazor WebAssembly project template.

[MelbourneDeveloper]

When I run dotnet new blazorwasm -o WebApplication, I get

No templates matched the input template name: blazorwasm

[MelbourneDeveloper]

@tnc1997 I can run your sample. I'm trying to confirm that the code is running on the client side in the browser now.

[tnc1997]

When I run dotnet new blazorwasm -o WebApplication, I get

No templates matched the input template name: blazorwasm

Out of interest, would you mind posting the output after running the dotnet new -i Microsoft.AspNetCore.Blazor.Templates::3.2.0-preview1.20073.1 command?

For your reference, here is the output that I get after running the above command:

  Restore completed in 285.76 ms for /home/thomas/.templateengine/dotnetcli/v3.1.101/scratch/restore.csproj.

Usage: new [options]

Options:
  -h, --help          Displays help for this command.
  -l, --list          Lists templates containing the specified name. If no name is specified, lists all templates.
  -n, --name          The name for the output being created. If no name is specified, the name of the current directory is used.
  -o, --output        Location to place the generated output.
  -i, --install       Installs a source or a template pack.
  -u, --uninstall     Uninstalls a source or a template pack.
  --nuget-source      Specifies a NuGet source to use during install.
  --type              Filters templates based on available types. Predefined values are "project", "item" or "other".
  --dry-run           Displays a summary of what would happen if the given command line were run if it would result in a template creation.
  --force             Forces content to be generated even if it would change existing files.
  -lang, --language   Filters templates based on language and specifies the language of the template to create.
  --update-check      Check the currently installed template packs for updates.
  --update-apply      Check the currently installed template packs for update, and install the updates.


Templates                                         Short Name               Language          Tags                                 
----------------------------------------------------------------------------------------------------------------------------------
Console Application                               console                  [C#], F#, VB      Common/Console                       
Class library                                     classlib                 [C#], F#, VB      Common/Library                       
WPF Application                                   wpf                      [C#]              Common/WPF                           
WPF Class library                                 wpflib                   [C#]              Common/WPF                           
WPF Custom Control Library                        wpfcustomcontrollib      [C#]              Common/WPF                           
WPF User Control Library                          wpfusercontrollib        [C#]              Common/WPF                           
Windows Forms (WinForms) Application              winforms                 [C#]              Common/WinForms                      
Windows Forms (WinForms) Class library            winformslib              [C#]              Common/WinForms                      
Worker Service                                    worker                   [C#]              Common/Worker/Web                    
Unit Test Project                                 mstest                   [C#], F#, VB      Test/MSTest                          
NUnit 3 Test Project                              nunit                    [C#], F#, VB      Test/NUnit                           
NUnit 3 Test Item                                 nunit-test               [C#], F#, VB      Test/NUnit                           
xUnit Test Project                                xunit                    [C#], F#, VB      Test/xUnit                           
Razor Component                                   razorcomponent           [C#]              Web/ASP.NET                          
Razor Page                                        page                     [C#]              Web/ASP.NET                          
MVC ViewImports                                   viewimports              [C#]              Web/ASP.NET                          
MVC ViewStart                                     viewstart                [C#]              Web/ASP.NET                          
Blazor Server App                                 blazorserver             [C#]              Web/Blazor                           
Blazor WebAssembly App                            blazorwasm               [C#]              Web/Blazor/WebAssembly               
ASP.NET Core Empty                                web                      [C#], F#          Web/Empty                            
ASP.NET Core Web App (Model-View-Controller)      mvc                      [C#], F#          Web/MVC                              
ASP.NET Core Web App                              webapp                   [C#]              Web/MVC/Razor Pages                  
ASP.NET Core with Angular                         angular                  [C#]              Web/MVC/SPA                          
ASP.NET Core with React.js                        react                    [C#]              Web/MVC/SPA                          
ASP.NET Core with React.js and Redux              reactredux               [C#]              Web/MVC/SPA                          
Razor Class Library                               razorclasslib            [C#]              Web/Razor/Library/Razor Class Library
ASP.NET Core Web API                              webapi                   [C#], F#          Web/WebAPI                           
ASP.NET Core gRPC Service                         grpc                     [C#]              Web/gRPC                             
dotnet gitignore file                             gitignore                                  Config                               
global.json file                                  globaljson                                 Config                               
NuGet Config                                      nugetconfig                                Config                               
Dotnet local tool manifest file                   tool-manifest                              Config                               
Web Config                                        webconfig                                  Config                               
Solution File                                     sln                                        Solution                             
Protocol Buffer File                              proto                                      Web/gRPC                             

Examples:
    dotnet new mvc --auth Individual
    dotnet new sln
    dotnet new --help

[MelbourneDeveloper]

@tnc1997 your sample works well and I can see HTTP calls showing up in the network tab of the browser developer tools. Great! Out of curiosity, do you now where to flick the switch over from Server side to Client side? I have a server side app that already works so I just want to flick it over.

This is the output:

Welcome to .NET Core 3.1!

SDK Version: 3.1.101

Telemetry

The .NET Core tools collect usage data in order to help us improve your experience. The data is anonymous. It is collected by Microsoft and shared with the community. You can opt-out of telemetry by setting the DOTNET_CLI_TELEMETRY_OPTOUT environment variable to '1' or 'true' using your favorite shell.

Read more about .NET Core CLI Tools telemetry: https://aka.ms/dotnet-cli-telemetry

---

Explore documentation: https://aka.ms/dotnet-docs
Report issues and find source on GitHub: https://github.com/dotnet/core
Find out what's new: https://aka.ms/dotnet-whats-new
Learn about the installed HTTPS developer cert: https://aka.ms/aspnet-core-https
Use 'dotnet --help' to see available commands or visit: https://aka.ms/dotnet-cli-docs

Write your first app: https://aka.ms/first-net-core-app

Getting ready...
Couldn't find an installed template that matches the input, searching online for one that does...
Usage: new [options]

Options:
-h, --help Displays help for this command.
-l, --list Lists templates containing the specified name. If no name is specified, lists all templates.
-n, --name The name for the output being created. If no name is specified, the name of the current directory is used.
-o, --output Location to place the generated output.
-i, --install Installs a source or a template pack.
-u, --uninstall Uninstalls a source or a template pack.
--nuget-source Specifies a NuGet source to use during install.
--type Filters templates based on available types. Predefined values are "project", "item" or "other".
--dry-run Displays a summary of what would happen if the given command line were run if it would result in a template creation.
--force Forces content to be generated even if it would change existing files.
-lang, --language Filters templates based on language and specifies the language of the template to create.
--update-check Check the currently installed template packs for updates.
--update-apply Check the currently installed template packs for update, and install the updates.

No templates matched the input template name: blazorwasm.

Templates Short Name Language Tags

Console Application console [C#], F#, VB Common/Console
Class library classlib [C#], F#, VB Common/Library
WPF Application wpf [C#] Common/WPF
WPF Class library wpflib [C#] Common/WPF
WPF Custom Control Library wpfcustomcontrollib [C#] Common/WPF
WPF User Control Library wpfusercontrollib [C#] Common/WPF
Windows Forms (WinForms) Application winforms [C#] Common/WinForms
Windows Forms (WinForms) Class library winformslib [C#] Common/WinForms
Worker Service worker [C#] Common/Worker/Web
Unit Test Project mstest [C#], F#, VB Test/MSTest
NUnit 3 Test Project nunit [C#], F#, VB Test/NUnit
NUnit 3 Test Item nunit-test [C#], F#, VB Test/NUnit
xUnit Test Project xunit [C#], F#, VB Test/xUnit
Razor Component razorcomponent [C#] Web/ASP.NET
Razor Page page [C#] Web/ASP.NET
MVC ViewImports viewimports [C#] Web/ASP.NET
MVC ViewStart viewstart [C#] Web/ASP.NET
Blazor Server App blazorserver [C#] Web/Blazor
ASP.NET Core Empty web [C#], F# Web/Empty
ASP.NET Core Web App (Model-View-Controller) mvc [C#], F# Web/MVC
ASP.NET Core Web App webapp [C#] Web/MVC/Razor Pages
ASP.NET Core with Angular angular [C#] Web/MVC/SPA
ASP.NET Core with React.js react [C#] Web/MVC/SPA
ASP.NET Core with React.js and Redux reactredux [C#] Web/MVC/SPA
Razor Class Library razorclasslib [C#] Web/Razor/Library/Razor Class Library
ASP.NET Core Web API webapi [C#], F# Web/WebAPI
ASP.NET Core gRPC Service grpc [C#] Web/gRPC
dotnet gitignore file gitignore Config
global.json file globaljson Config
NuGet Config nugetconfig Config
Dotnet local tool manifest file tool-manifest Config
Web Config webconfig Config
Solution File sln Solution
Protocol Buffer File proto Web/gRPC

Examples:
dotnet new mvc --auth Individual
dotnet new webapi
dotnet new --help

[tnc1997]

@MelbourneDeveloper just want to clarify that is definitely the output you get after running the dotnet new -i Microsoft.AspNetCore.Blazor.Templates::3.2.0-preview1.20073.1 command and not that of the dotnet new blazorwasm -o WebApplication command?

[tnc1997]

Out of curiosity, do you now where to flick the switch over from Server side to Client side? I have a server side app that already works so I just want to flick it over.

As far as I can tell, it is a little bit more involved than a single change. If the source code is publicly available in a repository, then I'd be more than happy to take a look and help out where I can.

[MelbourneDeveloper]

@tnc1997

I've finally been able to get my rest client running on Blazor Wasm.

https://github.com/MelbourneDeveloper/RestClient.Net/tree/master/RestClient.Net.Samples.Blazor

I also sifted through the code and figured out how to switch from back-end to front-end rendering. It's pretty straight forward. If you switch the target framework to netcoreapp3.1 it will run in back-end mode.

Thanks again.

[tnc1997]

@MelbourneDeveloper no problem, happy to help!

[msftbot[bot]]

Thank you for contacting us. Due to a lack of activity on this discussion issue we're closing it in an effort to keep our backlog clean. If you believe there is a concern related to the ASP.NET Core framework, which hasn't been addressed yet, please file a new issue.

This issue will be locked after 30 more days of inactivity. If you still wish to discuss this subject after then, please create a new issue!