Setup Blazor app using ASP.NET Core Empty project template (Part 1)

Visual Studio offers Blazor Server and Blazor WebAssembly project templates to the ASP.NET Core developers. Most of the times beginners are taught to utilize these default project templates to build the respective Blazor apps. However, it would be an interesting exercise for beginners to setup Blazor Server and Blazor WebAssembly projects using ASP.NET Core's Empty project template. In this two part article you will develop Blazor "Hello World" application using the Empty project template.

So, let's get going.

Creating an ASP.NET Core project based on Empty project template

To begin with, open Visual Studio and create a new ASP.NET Core project.

Notice that we haven't selected Blazor App option in the project creation dialog; rather we selected ASP.NEt Core Web Application option.

On the next step specify project name and location as per your choice. Finally, create the project by picking the Empty project template.

Note that I have selected ASP.NET Core 6 while creating the project but you can select earlier version also. After creating the project your Solution Explorer should look like this: 

Now that your ASP.NET Core Empty project is ready, let's convert into a Blazor Server app.

Setup Blazor Server app using ASP.NET Core Empty project template

Now open the Startup class and modify the ConfigureServices() method as shown below.

public void ConfigureServices(IServiceCollection services)
{
    services.AddRazorPages();
    services.AddServerSideBlazor();
}

As you can see, we added calls to AddRazorPages() and AddServerSideBlazor() to register required services with the DI container.

Then go to Configure() method and modify it as shown below.

public void Configure(IApplicationBuilder app, 
IWebHostEnvironment env)
{
    if (env.IsDevelopment())
    {
        app.UseDeveloperExceptionPage();
    }

    app.UseStaticFiles();

    app.UseRouting();

    app.UseEndpoints(endpoints =>
    {
        endpoints.MapBlazorHub();
        endpoints.MapFallbackToPage("/_Host");
    });
}

Notice how the static files, routing, and end points are configured. The MapFallbackToPage() method mentions _Host.cshtml file that you will add shortly.

Next, add Pages folder under the project root. And then add HelloWorld.razor component in it using Add New Item dialog.

Write the following code and markup in HelloWorld.razor file.

@page "/"
@page "/HelloWorld"

@code {
    string Message { get; set; }

    protected override void OnInitialized()
    {
        Message = "Hello World!";
    }
}
<h1>@Message</h1>

This code is quite straightforward and hence I am not going into much details here. It is suffice to say that the HelloWorld component has Message property that is assigned "Hello World!" value in the Blazor's OnInitialized() lifecycle method. The Message property is then outputted on the page. The @page directives at the top configure the routes for the HelloWorld component (default route and /HelloWorld route).

Now add _Imports.razor file in the project root and specify the following @using directives to import the required namespaces.

@using BlazorEmptyTest
@using BlazorEmptyTest.Pages
@using Microsoft.AspNetCore.Components.Web
@using Microsoft.AspNetCore.Components.Routing

Now add App.razor file under project's root. And write the following markup in it:

<Router AppAssembly="@typeof(Program).Assembly" 
PreferExactMatches="@true">
    <Found Context="routeData">
        <RouteView RouteData="@routeData" />
    </Found>
    <NotFound>
        <LayoutView>
            <h1>Invalid Address</h1>
        </LayoutView>
    </NotFound>
</Router>

If you developed a Blazor app before, this markup should look familiar to you. Since we aren't using any layout in our app, we don't specify it in this markup.

Next, add an empty Razor view named _Host.cshtml under the project's root folder.

Add the following markup and code in _Host.cshtml file.

@page "/"
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
@namespace BlazorEmptyTest.Pages

<html>
  <head>
    <base href="~/" />	 
  </head>
  <body>
    <component type="typeof(App)" 
	       render-mode="ServerPrerendered" />
    <script src="_framework/blazor.server.js"></script>
  </body>
</html>

Here, we use <component> tag helper to render the App component created earlier. Since we are using Blazor Server, the <script> tag points to blazor.server.js file.

Hit F5 to run the application. Here is a sample output.

In the preceding example we didn't use a layout for our component. To use a layout add Shared folder in your project's root and add a component named Layout.razor.

Then add this code to the layout:

@inherits LayoutComponentBase
@namespace BlazorEmptyTest.Shared

<h1>Welcome!</h1>
<hr />
<div>
    @Body
</div>

Modify _Imports.razor to include:

@using BlazorEmptyTest.Shared

Also, specify that the components should use Layout.razor as their default layout in the App.razor.

...
...
<RouteView RouteData="@routeData"  
DefaultLayout="@typeof(Layout)"/>
...
...

Run the application again. This time the output should resemble the following.

 

Your Solution Explorer should reflect the following project structure:

In this part of the article you prepared a Blazor Server app using Empty project template. In the next part of this article you will setup a Blazor WebAssembly app using Empty project template.

That's it for now! Keep coding!!


Bipin Joshi is an independent software consultant, trainer, author, and meditation teacher. He has been programming, meditating, and teaching for 25+ years. He conducts instructor-led online training courses in ASP.NET family of technologies for individuals and small groups. He is a published author and has authored or co-authored books for Apress and Wrox press. Having embraced the Yoga way of life he also teaches Ajapa Yoga to interested individuals. To know more about him click here.

Get connected : Facebook  Twitter  LinkedIn  YouTube

Posted On : 24 May 2021


Tags : ASP.NET ASP.NET Core MVC .NET Framework Visual Studio Components