Quad A

Starting up new Blazor WebAssembly Project

January 13, 2021

Blazor framework piqued my interest when I first heard it. By the time I've checked it out during the pandemic, .NET 5 just got released. Most of the opinion I've got were that Blazor technology is still not production ready, well for me, it doesn't matter as this framework/technology is developer's dream framework. I will not list those features but what piqued my interests are working with the webAssembly and PWA features. To start off with the Blazor project, you can launch your Visual Studio 2019 and select the Blazor App project from the project template list.

Blazor framework piqued my interest when I first heard it. By the time I've checked it out during the pandemic, .NET 5 just got released. Most of the opinion I've got were that Blazor technology is still not production ready, well for me, it doesn't matter as this framework/technology is developer's dream framework. I will not list those features but what piqued my interests are working with the webAssembly and PWA features. To start off with the Blazor project, you can launch your Visual Studio 2019 and select the Blazor App project from the project template list.

Next step will be straight forward, you can name your own Blazor project and solution name at this step.

At this step, you can select what type of Blazor Application you would like to create. You can select the Blazor WebAssembly App

Upon creation from the template, here are the default files created by the template. Application starts thru the Program -> Main routine if you can see the highlighted rectangle shape in the picture above, the line with the "#app" element refers to the index.html element which is highlighted in the index.html file. While the App class refer to the App.Razor file.

The Blazor Index.Razor serves as the starting page or default page for the Blazor project. What it makes it the default page is due to the @page "\" page directive.You will notice, that there is a SurveyPrompt tag already declared for the Blazor project. This html tag is a Razor component which defined in Shared folder SurveyPrompt.razor

This is the SurveyPrompt component generated by the template, you can add or modify this to familiarized in using Razor Components in Blazor

As usual, generated codes are running application you can immediately run for testing. As a SPA application, You'll see the loading label before loading the default page.

To use the re-usable component in Blazor, you can add another Survey prompt and change title to your liking.

Upon running the application, you'll notice how Razor page reuse the Razor component in the default page.

As usual, generated codes are running application you can immediately run for testing. As a SPA application, You'll see the loading label before loading the default page.

To use the re-usable component in Blazor, you can add another Survey prompt and change title to your liking.

Upon running the application, you'll notice how Razor page reuse the Razor component in the default page.


You may also like

View this article on its original page